/* ============================================================
   Tyko Tech, Circuit Grove design tokens (canonical)
   Source of truth: design-system/DESIGN.md, materialized from
   deliverable_direction-04.md (approved direction 04).
   Every visual value used by site.css lives here. Do not put
   raw colors, radii, spacing, or durations anywhere else.

   Theme pattern (owner decision, revision 8): LIGHT IS THE DEFAULT.
   1. Bare :root defines the complete LIGHT palette, so every
      visitor lands in the daylight grove regardless of what their
      operating system prefers. The header control offers the
      alternative.
   2. :root[data-theme="dark"] redefines only tokens, and applies
      only when the visitor asks for dark through that control.
   There is no prefers-color-scheme branch on purpose. Do not add
   one back without changing this comment: it would reintroduce a
   third state and silently override the chosen default.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Color, light theme, the DEFAULT (the daylight grove) ---- */
  --color-bg-base: #F4F6EE;        /* sage-ivory page ground */
  --color-bg-raised: #FFFFFF;      /* raised band and header surface */
  --color-border: #DCE2D2;         /* soft hairlines, card edges */
  --color-border-strong: #6E7F73;  /* input borders, secondary button outline (3:1 non-text) */
  --color-text-primary: #1E2B21;   /* headlines and body */
  --color-text-secondary: #53645A; /* ledes, captions, meta */
  --color-accent: #2F5D3F;         /* deep grove green: the single light-theme accent */
  --color-accent-hover: #264D33;
  --color-on-accent: #FFFFFF;      /* text on accent fills */
  --color-rule-gold: #C9AC55;      /* logo artwork only; the footer hairline
                                      it once drew was removed in revision 8 */
  --color-success: #256D2F;        /* form success state (functional, not an accent) */
  --color-error: #963226;          /* form error state (functional, not an accent) */
  --shadow-soft: 0 12px 32px rgba(30, 43, 33, 0.12); /* tinted to the grove, never pure black */

  /* Photography overlays: identical in both themes because they sit
     on photographs, not on theme surfaces. The scrim deepens toward
     the bottom so overlaid type reads on any image. */
  --photo-scrim: linear-gradient(180deg, rgba(13, 21, 18, 0) 45%, rgba(13, 21, 18, 0.82) 100%);
  /* Side scrim for wide panels that carry a block of type in the
     frame's calm half. Deep enough at the type end that on-photo
     text clears AA against any photograph in the library. */
  --photo-scrim-left: linear-gradient(90deg, rgba(13, 21, 18, 0.94) 0%, rgba(13, 21, 18, 0.86) 38%, rgba(13, 21, 18, 0.42) 72%, rgba(13, 21, 18, 0.2) 100%);
  --color-on-photo: #F4F6EE;       /* type over photographs, always on the scrim */

  /* The quote plate lays type on the stone tablet photograph.
     Unlike the two scrims above it is theme-toned, not fixed dark:
     it veils the stone with the page's own ground so the panel can
     use the ordinary text tokens and keep their measured contrast.
     Held deliberately heavy so the stone reads as a whisper of
     grain rather than as a picture. */
  --quote-plate-scrim: rgba(244, 246, 238, 0.92);

  /* ---- Type ---- */
  --font-display: 'Sora', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;

  --text-display-xl: clamp(2.6rem, 5.4vw, 4rem);    /* Sora 600 */
  --text-display-l: clamp(1.9rem, 3.6vw, 2.75rem);  /* Sora 600 */
  --text-display-m: clamp(1.4rem, 2.4vw, 1.9rem);   /* Sora 500 */
  --text-h1: clamp(2.2rem, 4vw, 2.75rem);           /* hero H1, Sora 600 */
  --text-section: clamp(1.6rem, 2.6vw, 2.1rem);     /* section titles, Sora 600 */
  --text-title: 1.3rem;                             /* card and prose H3 titles */
  --text-title-sm: 1.15rem;                         /* compact card titles */
  --text-body-lg: 1.125rem;                         /* hero sub, ledes */
  --text-body: 1.0625rem;                           /* Lora body */
  --text-ui: 0.95rem;                               /* buttons, nav */
  --text-ui-sm: 0.85rem;                            /* meta, badges, footer chrome */
  --text-caption: 0.8125rem;                        /* captions, hints, errors */

  --leading-display: 1.05;
  --leading-heading: 1.12;
  --leading-subhead: 1.25;
  --leading-ui: 1.4;
  --leading-body: 1.7;

  --tracking-display: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-snug: -0.01em;

  /* ---- Spacing scale: 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ---- Radius: one 14px system for every component ---- */
  --radius: 14px;
  /* The section band's asymmetric top curve is a layout-transition
     device, not a component radius (approved: 44px / 14px). */
  --band-curve: 44px 14px 0 0;

  /* ---- Sizes and strokes ---- */
  --wrap-max: 1160px;       /* page container */
  --control-height: 48px;   /* buttons, inputs */
  --badge-height: 28px;
  --touch-target: 44px;     /* minimum interactive hit size */
  --hairline: 1px;          /* borders and rules */
  --rule-weight: 2px;       /* current-nav underline */
  --accent-rule: 3px;       /* blockquote / rationale left rule */
  --focus-width: 2px;
  --focus-offset: 2px;
  --underline-offset: 3px;
  --measure-lede: 58ch;
  --measure-body: 68ch;
  --measure-sub: 46ch;
  --measure-field: 26rem;
  --disabled-opacity: 0.45;

  /* ---- Motion ---- */
  --ease-organic: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;   /* active press */
  --duration-base: 200ms;   /* hovers, theme-sensitive transitions */
  --duration-fade: 400ms;   /* quote cross-fade, each half of it */
  --duration-slow: 700ms;   /* reveal entrance */
  --reveal-shift: 18px;     /* reveal travel distance */
  --lift: 3px;              /* card hover lift */
  --press: 1px;             /* button active press */

  /* ---- Breakpoints (informational: custom properties cannot be
     used inside media queries; site.css uses these raw values) ----
     --bp-tablet: 880px;  layout collapse, nav condenses
     --bp-mobile: 560px;  single-column chrome                      */
}

/* Dark theme (the grove at dusk), reached only by asking for it
   through the header control. Redefines tokens only. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-base: #0D1512;        /* deep forest floor, page ground */
  --color-bg-raised: #142019;
  --color-border: #24352B;
  --color-border-strong: #58705F;
  --color-text-primary: #E9F0E6;
  --color-text-secondary: #A3B5A8;
  --color-accent: #CFAE49;         /* living gold: the dark-theme accent */
  --color-accent-hover: #E0C368;
  --color-on-accent: #1B160A;
  --color-rule-gold: rgba(207, 174, 73, 0.5);
  --color-success: #82C98D;
  --color-error: #E5967F;
  --shadow-soft: 0 12px 32px rgba(4, 10, 7, 0.55);
  --quote-plate-scrim: rgba(13, 21, 18, 0.9);
}

/* An explicit light choice needs no palette of its own: data-theme
   holds one value, so choosing light simply stops the dark block
   above from matching and the default palette stands. This block
   exists so that the attribute is always a complete statement of
   the rendered theme, which is what theme.js reads back. */
:root[data-theme="light"] {
  color-scheme: light;
}

/* The band curve softens with the viewport. */
@media (max-width: 880px) {
  :root {
    --band-curve: 28px 10px 0 0;
  }
}