/* ===========================================================================
   AnroMark — design tokens (Claude Style UI)
   ---------------------------------------------------------------------------
   Warm cream canvas, coral accent, warm near-black depth. Serif display voice,
   sans body. Depth comes from the cream<->dark surface ladder and 1px hairlines,
   not from heavy shadows.

   Source of truth for every colour, type step, space and radius on this site.
   Never hard-code a hex that exists here.

   Theme: `data-theme="dark"` on <html> forces dark, `data-theme="light"` forces
   light, no attribute follows the OS. The pages ship with data-theme="light"
   so today's behaviour is unchanged; flipping the attribute re-resolves every
   surface with no second stylesheet.
   =========================================================================== */

:root {
  /* ---- Type families ---------------------------------------------------- */
  /* Latin display falls to Georgia, which ships on Windows and macOS, so no
     webfont is added and the "no third-party requests" rule in fonts.css
     still holds. CJK has no Latin serif coverage, so it falls through to
     Noto Serif TC / Songti TC and finally the system serif. */
  --font-serif: 'Tiempos Headline', 'Copernicus', Georgia, 'Times New Roman',
                'Noto Serif TC', 'Source Han Serif TC', 'Songti TC', serif;
  --font-sans:  'Inter', -apple-system, system-ui, 'Segoe UI',
                'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Type scale (font shorthand: weight size/line family) --------------
     Display is ALWAYS serif weight 400 — never bold. Pair with --tracking-*. */
  --font-display-xl: 400 64px/1.05 var(--font-serif);
  --font-display-lg: 400 48px/1.10 var(--font-serif);
  --font-display-md: 400 36px/1.15 var(--font-serif);
  --font-display-sm: 400 28px/1.20 var(--font-serif);
  --font-title-lg:   500 22px/1.30 var(--font-sans);
  --font-title-md:   500 18px/1.40 var(--font-sans);
  --font-title-sm:   500 16px/1.40 var(--font-sans);
  --font-body-md:    400 16px/1.55 var(--font-sans);
  --font-body-sm:    400 14px/1.55 var(--font-sans);
  --font-caption:    500 13px/1.40 var(--font-sans);
  --font-button:     500 14px/1.00 var(--font-sans);
  --font-code:       400 14px/1.60 var(--font-mono);

  --tracking-display-xl: -1.5px;
  --tracking-display-lg: -1px;
  --tracking-display-md: -0.5px;
  --tracking-display-sm: -0.3px;
  --tracking-caption-upper: 1.5px;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* buttons, inputs */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;  /* hero / large surfaces */
  --radius-pill: 9999px;

  /* ---- Elevation (rare; prefer surface + hairline) ----------------------- */
  --shadow-card:  0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-hover: 0 1px 3px rgba(20, 20, 19, 0.08);
  --shadow-modal: 0 8px 32px -8px rgba(20, 20, 19, 0.18);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 180ms;

  /* ======================= LIGHT theme (default) ========================== */
  --canvas:    #faf9f5;
  --surface:   #f5f0e8;
  --surface-2: #efe9de;
  --surface-3: #e8e0d2;

  --ink:         #141413;
  --text-strong: #252523;
  --text:        #3d3d3a;
  --muted:       #5e5c56;
  --muted-soft:  #66645e;
  --on-primary:  #ffffff;

  --primary:          #cc785c;
  --primary-active:   #a9583e;
    --primary-strong:  #a9583e;
  --primary-disabled: #e6dfd8;
  --accent-teal:      #5db8a6;
  --accent-teal-deep: #3f8577;   /* second teal step, charts only */
  --accent-amber:     #e8a55a;

  --hairline:      #e6dfd8;
  --hairline-soft: #ebe6df;

  --success: #5db872;
  --warning: #d4a017;
  --error:   #c64545;

    --success-text: #386e44;
    --warning-text: #7d5e0e;
    --error-text:   #ac3c3c;
    --amber-text:   #805b31;

  --focus-ring-color: rgba(204, 120, 92, 0.30);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);
  --scrim: rgba(20, 20, 19, 0.38);

  /* Text-safe pairs. The fill tokens above are the brand values; these are the
     same hues darkened until they clear WCAG AA (4.5:1) as TEXT on the deepest
     cream surface (--surface-3). Use the fill token for bars, borders and
     icons; use the -strong / -text token whenever the colour carries type. */

  color-scheme: light;
}

[data-theme="light"] {
  --canvas:    #faf9f5;
  --surface:   #f5f0e8;
  --surface-2: #efe9de;
  --surface-3: #e8e0d2;

  --ink:         #141413;
  --text-strong: #252523;
  --text:        #3d3d3a;
  --muted:       #5e5c56;
  --muted-soft:  #66645e;
  --on-primary:  #ffffff;

  --primary:          #cc785c;
  --primary-active:   #a9583e;
    --primary-strong:  #a9583e;
  --primary-disabled: #e6dfd8;
  --accent-teal:      #5db8a6;
  --accent-teal-deep: #3f8577;   /* second teal step, charts only */
  --accent-amber:     #e8a55a;

  --hairline:      #e6dfd8;
  --hairline-soft: #ebe6df;

  --success: #5db872;
  --warning: #d4a017;
  --error:   #c64545;

    --success-text: #386e44;
    --warning-text: #7d5e0e;
    --error-text:   #ac3c3c;
    --amber-text:   #805b31;

  --focus-ring-color: rgba(204, 120, 92, 0.30);
  --scrim: rgba(20, 20, 19, 0.38);

  --shadow-card:  0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-hover: 0 1px 3px rgba(20, 20, 19, 0.08);
  --shadow-modal: 0 8px 32px -8px rgba(20, 20, 19, 0.18);

  color-scheme: light;
}

[data-theme="dark"] {
  --canvas:    #181715;
  --surface:   #1f1e1b;
  --surface-2: #252320;
  --surface-3: #2d2a26;

  --ink:         #faf9f5;
  --text-strong: #ece8e0;
  --text:        #cfcabf;
  --muted:       #a09d96;
  --muted-soft:  #95928a;
  --on-primary:  #181715;

  --primary:          #d68a6f;
  --primary-active:   #cc785c;
    --primary-strong:  #d68a6f;
  --primary-disabled: #4a423d;
  --accent-teal:      #6cc3b1;
  --accent-teal-deep: #4f9e8e;   /* second teal step, charts only */
  --accent-amber:     #e8a55a;

  --hairline:      rgba(255, 255, 255, 0.10);
  --hairline-soft: rgba(255, 255, 255, 0.06);

  --success: #6cc385;
  --warning: #e0b53f;
  --error:   #d56b6b;

    --success-text: var(--success);
    --warning-text: var(--warning);
    --error-text:   var(--error);
    --amber-text:   var(--accent-amber);

  --focus-ring-color: rgba(214, 138, 111, 0.40);
  --scrim: rgba(0, 0, 0, 0.60);

  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-modal: 0 8px 32px -8px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:    #181715;
    --surface:   #1f1e1b;
    --surface-2: #252320;
    --surface-3: #2d2a26;

    --ink:         #faf9f5;
    --text-strong: #ece8e0;
    --text:        #cfcabf;
    --muted:       #a09d96;
    --muted-soft:  #95928a;
    --on-primary:  #181715;

    --primary:          #d68a6f;
    --primary-active:   #cc785c;
    --primary-strong:  #d68a6f;
    --primary-disabled: #4a423d;
    --accent-teal:      #6cc3b1;
    --accent-teal-deep: #4f9e8e;   /* second teal step, charts only */
    --accent-amber:     #e8a55a;

    --hairline:      rgba(255, 255, 255, 0.10);
    --hairline-soft: rgba(255, 255, 255, 0.06);

    --success: #6cc385;
    --warning: #e0b53f;
    --error:   #d56b6b;

    --success-text: var(--success);
    --warning-text: var(--warning);
    --error-text:   var(--error);
    --amber-text:   var(--accent-amber);

    --focus-ring-color: rgba(214, 138, 111, 0.40);
    --scrim: rgba(0, 0, 0, 0.60);

    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-modal: 0 8px 32px -8px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}