/*
 * DiThiKai design tokens — single source for colours, type, spacing and sizes.
 * Spec and rationale: docs/design.md (phase 2). Palette: D-36, brand/README.md.
 * Dark mode follows the OS only (prefers-color-scheme), no toggle.
 */

/* Saira Expanded: wdth pinned to 125, wght 400–600, Latin subset.
   Built by brand/tools/webfont.py; licence in OFL.txt next to the file. */
@font-face {
  font-family: "Saira Expanded";
  src: url("../fonts/saira-expanded-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Colours — light (contrast on --color-bg / --color-surface-tint ≥ 4.5:1 for text) */
  --color-bg: #ffffff;
  --color-text: #12203a;              /* navy, 16.2:1 */
  --color-text-muted: #4a5670;        /* 7.4:1, 6.7:1 on tint */
  --color-link: #0b5fe0;              /* 5.6:1, 5.1:1 on tint */
  --color-on-link: #ffffff;           /* text on solid link-coloured buttons, 5.6:1 */
  --color-focus: #0b5fe0;
  --color-border: #d5dde8;            /* decorative only */
  --color-surface-tint: #eef4fd;      /* alternating sections, footer */
  --color-surface-tile: #ffffff;      /* tiles on the tint */
  --color-header: rgb(255 255 255 / 0.92);
  --color-brand-cyan: #13b4ff;        /* gradient top — never text on light */
  --color-brand-blue: #0b5fe0;        /* gradient bottom */
  --color-brand-grey: #8a96ab;        /* the "a" of the wordmark — never text */
  --gradient-brand: linear-gradient(180deg, var(--color-brand-cyan), var(--color-brand-blue));

  /* Type */
  --font-heading: "Saira Expanded", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-heading: 470;              /* same as the wordmark; axis allows 400–600 */
  --leading-body: 1.6;
  --leading-heading: 1.15;
  --measure: 38em;                    /* ≈ 65–70 characters of body text */

  /* Fluid type scale (Utopia method): 16 → 18 px body, ratio 1.15 → 1.25,
     interpolated between 360 px and 1240 px viewport width */
  --step--1: clamp(0.8696rem, 0.8571rem + 0.0553vw, 0.9rem);
  --step-0: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);       /* body */
  --step-1: clamp(1.15rem, 1.0452rem + 0.4659vw, 1.4063rem);   /* h3 */
  --step-2: clamp(1.3225rem, 1.1444rem + 0.7915vw, 1.7578rem); /* h2 */
  --step-3: clamp(1.5209rem, 1.2442rem + 1.2298vw, 2.1973rem);
  --step-4: clamp(1.749rem, 1.3409rem + 1.8138vw, 2.7466rem);  /* h1 */

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-gutter: clamp(1rem, 0.1818rem + 3.6364vw, 3rem);     /* page side padding */
  --space-section: clamp(2rem, 0.9773rem + 4.5455vw, 4.5rem);  /* section block padding */

  /* Sizes */
  --width-content: 80rem;             /* 1280 px */
  --radius-s: 8px;                    /* buttons, inputs */
  --radius-l: 14px;                   /* tiles */
  --radius-pill: 999px;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --target-min: 2.75rem;              /* comfortable touch target (WCAG 2.5.8 needs 24 px) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0d1626;
    --color-text: #eef3ff;            /* 16.3:1 */
    --color-text-muted: #b4c0d6;      /* 9.9:1 */
    --color-link: #3d8bff;            /* 5.5:1, 5.0:1 on tint */
    --color-on-link: #0d1626;         /* 5.5:1 */
    --color-focus: #13b4ff;           /* 7.8:1 */
    --color-border: #2a3a57;
    --color-surface-tint: #121e33;
    --color-surface-tile: #0d1626;
    --color-header: rgb(13 22 38 / 0.92);
    --color-brand-blue: #3d8bff;
    --color-brand-grey: #7c88a0;
  }
}