/* ============================================================================
   VÄDER — colors_and_type.css
   Foundational design tokens: fonts, raw palette, semantic color + type vars.
   Two themes: [data-theme="light"] (solarized-warm) and [data-theme="dark"]
   (charcoal). Light is the default. Accent across both is the brand red.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. FONTS
   Display / brand     → Syne (the wordmark face)
   Body / UI           → Open Sans (variable)
   Eyebrows / labels   → Open Sans Condensed (the tagline face — letterspaced caps)
   Mono                → system stack (NO brand mono was provided — see README)
   ---------------------------------------------------------------------------- */
@font-face {
  font-family: "Syne";
  src: url("fonts/Syne-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans Condensed";
  src: url("fonts/OpenSans_Condensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans Condensed";
  src: url("fonts/OpenSans_Condensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans Condensed";
  src: url("fonts/OpenSans_Condensed-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  /* ==========================================================================
     2. RAW PALETTE — never reference these directly in product code; use the
     semantic tokens below. Exposed here for documentation + theme authoring.
     ========================================================================== */

  /* Charcoal / neutral (the brand's dark grey is --charcoal-900 #141414) */
  --charcoal-950: #0E0E10;
  --charcoal-900: #141414;
  --charcoal-850: #1A1A1C;
  --charcoal-800: #1E1E21;
  --charcoal-700: #2A2A2E;
  --charcoal-600: #3C3C42;
  --charcoal-500: #5B5B62;
  --charcoal-400: #7E7E86;
  --charcoal-300: #A6A6AD;
  --charcoal-200: #C9C9CE;
  --charcoal-100: #E4E4E7;
  --charcoal-50:  #F4F4F5;
  --white:        #FFFFFF;

  /* Warm "paper" — solarized-inspired light surfaces */
  --paper-base:   #FDF6E3;  /* solarized base3 — page background      */
  --paper-raised: #F4ECD3;  /* between base3 / base2 — cards, panels   */
  --paper-sunk:   #EEE8D5;  /* solarized base2 — wells, code, fills    */
  --paper-line:   #E3DAC0;  /* hairline borders on paper               */
  --paper-line-2: #D7CDAE;  /* stronger border on paper                */

  /* Brand red — the single chromatic accent. Derived from solarized red. */
  --red-50:  #FCECEA;
  --red-100: #F9D4D1;
  --red-200: #F2A8A3;
  --red-300: #EB7D77;
  --red-400: #E4544D;
  --red-500: #DC322F;  /* ◆ brand red */
  --red-600: #C21F1D;
  --red-700: #9C1815;
  --red-800: #761311;
  --red-900: #4F0F0E;

  /* Solarized support accents — used sparingly for data + status only */
  --sol-blue:    #268BD2;
  --sol-cyan:    #2AA198;
  --sol-green:   #859900;
  --sol-yellow:  #B58900;
  --sol-orange:  #CB4B16;
  --sol-violet:  #6C71C5;
  --sol-magenta: #D33682;

  /* ==========================================================================
     3. TYPE PRIMITIVES
     ========================================================================== */
  --font-display: "Syne", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-condensed: "Open Sans Condensed", "Open Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Modular type scale (1.25 major-third-ish, tuned) */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base:1rem;       /* 16px */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 4rem;       /* 64px */
  --text-6xl: 5.5rem;     /* 88px */

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.18em;  /* the tagline lock-up spacing */

  /* ==========================================================================
     4. SHAPE / ELEVATION (theme-independent primitives)
     ========================================================================== */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --border-thin: 1px;
  --border-med: 2px;
  --border-thick: 3px;   /* the V-mark stroke ratio feel */
}

/* ============================================================================
   5. SEMANTIC TOKENS — LIGHT (default, solarized-warm)
   ============================================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:          var(--paper-base);
  --bg-raised:   var(--paper-raised);
  --bg-sunk:     var(--paper-sunk);
  --bg-inverse:  var(--charcoal-900);

  --fg:          #1A1714;           /* warm near-black ink           */
  --fg-2:        #4A4233;           /* secondary text                */
  --fg-3:        #8A8166;           /* muted / captions              */
  --fg-on-accent:#FFFFFF;
  --fg-on-inverse:#F4ECD3;

  --border:      var(--paper-line);
  --border-strong: var(--paper-line-2);

  --accent:        var(--red-500);
  --accent-hover:  var(--red-600);
  --accent-press:  var(--red-700);
  --accent-soft:   var(--red-50);
  --accent-soft-border: var(--red-100);
  --on-accent:     #FFFFFF;

  --ink:         var(--charcoal-900);  /* the "black" mark color */

  /* status */
  --info:    var(--sol-blue);
  --success: #5E7A00;                  /* darkened green for AA on paper */
  --warning: var(--sol-orange);
  --danger:  var(--red-600);

  --focus-ring: color-mix(in srgb, var(--red-500) 55%, transparent);

  /* elevation — soft, warm-tinted shadows */
  --shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.08);
  --shadow-md: 0 2px 6px rgba(40, 30, 10, 0.10), 0 1px 2px rgba(40, 30, 10, 0.06);
  --shadow-lg: 0 8px 24px rgba(40, 30, 10, 0.12), 0 2px 6px rgba(40, 30, 10, 0.07);
  --shadow-xl: 0 18px 48px rgba(40, 30, 10, 0.16);
}

/* ============================================================================
   6. SEMANTIC TOKENS — DARK (charcoal)
   ============================================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          var(--charcoal-900);
  --bg-raised:   var(--charcoal-800);
  --bg-sunk:     var(--charcoal-950);
  --bg-inverse:  var(--paper-base);

  --fg:          #F2EEE6;
  --fg-2:        #B7B2A6;
  --fg-3:        #7C776C;
  --fg-on-accent:#FFFFFF;
  --fg-on-inverse:#1A1714;

  --border:      #2E2E32;
  --border-strong: #43434A;

  --accent:        var(--red-500);
  --accent-hover:  var(--red-400);
  --accent-press:  var(--red-300);
  --accent-soft:   rgba(220, 50, 47, 0.14);
  --accent-soft-border: rgba(220, 50, 47, 0.34);
  --on-accent:     #FFFFFF;

  --ink:         #FFFFFF;

  --info:    #4FA8E0;
  --success: #9DB300;
  --warning: #E0913A;
  --danger:  var(--red-400);

  --focus-ring: color-mix(in srgb, var(--red-400) 60%, transparent);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 22px 56px rgba(0, 0, 0, 0.68);
}

/* ============================================================================
   7. SEMANTIC TYPE CLASSES — use these in product code
   ============================================================================ */
.vd-eyebrow {
  font-family: var(--font-condensed);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.vd-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.vd-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.vd-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.vd-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg);
}
.vd-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg);
}
.vd-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.vd-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.vd-small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.vd-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.vd-label {
  font-family: var(--font-condensed);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}
.vd-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg);
}