/* ============================================================
   SGC (Skin GeneCurator) Design System — Colors & Typography
   ------------------------------------------------------------
   Wood-tone (terracotta / warm-clay) theme with TheraNovis
   lab-blue accent. Warm earthy neutrals + clay primary give
   a soft, vital, easy-on-the-eyes feel. Single source of
   truth for color, type, spacing, radius, and shadow.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,700&display=swap');

:root {
  /* ──────────────────────────────────────────────────────────
     COLOR · Brand (terracotta / warm-clay wood family)
     Earthy clay primary that evokes natural wood, with warm
     sand tints and a deep walnut for emphasis. Token names
     kept as --rose-* so existing markup re-skins automatically.
     ────────────────────────────────────────────────────────── */
  --rose-900: #5b2b1c;   /* deepest – walnut, titles on light */
  --rose-700: #8a4429;   /* deep   – body emphasis on light */
  --rose-600: #b15a35;   /* primary clay — the brand accent */
  --rose-500: #c47049;   /* primary hover / mid */
  --rose-400: #d18a66;   /* pressed / tinted */
  --rose-300: #ecc0a3;   /* badge tint, dividers */
  --rose-200: #f8e6d8;   /* soft pill bg */
  --rose-100: #f9ede2;   /* surface tint */
  --rose-50:  #fdf5ef;   /* lightest surface (cards on sand) */

  /* COLOR · Brand (TheraNovis lab-blue — clinical / admin) */
  --novis-900: #0b3d63;
  --novis-700: #1567a3;
  --novis-600: #1f8acb;   /* TheraNovis logo blue */
  --novis-500: #2ea3e2;
  --novis-300: #9cd3ef;
  --novis-100: #e3f1fa;

  /* COLOR · Neutrals — warm brown-tinted greys (espresso) */
  --ink-900: #241910;
  --ink-800: #382617;    /* primary text (dark espresso) */
  --ink-700: #54402d;
  --ink-600: #6a5440;    /* secondary text */
  --ink-500: #8a715a;
  --ink-400: #a48b73;    /* muted / placeholder */
  --ink-300: #c8b6a1;
  --ink-200: #e4d9cb;    /* hairline / divider */
  --ink-100: #efe7dc;

  /* COLOR · Surfaces — warm sand / off-white */
  --bg-base:    #f1e7db; /* app shell – warm sand */
  --bg-cream:   #faf5ee; /* alt shell */
  --bg-surface: #ffffff; /* card */
  --bg-surface-tint: #fbf5ec; /* tinted card (action card) */
  --bg-clinical: #f8fafc; /* report / clinical pages */

  /* COLOR · Semantic — diagnostic scores */
  --good:   #16a34a;   /* + */
  --warn:   #d97706;   /* − */
  --poor:   #dc2626;   /* −− */
  --info:   var(--novis-600);
  --good-bg: #ecfdf5;
  --warn-bg: #fffbeb;
  --poor-bg: #fef2f2;

  /* COLOR · Borders & focus */
  --border:        rgba(177, 90, 53, 0.13);
  --border-strong: rgba(177, 90, 53, 0.28);
  --focus-ring:    rgba(177, 90, 53, 0.30);

  /* COLOR · Accent (KakaoTalk channel — yellow, brand-locked) */
  --kakao: #fae100;
  --kakao-ink: #3c1e1e;

  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY
     Korean: Noto Sans KR (weights 300–900).
     Latin / numerals: Inter for UI; Playfair Display for
     editorial/marketing display text.
     ────────────────────────────────────────────────────────── */
  --font-sans: 'Noto Sans KR', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Playfair Display', 'Noto Sans KR', serif;
  --font-numeric: 'Inter', 'Noto Sans KR', sans-serif;

  /* Type scale (rem; root = 16px) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-md:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.45rem;   /* 39 – hero h1 */
  --fs-5xl:  clamp(2.5rem, 6vw, 4rem); /* editorial hero */

  /* Line heights & tracking */
  --lh-tight: 1.18;
  --lh-snug:  1.32;
  --lh-base:  1.55;
  --lh-loose: 1.72;
  --tracking-tight: -0.055em;   /* big Korean display */
  --tracking-snug:  -0.02em;
  --tracking-wide:  0.08em;     /* uppercase labels */
  --tracking-xwide: 0.2em;      /* "SCROLL TO DISCOVER" */

  /* ──────────────────────────────────────────────────────────
     SPACING (8-pt-ish, with extra-small steps for tight forms)
     ────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 36px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 88px;

  /* RADII */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 9999px;

  /* SHADOWS — soft, warm, wood-tinted */
  --shadow-xs: 0 1px 2px rgba(74, 47, 25, 0.05);
  --shadow-sm: 0 2px 8px rgba(74, 47, 25, 0.07);
  --shadow-md: 0 8px 24px rgba(74, 47, 25, 0.09);
  --shadow-lg: 0 12px 50px rgba(74, 47, 25, 0.12);
  --shadow-xl: 0 24px 70px rgba(74, 47, 25, 0.15);
  --shadow-cta: 0 5px 20px rgba(177, 90, 53, 0.28);
  --shadow-inset: inset 0 2px 4px rgba(74, 47, 25, 0.05);

  /* MOTION */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 180ms;
  --dur-med:  320ms;
  --dur-slow: 520ms;

  /* ──────────────────────────────────────────────────────────
     SEMANTIC TOKENS — refer to these, not the raw values
     ────────────────────────────────────────────────────────── */
  --fg-1: var(--ink-800);   /* primary text */
  --fg-2: var(--ink-600);   /* secondary text */
  --fg-3: var(--ink-400);   /* muted / placeholder */
  --fg-inverse: #ffffff;
  --bg-1: var(--bg-base);
  --bg-2: var(--bg-cream);
  --bg-card: var(--bg-surface);
  --bg-card-tint: var(--bg-surface-tint);
  --accent: var(--rose-600);
  --accent-hover: var(--rose-500);
  --accent-pressed: var(--rose-400);
  --link: var(--rose-600);

  /* GRADIENTS — capsule and protection */
  --grad-rose: linear-gradient(135deg, var(--rose-600) 0%, var(--rose-500) 100%);
  --grad-rose-vivid: linear-gradient(135deg, #cd6a40 0%, var(--rose-600) 100%);
  --grad-cream: linear-gradient(180deg, #ffffff 0%, var(--bg-base) 100%);
  --grad-clinical: linear-gradient(180deg, #ffffff 0%, #edf2f7 100%);
  --grad-text: linear-gradient(120deg, var(--novis-600) 0%, var(--rose-500) 55%, #38bdf8 100%);
}

/* ============================================================
   ELEMENT BASE STYLES — apply tokens to raw HTML so any
   tagged element renders on-brand without extra classes.
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: 16px;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — Korean-aware tracking */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-800);
  margin: 0;
}
h2, .h2 {
  font-size: 1.48rem;
  font-weight: 900;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-800);
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-800);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-800);
  margin: 0;
}
p, .p {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0;
}

/* Editorial display — for big serif hero on promotional pages */
.display-serif {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* Uppercase eyebrow / kicker */
.eyebrow {
  font-family: var(--font-numeric);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-400);
}

/* Small caption */
.caption, small {
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

/* Numeric / data */
.num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--rose-500);
}

/* Focus ring (consistent across inputs/buttons/links) */
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Selection */
::selection {
  background: var(--rose-200);
  color: var(--rose-900);
}