/* ==========================================================================
   VANGUARD CONSTRUCT — DESIGN TOKENS
   Powered by METRIC. Civil Systems

   This is the ONLY file permitted to declare raw values. Every component
   stylesheet must consume these via var(). See README.md §Token Governance.
   ========================================================================== */

:root {
  /* --------------------------------------------------------- Typography */
  --font-family-primary: "Space Grotesk", "Arialnova", Arial, sans-serif;
  --font-family-stack: "Inter", "Arialnova", Arial, sans-serif;
  --font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-size-xs: 12px;   /* Labels, meta tags, captions */
  --font-size-sm: 14px;   /* Secondary text, table cells */
  --font-size-md: 16px;   /* Base body text, input value */
  --font-size-lg: 20px;   /* Card titles, H4 */
  --font-size-xl: 24px;   /* Section subheadings, H3 */
  --font-size-2xl: 40px;  /* Section headings, H2 */
  --font-size-3xl: 48px;  /* Hero sub-titles, display H1 */
  --font-size-4xl: 56px;  /* Main hero display, metric counters */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 0.98;
  --line-height-snug: 1.18;
  --line-height-base: 1.6;

  --letter-spacing-display: -0.02em;
  --letter-spacing-label: 0.16em;

  /* ------------------------------------------------------------- Colour */
  --color-text-primary: #1d1d1d;    /* Dark charcoal / primary reading */
  --color-text-secondary: #fff5e8;  /* Warm off-white / text on dark surfaces */
  --color-text-tertiary: #0057a5;   /* Industrial blue / links & interactive badges */
  --color-text-accent: #d4a359;     /* Industrial brass / structural highlights */

  --color-surface-base: #000000;    /* Hero sections, dark overlays */
  --color-surface-strong: #eee1d3;  /* Warm sand / concrete texture backgrounds */
  --color-surface-card: #ffffff;    /* Standard card container surface */
  --color-surface-subtle: #f4f4f5;  /* Neutral gray input/secondary surfaces */

  --color-status-success: #064e3b;  /* Green building / safety compliant */
  --color-status-warning: #b45309;  /* Active construction phase */
  --color-status-error: #991b1b;    /* System alert / validation fail */

  /* Derived alpha tokens — composed from the palette above, never hand-picked.
     Components must use these instead of inventing rgba() values. */
  --color-scrim-hero: color-mix(in srgb, var(--color-surface-base) 74%, transparent);
  --color-scrim-media: color-mix(in srgb, var(--color-surface-base) 46%, transparent);
  --color-border-on-dark: color-mix(in srgb, var(--color-text-secondary) 20%, transparent);
  --color-border-on-light: color-mix(in srgb, var(--color-text-primary) 18%, transparent);
  --color-border-hairline: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
  --color-surface-glass: color-mix(in srgb, var(--color-surface-base) 82%, transparent);
  --color-surface-raised: color-mix(in srgb, var(--color-text-secondary) 7%, transparent);
  --color-text-muted-on-dark: color-mix(in srgb, var(--color-text-secondary) 72%, var(--color-surface-base));
  --color-text-muted-on-light: color-mix(in srgb, var(--color-text-primary) 74%, var(--color-surface-card));
  --color-accent-wash: color-mix(in srgb, var(--color-text-accent) 14%, transparent);
  --color-tertiary-wash: color-mix(in srgb, var(--color-text-tertiary) 10%, transparent);
  --color-error-wash: color-mix(in srgb, var(--color-status-error) 10%, transparent);

  /* ------------------------------------------------------------ Spacing */
  --space-1: 8px;   /* Micro paddings, icon gap */
  --space-2: 12px;  /* Button padding vertical, input gap */
  --space-3: 16px;  /* Card padding inner, standard gap */
  --space-4: 24px;  /* Grid gaps, container padding */
  --space-5: 80px;  /* Section margin vertical spacing */

  /* Layout rhythm — strict multiples of the scale above, no one-off values. */
  --layout-gutter: var(--space-4);                      /*  24px */
  --layout-block: calc(var(--space-4) * 2);             /*  48px */
  --layout-section-y: var(--space-5);                   /*  80px */
  --layout-section-y-lg: calc(var(--space-5) * 1.5);    /* 120px */
  --layout-max-width: 1440px;
  --layout-header-height: calc(var(--space-5) + var(--space-1)); /* 88px */

  /* ------------------------------------------- Radius, shadow & motion */
  --radius-none: 0px;
  --radius-xs: 4px;

  --shadow-card: 0 1px 0 var(--color-border-hairline);
  --shadow-lifted: 0 var(--space-2) var(--space-4) color-mix(in srgb, var(--color-surface-base) 16%, transparent);
  --shadow-drawer: 0 0 var(--space-5) color-mix(in srgb, var(--color-surface-base) 60%, transparent);

  --motion-duration-instant: 200ms;
  --motion-duration-fast: 300ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus ring. On dark surfaces the blue alone only reaches ~2.9:1 against
     pure black, so the ring is doubled with the off-white token to guarantee
     a >=3:1 boundary on every surface in the system. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-text-tertiary);
  --focus-ring-on-dark:
    0 0 0 var(--focus-ring-offset) var(--color-surface-base),
    0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--color-text-secondary),
    0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) * 2) var(--focus-ring-color);
  --focus-ring-on-light:
    0 0 0 var(--focus-ring-offset) var(--color-surface-card),
    0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

  --z-header: 100;
  --z-drawer: 200;
  --z-toast: 300;
}

/* Responsive type ramp. Values interpolate strictly between existing scale
   tokens — no new sizes are introduced. */
@media (max-width: 1024px) {
  :root {
    --font-size-4xl: 44px;
    --font-size-3xl: 38px;
    --font-size-2xl: 32px;
    --layout-section-y-lg: var(--space-5);
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-4xl: 36px;
    --font-size-3xl: 30px;
    --font-size-2xl: 26px;
    --font-size-xl: 20px;
    --layout-gutter: var(--space-3);
    --layout-section-y: calc(var(--space-5) * 0.7); /* 56px */
    --layout-section-y-lg: calc(var(--space-5) * 0.8); /* 64px */
    --layout-header-height: calc(var(--space-5) - var(--space-2)); /* 68px */
  }
}

@media (max-width: 400px) {
  :root {
    --font-size-4xl: 30px;
    --font-size-3xl: 26px;
    --font-size-2xl: 23px;
  }
}