/*
 * 문어도사 design tokens. Every color, size, space and corner on the site comes from here;
 * page styles never write a raw value that a token covers. Guide: DESIGN-SYSTEM.md.
 * The character (character.js) sets --char-* at runtime; these are the 문어도사 defaults.
 */
:root {
  /* Character colors, overwritten by the active character */
  --char-primary: #c8402c;
  --char-accent: #7a2e22;
  --char-ink: #33211c;
  --char-background: #f4e6cc;

  /* Color: surfaces and text */
  --color-page: #fff;
  --color-soft: #fffaf1;          /* cards, inputs, list rows */
  --color-line: #eadcc4;          /* borders, dividers */
  --color-ink: var(--char-ink);   /* body text */
  --color-muted: #7a6a62;         /* secondary text */
  --color-faint: rgba(51, 33, 28, .55);
  --color-brand: var(--char-primary);
  --color-brand-deep: var(--char-accent);
  --color-brand-tint: #fdeee9;    /* selected chip, notice background */
  --color-button: #453330;        /* primary button */
  --color-on-dark: #fff;
  --color-scrim: rgba(30, 20, 16, .4);
  --color-toast: rgba(51, 33, 28, .92);
  --color-track: #efe5d6;          /* empty bar, empty glyph */
  --color-divider: rgba(51, 33, 28, .12);
  --color-hover: rgba(200, 64, 44, .06);
  --color-grid: rgba(51, 33, 28, .08);   /* chart grid lines */

  /* Color: 인생 지도 highlights */
  --peak-fill: rgba(226, 170, 60, .18);  --peak-badge: rgba(226, 170, 60, .25);  --peak-ink: #7a5410;
  --rest-fill: rgba(52, 88, 143, .1);    --rest-badge: rgba(52, 88, 143, .14);

  /* Color: login providers (their own brand colors, never changed) */
  --kakao: #fee500; --kakao-ink: rgba(0, 0, 0, .85);
  --naver: #03c75a;

  /* Color: five elements, used for 명식 glyphs and charts */
  --wood: #3f8f5a;
  --fire: #d0473a;
  --earth: #b8892f;
  --metal: #8a8f99;
  --water: #34588f;

  /* Color: home hero, shown under the art while it loads */
  --hero-fallback: linear-gradient(180deg, #cfe3e6 0%, #e9e2cf 55%, #f1dcc4 100%);

  /* Color: home feature cards (top → bottom of the gradient, then the icon glow) */
  --feature-today: #f4e6cc;  --feature-today-end: #efdcc1;  --feature-today-glow: rgba(222, 170, 100, .3);
  --feature-map: #daf5ef;    --feature-map-end: #d3f1ea;    --feature-map-glow: rgba(110, 195, 175, .35);
  --feature-compat: #f5e3f2; --feature-compat-end: #f4e0f0; --feature-compat-glow: rgba(215, 140, 200, .3);

  /* Type */
  --font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --text-display: 24px;   --leading-display: 30px;   /* home greeting */
  --text-title-1: 22px;                              /* result name */
  --text-title-2: 20px;   --leading-title-2: 28px;   /* home card title */
  --text-title-3: 17px;                              /* header title, brand, section heading */
  --text-body: 16px;      --leading-body: 1.6;       /* body, buttons */
  --text-body-sm: 15px;                              /* long reading, toast */
  --text-caption: 14px;                              /* secondary lines */
  --text-footnote: 13px;                             /* notes, fine print */
  --text-micro: 12px;                                /* badges, chart labels */
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;

  /* Space (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Corners */
  --radius-sm: 10px;     /* buttons */
  --radius-md: 12px;     /* inputs, chips in rows */
  --radius-lg: 16px;     /* cards */
  --radius-xl: 20px;     /* hero, speech bubbles */
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 10px 30px rgba(120, 80, 40, .05);
  --shadow-panel: -8px 0 32px rgba(0, 0, 0, .12);

  /* Layout */
  --page-max: 480px;
  --gutter: 20px;          /* left and right page padding */
  --header-height: 56px;   /* every screen, home included */
  --tap: 40px;             /* icon buttons */
  --control-height: 52px;  /* inputs, secondary buttons */
  --button-height: 56px;   /* primary buttons */
  --icon: 24px;

  /* Motion */
  --duration: .2s;
}