/**
 * Studio Silkfold: design tokens. Warm paper ground, carbon ink, natural timber tones.
 * The one place where colours, fonts, sizes, corners and shadows are defined; every other
 * stylesheet uses them through var(). BRAND_GUIDELINES.md section 5 says what each is for.
 *
 * Light is the default. Dark applies when the system asks for it, or when the visitor chose it
 * with the toggle (data-theme on <html>, set by shared/theme-init.js and shared/prefs.js). The
 * dark values therefore stand twice, once per case: keep the two blocks identical (the build
 * checks it).
 *
 * Breakpoints in use (a media query cannot read a token):
 *   600px             phones, on the landing page
 *   860px             the designer's panel moves below the canvas
 *   1200px × 750px    large screens
 *   1600px × 850px    very large screens
 */

:root {
  /* Native controls, scrollbars and autofill follow the theme */
  color-scheme: light;

  /* Ground (light: paper and sun) */
  --bg: #f8f5ee;
  --bg-sun: #ffffff;
  --bg-shadow: #eae2d0;
  /* Colour of the mobile browser bar; every page's top edge starts in it */
  --bg-edge: #f2ede1;
  --panel: rgba(253, 251, 247, 0.88);
  --surface: #fdfbf7;
  --card-bg: rgba(255, 255, 255, 0.65);
  --highlight: #f1ede4;

  /* Text (light: carbon ink) */
  --text: #1c1917;
  --muted: #57534e;
  --text-faint: #78716c;

  /* Timber */
  --timber: #c9baa6;
  --timber-light: #e8dfd1;
  --slat: rgba(140, 115, 85, 0.28);
  --slat-shadow: rgba(217, 196, 168, 0.25);

  /* Solid buttons: ink, with the ground as their text */
  --accent: #1c1917;
  --accent-contrast: #f8f5ee;

  /* Lines */
  --border: rgba(196, 172, 142, 0.35);
  --card-border: rgba(200, 185, 165, 0.3);
  --slider-track: rgba(28, 25, 23, 0.16);
  --slider-thumb: #1c1917;
  --slider-halo: rgba(28, 25, 23, 0.08);

  /* Messages. Each reads at 4.5:1 or better on the ground of its theme. */
  --success: #15803d;
  --success-soft: rgba(21, 128, 61, 0.08);
  --success-line: rgba(21, 128, 61, 0.25);
  --warning: #b45309;
  --danger: #b91c1c;

  /* The dimmed page behind a dialog */
  --overlay: rgba(28, 25, 23, 0.45);

  /* Shadows, by what casts them */
  --shadow-card: 0 2px 8px rgba(28, 25, 23, 0.02);
  --shadow-soft: 0 4px 16px rgba(28, 25, 23, 0.04), 0 2px 6px rgba(28, 25, 23, 0.02);
  --shadow-button: 0 2px 8px rgba(28, 25, 23, 0.12);
  --shadow-button-hover: 0 6px 18px rgba(28, 25, 23, 0.18);
  --shadow-knob: 0 1px 4px rgba(28, 25, 23, 0.25);
  --shadow-elevated: 0 16px 36px rgba(28, 25, 23, 0.08), 0 4px 12px rgba(28, 25, 23, 0.04);
  --shadow-sheet: 0 -8px 32px rgba(28, 25, 23, 0.08);

  /* Fonts. Cormorant from 20px up (wordmark, slogan, titles); EB Garamond for smaller serif text */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-serif-text: "EB Garamond", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale. 12px is the floor: nothing smaller is readable.
     --fs-note is the hint/footer size and grows on large screens; --fs-title is a page title. */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-note: 16px;
  --fs-title: clamp(2rem, 4vw, 2.6rem);

  /* Corners: controls, cards, dialogs and sheets, pills */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
}

@media (min-width: 1200px) and (min-height: 750px) {
  :root { --fs-note: 17px; }
}

@media (min-width: 1600px) and (min-height: 850px) {
  :root { --fs-note: 18px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Ground (dark: charcoal) */
    --bg: #1a1816;
    --bg-sun: #292724;
    --bg-shadow: #100f0d;
    --bg-edge: #161412;
    --panel: rgba(26, 24, 22, 0.90);
    --surface: #1f1d1a;
    --card-bg: rgba(38, 35, 32, 0.65);
    --highlight: #2c2925;

    /* Text (dark: soft paper white) */
    --text: #f5f0e6;
    --muted: #b8b0a2;
    --text-faint: #a8a29e;

    /* Timber */
    --timber: #5a5043;
    --timber-light: #3d362d;
    --slat: rgba(90, 80, 67, 0.45);
    --slat-shadow: rgba(16, 15, 13, 0.5);

    /* Solid buttons */
    --accent: #f5f0e6;
    --accent-contrast: #1a1816;

    /* Lines */
    --border: rgba(90, 80, 67, 0.4);
    --card-border: rgba(90, 80, 67, 0.3);
    --slider-track: rgba(245, 240, 230, 0.2);
    --slider-thumb: #f5f0e6;
    --slider-halo: rgba(245, 240, 230, 0.12);

    /* Messages */
    --success: #6fcf97;
    --success-soft: rgba(111, 207, 151, 0.1);
    --success-line: rgba(111, 207, 151, 0.3);
    --warning: #e5a54b;
    --danger: #f87171;

    --overlay: rgba(0, 0, 0, 0.6);

    /* Shadows */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.18);
    --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
    --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-button-hover: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-knob: 0 1px 4px rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 12px 36px -4px rgba(0, 0, 0, 0.5);
    --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.4);
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Ground (dark: charcoal) */
  --bg: #1a1816;
  --bg-sun: #292724;
  --bg-shadow: #100f0d;
  --bg-edge: #161412;
  --panel: rgba(26, 24, 22, 0.90);
  --surface: #1f1d1a;
  --card-bg: rgba(38, 35, 32, 0.65);
  --highlight: #2c2925;

  /* Text (dark: soft paper white) */
  --text: #f5f0e6;
  --muted: #b8b0a2;
  --text-faint: #a8a29e;

  /* Timber */
  --timber: #5a5043;
  --timber-light: #3d362d;
  --slat: rgba(90, 80, 67, 0.45);
  --slat-shadow: rgba(16, 15, 13, 0.5);

  /* Solid buttons */
  --accent: #f5f0e6;
  --accent-contrast: #1a1816;

  /* Lines */
  --border: rgba(90, 80, 67, 0.4);
  --card-border: rgba(90, 80, 67, 0.3);
  --slider-track: rgba(245, 240, 230, 0.2);
  --slider-thumb: #f5f0e6;
  --slider-halo: rgba(245, 240, 230, 0.12);

  /* Messages */
  --success: #6fcf97;
  --success-soft: rgba(111, 207, 151, 0.1);
  --success-line: rgba(111, 207, 151, 0.3);
  --warning: #e5a54b;
  --danger: #f87171;

  --overlay: rgba(0, 0, 0, 0.6);

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
  --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-button-hover: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-knob: 0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 12px 36px -4px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.4);
}