/* =========================================================================
   AlphaRoot design tokens — "Midnight Tech", light appearance, cyan accent.
   Shared by the public site (site.css) and the admin panel (admin.css): load this file first.
   Views never hard-code colours; stylesheets use these tokens.

   Contrast rules (WCAG 2.2, measured on #FFFFFF / --color-page / --color-surface-muted):
   - --color-accent (#06B6D4, 2.4:1 on white) is DECORATIVE ONLY: brand-mark strokes, rules, glows. Never text.
   - --color-accent-hover (#0891B2, 3.7:1) for non-text indicators (active bars, outline borders) and large bold text.
   - --color-accent-strong (#0E7490, ≥4.8:1) for links, small accent text, and as primary button fill (white text 5.4:1).
   - On navy (--color-navy) use --color-accent-on-dark (#22D3EE, 10.4:1).
   - Palette matches the approved AlphaRoot brand board (Navy #0B1220, Deep Blue #14213D, Cyan #06B6D4, Sky #38BDF8,
     Light Gray #E2E8F0, Background #F5F8FC). The board's Cool Gray #64748B is not used for text, see below.
   - --color-text-muted is #5B6B80 instead of the proposed #64748B: #64748B is 4.47:1 on --color-page and 4.26:1 on
     --color-surface-muted, below AA for body text. #5B6B80 is ≥4.86:1 on every light surface.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Surfaces */
  --color-page: #F5F8FC;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EEF3F8;

  /* Ink */
  --color-navy: #0B1220;
  --color-navy-2: #14213D;
  --color-heading: #14213D;
  --color-text: #334155;
  --color-text-muted: #5B6B80;

  /* Accent (cyan) */
  --color-accent: #06B6D4;
  --color-accent-hover: #0891B2;
  --color-accent-strong: #0E7490;
  --color-accent-strong-hover: #155E75;
  --color-accent-soft: #CFFAFE;
  --color-accent-tint: #ECFEFF;
  --color-accent-line: #A5F3FC;
  --color-accent-on-dark: #22D3EE;
  --color-sky: #38BDF8;               /* brand-board "Sky": decorative gradients only (2.1:1 on white) */

  /* Lines and states */
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-input-border: #748094;     /* 4.0:1 on white: WCAG 1.4.11 non-text contrast */
  --color-focus: #0E7490;
  --color-focus-on-dark: #22D3EE;
  --color-success: #047857;
  --color-warning: #92400E;
  --color-danger: #B91C1C;
  --color-on-dark: #E2E8F0;
  --color-on-dark-muted: #A5B4C8;    /* 8.9:1 on navy */
  --color-on-dark-line: rgb(255 255 255 / 10%);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.1875rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-base: 1.65;
  --letter-spacing-eyebrow: .08em;

  /* Spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3.5rem, 7vw, 6rem);

  /* Shape and depth */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(11 18 32 / 6%);
  --shadow-card: 0 8px 24px rgb(11 18 32 / 6%);
  --shadow-raised: 0 14px 36px -12px rgb(11 18 32 / 22%);
  --focus-ring-shadow: 0 0 0 .2rem rgb(14 116 144 / 25%);

  /* Controls */
  --control-height: 2.75rem;
  --control-height-sm: 2.125rem;

  /* Motion (disabled under prefers-reduced-motion in site.css / admin.css) */
  --transition-fast: .15s ease;

  /* Layout. Breakpoints follow Bootstrap 5.3 (custom properties cannot be used in media queries):
     sm 576px, md 768px, lg 992px, xl 1200px. Verified at 390px, 768px and 1280px. */
  --content-width: 1200px;
  --reading-width: 72ch;
  --header-height: 72px;

  /* Bootstrap bridge (shared) */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-page);
  --bs-emphasis-color: var(--color-heading);
  --bs-heading-color: var(--color-heading);
  --bs-secondary-color: var(--color-text-muted);
  --bs-primary: var(--color-accent-strong);
  --bs-primary-rgb: 14, 116, 144;
  --bs-link-color: var(--color-accent-strong);
  --bs-link-color-rgb: 14, 116, 144;
  --bs-link-hover-color: var(--color-accent-strong-hover);
  --bs-link-hover-color-rgb: 21, 94, 117;
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-sm);
  --bs-focus-ring-color: rgb(14 116 144 / 35%);
}