/* -------------------------------------------------------------
   tomrankin.net - design tokens (desert - SW - DC-17 - LOCKED)
   Shared brand-family skeleton, own palette. See:
   specs/design/brand-family.md + specs/design/tomrankin-homepage.md
   ------------------------------------------------------------- */

:root {
  /* Palette -- LOCKED (founder, 2026-07-01) */
  --color-bg-primary:   #FAF6EF;  /* Sandstone paper */
  --color-bg-secondary: #EFE3D2;  /* Adobe */
  --color-dark:         #8A4B2F;  /* Canyon Clay -- mark + dark sections */
  --color-text-body:    #33261D;  /* Umber */
  --color-accent:       #C2562E;  /* Sunset -- LARGE text / accents only (4.19:1 on paper) */
  --color-support:      #8A9A6B;  /* Sage -- on dark umber only (4.89:1); decorative on paper */

  /* Semantic surface aliases */
  --surface-paper:  var(--color-bg-primary);
  --surface-adobe:  var(--color-bg-secondary);
  --surface-canyon: var(--color-dark);

  --ink-strong: var(--color-text-body);
  --ink-soft:   #5A4534;                 /* softer umber for meta text (still >= 6.5:1 on paper) */
  --ink-invert: var(--color-bg-primary); /* paper-on-dark */

  --rule: rgba(51, 38, 29, 0.18);        /* subtle border in umber alpha */
  --rule-strong: rgba(51, 38, 29, 0.35);

  /* Raw-literal captures: exact hex/rgba pulled out of main.css so all
     colors are authored here and consumed via var(). Zero visual change --
     each value equals the literal it replaced. */
  --sunset-hover:      #a94520;                 /* dark-section .btn:hover */
  --umber-a14:         rgba(51, 38, 29, 0.14);  /* hero vignette */
  --sunset-a35:        rgba(194, 86, 46, 0.35); /* dark-section glow */
  --paper-a35:         rgba(250, 246, 239, 0.35); /* book-title text-shadow */
  --paper-a50:         rgba(250, 246, 239, 0.5);  /* dark-section link underline */
  --paper-a22:         rgba(250, 246, 239, 0.22); /* build-steps rules */
  --paper-a08:         rgba(250, 246, 239, 0.08); /* dark-section btn-secondary:hover */

  /* Type family stacks -- Lora (editorial body/wordmark) + Inter (UI/kicker).
     Rule 1.6: system-ui or >=3 platform fonts. */
  --font-serif: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino,
                "URW Palladio L", Georgia, "Times New Roman", Times, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Consolas,
                "Liberation Mono", Menlo, monospace;

  /* Type scale -- fluid, all with max >= 2x min (rule 1.7).
     Modular ratio 1.25 (minor third) preserved at every viewport (rule 1.4). */
  --step-h6: 1rem;
  --step-h5: clamp(1.025rem, 0.41rem + 2.05vw, 2.05rem);   /* 16.4 -> 32.8 */
  --step-h4: clamp(1.28rem,  0.51rem + 2.56vw, 2.56rem);   /* 20.5 -> 41   */
  --step-h3: clamp(1.6rem,   0.64rem + 3.2vw,  3.2rem);    /* 25.6 -> 51.2 */
  --step-h2: clamp(2rem,     0.8rem  + 4vw,    4rem);      /* 32 -> 64     */
  --step-h1: clamp(2.5rem,   1rem    + 5vw,    5rem);      /* 40 -> 80     */

  --step-body:  1rem;              /* 16px min (rule 1.3) */
  --step-lede:  1.125rem;          /* 18px */
  --step-meta:  0.875rem;          /* 14px -- never for prose */

  /* Line height (rule 1.2): body 1.4-1.6, headings 1.1-1.3 */
  --leading-body:     1.6;
  --leading-lede:     1.45;
  --leading-heading:  1.15;
  --leading-tight:    1.1;

  /* Tracking: body=0; caps letterspaced +5-10% (rule TYP-TRACKING) */
  --track-body:  0;
  --track-caps:  0.14em;
  --track-mark:  0.02em;

  /* Measure -- body max-width in ch (rule 2.4) */
  --measure-body:  65ch;
  --measure-lede:  36ch;
  --measure-narrow: 48ch;

  /* Spacing scale -- fluid, in rem multiples */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.375rem);
  --space-2xs: clamp(0.5rem,  0.48rem + 0.1vw,  0.625rem);
  --space-xs:  clamp(0.75rem, 0.7rem  + 0.25vw, 1rem);
  --space-s:   clamp(1rem,    0.94rem + 0.3vw,  1.25rem);
  --space-m:   clamp(1.5rem,  1.4rem  + 0.5vw,  2rem);
  --space-l:   clamp(2.25rem, 2rem    + 1.25vw, 3.5rem);
  --space-xl:  clamp(3.5rem,  3rem    + 2.5vw,  6rem);
  --space-2xl: clamp(5rem,    4rem    + 5vw,   10rem);

  /* Radius + rules */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --border-thin:  1px;
  --border-thick: 2px;

  /* Focus ring -- one ring everywhere (width x style x color). Offsets stay
     local (buttons hug tighter than links) but the ring itself never varies. */
  --focus-ring: 3px solid var(--color-accent);

  /* Section-header kicker column -- fixed width so every section title
     starts at the same x down the page (the auto column made each section's
     content column start wherever its roman-numeral label happened to end). */
  --kicker-col: 12.5rem;

  /* Layout containers (rule 2.1: fluid widths, no fixed px) */
  --content-max: 76rem;      /* ~1216px page canvas */
  --page-gutter: clamp(1rem, 4vw, 3rem);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;

  /* Elevation -- softer, more editorial than card-y drop shadows */
  --shadow-cover: 0 12px 30px -12px rgba(51, 38, 29, 0.28);
  --shadow-lift:  0 22px 48px -16px rgba(51, 38, 29, 0.34);  /* hover elevation */
  --shadow-flat:  0 1px 0 rgba(51, 38, 29, 0.08);

  /* Scan stage (Saguaro Splat viewer) -- near-black void matching the
     WebGL clear color set in assets/saguaros/scan-viewer.js, plus a
     scrim for the loading badge over the render. */
  --scan-void:  #0A0806;
  --scan-scrim: rgba(10, 8, 6, 0.72);
}