/* ============================================================================
   GARPI 2026 | Shared design tokens
   Optimal® design system – Navy / Teal / Ink palette, Space Grotesk + Inter.
   Every direction consumes these tokens. Directions may remap the semantic
   layer (--bg, --fg, --accent …) but must not invent new brand colours.

   Typography follows the ARaaS app baseline verified on demo.oee (16 Jul 2026):
   Space Grotesk for display and numerics, Inter for body and interface. This
   supersedes the older Georgia / Helvetica Neue pairing for app surfaces.
   WOFF2 files are self-hosted in assets/fonts/ so no page depends on a
   third-party font CDN. Both faces are SIL Open Font License.
   ========================================================================== */

/* -- Faces ----------------------------------------------------------------
   Weights match what is self-hosted on demo.oee: Inter 400/500/600/700 and
   Space Grotesk 500/600/700. No italic is hosted for either face, so no rule
   in this project may ask for one – synthesised obliques are not brand.     */

@font-face {
  font-family: Inter;
  src: url("fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* -- Brand palette (canonical Optimal values, do not alter) -------------- */
  --brand-navy: #002F65;
  --brand-navy-dark: #001E44;
  --brand-teal: #00A8CB;
  --brand-teal-light: #E0F6FB;
  --brand-ink: #0D1117;
  --brand-ink-3: #3A4252;
  --brand-ink-4: #6B7280;
  --brand-rule: #D8D3CC;
  --brand-rule-light: #EBEBEB;
  --brand-paper: #FAFAF8;
  --brand-white: #FFFFFF;

  /* Accessible companions. #00A8CB reaches only 2.8:1 on white, so it is
     reserved for graphics and rules on light surfaces; --brand-teal-ink is
     the WCAG-AA text-safe companion (5.7:1 on white). On dark surfaces the
     brand teal itself clears AA (5.9:1 on --brand-navy-dark) and is used raw. */
  --brand-teal-ink: #00708A;
  --brand-navy-mid: #0A4A8F;

  /* Signal colours – used only for validation and status, never for scoring. */
  --signal-attention: #8A4B00;
  --signal-attention-wash: #FDF3E7;
  --signal-affirm: #0F5C3F;

  /* -- Typography ---------------------------------------------------------
     display  Space Grotesk – h1–h4, shell and card titles
     body     Inter – paragraphs, labels, controls, eyebrows, dense text
     num      Space Grotesk – KPI values, context metrics, high-signal numbers
     mono     the documented exception: technical identifiers only
              (submission references, question IDs, channel codes)            */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-num: "Space Grotesk", "Inter", sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace;

  /* Space Grotesk is hosted at 500/600/700. 500 is the display default. */
  --weight-display: 500;

  /* Fluid display scale – clamped so 320px and 1440px both stay composed. */
  --type-display: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
  --type-title: clamp(1.4rem, 1.02rem + 1.6vw, 2.1rem);
  --type-heading: clamp(1.15rem, 0.98rem + 0.7vw, 1.4rem);
  --type-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-caption: 0.75rem;
  --type-eyebrow: 0.6875rem;

  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-body: 1.6;

  /* Eyebrows are Inter 700, UPPERCASE, 0.14em – matching the app baseline. */
  --tracking-eyebrow: 0.14em;
  --tracking-caps: 0.08em;

  /* Space Grotesk is drawn for optical tracking at 0. Do not letter-space it. */
  --tracking-display: 0em;

  /* -- Spacing scale (4px base) ------------------------------------------- */
  --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;

  /* -- Geometry -----------------------------------------------------------
     Restrained. Editorial documents are square; controls carry a small,
     deliberate radius. No pill shapes, no oversized cards. */
  --radius-sharp: 0px;
  --radius-control: 3px;
  --radius-panel: 4px;
  /* The softest step permitted. Used by the two app-voiced directions
     (Precision, Guided) to sit closer to the ARaaS app baseline without
     drifting into the oversized-card styling the brief rules out. */
  --radius-soft: 10px;

  --border-hair: 1px;
  --border-rule: 2px;
  --border-emphasis: 3px;

  /* -- Semantic surface layer (light default) ----------------------------- */
  --bg: var(--brand-paper);
  --bg-raised: var(--brand-white);
  --bg-sunken: #F2F1EE;
  --bg-inverse: var(--brand-navy);

  --fg: var(--brand-ink);
  --fg-strong: var(--brand-navy);
  --fg-muted: var(--brand-ink-3);
  --fg-subtle: var(--brand-ink-4);
  --fg-inverse: var(--brand-white);

  --line: var(--brand-rule-light);
  --line-strong: var(--brand-rule);
  --line-ink: var(--brand-navy);

  --accent: var(--brand-teal);
  --accent-ink: var(--brand-teal-ink);
  --accent-wash: var(--brand-teal-light);
  --accent-contrast: var(--brand-white);

  --focus-ring: var(--brand-navy);
  --focus-halo: var(--brand-white);

  /* -- Elevation ----------------------------------------------------------
     Two steps only. Depth reads as paper lifting, not as a glow. */
  --elev-1: 0 1px 2px rgba(0, 30, 68, 0.06), 0 4px 12px rgba(0, 30, 68, 0.05);
  --elev-2: 0 2px 6px rgba(0, 30, 68, 0.08), 0 18px 42px rgba(0, 30, 68, 0.10);

  /* -- Layout ------------------------------------------------------------- */
  --measure: 34em;
  --shell-max: 1360px;
  --gutter: clamp(16px, 4vw, 56px);
}

/* Dark semantic layer – opted into by the Industrial Signal direction. */
[data-surface="dark"] {
  --bg: var(--brand-navy-dark);
  --bg-raised: #042A56;
  --bg-sunken: #00152F;
  --bg-inverse: var(--brand-white);

  --fg: #E8F1F8;
  --fg-strong: var(--brand-white);
  --fg-muted: #9DB6CC;
  --fg-subtle: #7594AF;
  --fg-inverse: var(--brand-navy-dark);

  --line: rgba(157, 182, 204, 0.20);
  --line-strong: rgba(157, 182, 204, 0.42);
  --line-ink: var(--brand-teal);

  --accent: var(--brand-teal);
  --accent-ink: #4FD3EE;
  --accent-wash: rgba(0, 168, 203, 0.14);
  --accent-contrast: var(--brand-navy-dark);

  --focus-ring: var(--brand-teal);
  --focus-halo: var(--brand-navy-dark);

  --signal-attention: #FFB562;
  --signal-attention-wash: rgba(255, 181, 98, 0.12);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 20px 48px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}