/* ==========================================================================
   Frostline Turf Co. — Design Tokens
   Geology / aggregate / strata inspired. Premium, restrained, engineering-aware.
   Two themes via [data-theme="light" | "dark"]. Default resolves from OS.
   ========================================================================== */

:root {
  /* --- Type scale (1.200 minor third) --------------------------------- */
  --step--1: clamp(0.83rem, 0.80rem + 0.13vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.33vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.31rem + 0.60vw, 1.90rem);
  --step-3:  clamp(1.73rem, 1.51rem + 1.00vw, 2.50rem);
  --step-4:  clamp(2.07rem, 1.72rem + 1.60vw, 3.30rem);
  --step-5:  clamp(2.49rem, 1.95rem + 2.50vw, 4.35rem);

  /* --- Font families --------------------------------------------------- */
  /* Body: humanist sans. Display: editorial serif (premium, less generic).
     Mono: technical specs / measurements. */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               Georgia, ui-serif, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono",
               "Segoe UI Mono", Menlo, Consolas, monospace;

  /* --- Spacing (8px base) ---------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* --- Structure ------------------------------------------------------- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --maxw:      1180px;
  --maxw-prose: 68ch;
  --border-w:  1px;

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Brand hues (theme-independent seeds) ---------------------------- */
  --spruce-900: #10281D;
  --spruce-800: #163422;
  --spruce-700: #1E4530;
  --spruce-600: #285B40;
  --spruce-500: #327052;
  --spruce-400: #4E9E77;
  --spruce-300: #7ABF9C;

  --frost-600: #2E6B7D;
  --frost-500: #3E8298;
  --frost-400: #5CA3B8;
  --frost-300: #8FC4D4;

  --aggregate-700: #7A6A57;
  --aggregate-500: #A8917A;
  --aggregate-300: #CBBBA6;

  --amber-500: #B26B2E;
  --amber-400: #D08A45;
  --clay-500:  #A5462F;
}

/* ============================ LIGHT ================================= */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:          #F4F1EB;   /* limestone paper */
  --bg-sunk:     #EBE7DE;
  --surface:     #FBFAF6;
  --surface-2:   #FFFFFF;
  --surface-raised: #FFFFFF;

  --ink:         #171A17;   /* graphite green-black */
  --ink-soft:    #3C4340;
  --muted:       #5E655F;
  --faint:       #8A8F87;

  --border:      #E0DBD0;
  --border-strong: #CBC4B4;
  --hairline:    #ECE8DE;

  --primary:     var(--spruce-600);
  --primary-ink: var(--spruce-800);
  --primary-hover: var(--spruce-700);
  --on-primary:  #F7FBF8;

  --frost:       var(--frost-600);
  --frost-soft:  #E4EEF1;

  --accent-earth: var(--aggregate-700);
  --earth-soft:  #EFE9DF;

  --warn:        var(--amber-500);
  --warn-soft:   #F6ECDD;
  --danger:      var(--clay-500);
  --danger-soft: #F4E4DF;
  --good:        var(--spruce-600);
  --good-soft:   #E4EFE8;

  --shadow-sm: 0 1px 2px rgba(23, 26, 23, 0.06), 0 1px 1px rgba(23, 26, 23, 0.04);
  --shadow:    0 4px 14px rgba(23, 26, 23, 0.07), 0 2px 4px rgba(23, 26, 23, 0.05);
  --shadow-lg: 0 18px 46px rgba(23, 26, 23, 0.12), 0 6px 14px rgba(23, 26, 23, 0.06);

  --strata-a: #EFE9DF;
  --strata-b: #E6E9E2;
  --strata-c: #DFE7E4;
}

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

  --bg:          #101310;
  --bg-sunk:     #0B0D0B;
  --surface:     #171B17;
  --surface-2:   #1D221D;
  --surface-raised: #20261F;

  --ink:         #ECEAE1;
  --ink-soft:    #CFD2C8;
  --muted:       #9CA398;
  --faint:       #6E756A;

  --border:      #2A302A;
  --border-strong: #3A423A;
  --hairline:    #21261F;

  --primary:     var(--spruce-400);
  --primary-ink: var(--spruce-300);
  --primary-hover: var(--spruce-300);
  --on-primary:  #0C1A12;

  --frost:       var(--frost-400);
  --frost-soft:  #16292F;

  --accent-earth: var(--aggregate-300);
  --earth-soft:  #221D15;

  --warn:        var(--amber-400);
  --warn-soft:   #2A2013;
  --danger:      #D9694E;
  --danger-soft: #2C1712;
  --good:        var(--spruce-400);
  --good-soft:   #142219;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 22px 54px rgba(0, 0, 0, 0.6);

  --strata-a: #1A1E17;
  --strata-b: #171D1C;
  --strata-c: #14201C;
}

/* Auto dark when user has no explicit preference set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:#101310; --bg-sunk:#0B0D0B; --surface:#171B17; --surface-2:#1D221D;
    --surface-raised:#20261F; --ink:#ECEAE1; --ink-soft:#CFD2C8; --muted:#9CA398;
    --faint:#6E756A; --border:#2A302A; --border-strong:#3A423A; --hairline:#21261F;
    --primary:#4E9E77; --primary-ink:#7ABF9C; --primary-hover:#7ABF9C; --on-primary:#0C1A12;
    --frost:#5CA3B8; --frost-soft:#16292F; --accent-earth:#CBBBA6; --earth-soft:#221D15;
    --warn:#D08A45; --warn-soft:#2A2013; --danger:#D9694E; --danger-soft:#2C1712;
    --good:#4E9E77; --good-soft:#142219;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 6px 20px rgba(0,0,0,.45);
    --shadow-lg:0 22px 54px rgba(0,0,0,.6);
    --strata-a:#1A1E17; --strata-b:#171D1C; --strata-c:#14201C;
  }
}