/**
 * @file        tokens.css
 * @description Single source of design token values, generated from DESIGN.md §2–§10
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         b7e2f419-5a03-4c86-9d71-2e408b5c6a3f
 * @version     0.0.0.1
 * @created     2026-09-11
 * @updated     2026-09-11
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/*
 * DESIGN.md is authoritative for every value below. Components consume the
 * SEMANTIC aliases only — never a raw brand token, never a literal hex.
 *
 * NOTE: AGENTS.md carries a stale oh-my-design bootstrap palette (dark canvas
 * #08090a, accent #5e6ad2, Inter). That is not this brand. DESIGN.md wins per
 * the project CLAUDE.md; the AGENTS.md shim needs regenerating.
 */

:root {
  /* --- Brand originals ---------------------------------------------------
   * Surfaces, large text (>=24px / >=18.66px bold), borders and icons ONLY.
   * Three of these FAIL AA at body size and are never used for body text. */
  --color-deep-space:    #2D3142;  /* Pantone 533 C  */
  --color-digital-blue:  #058ED9;  /* Pantone 2925 C — NOT body text (3.13:1) */
  --color-steel-mist:    #7A93AC;  /* Pantone 7544 C — borders only (2.79:1) */
  --color-cloud-white:   #EEF0F2;  /* Pantone 663 C  */
  --color-golden-accent: #BF9B30;  /* Pantone 7555 C — fill only, never text on light */

  /* --- Text-safe derivations ---------------------------------------------
   * Minimally darkened, hue-preserving. All >= 4.5:1 on --surface-page.
   * OD-5: pending brand sign-off. If replaced, the ratio is an acceptance
   * gate (NFR18), not a preference. */
  --color-blue-text:  #0473AF;  /* 4.51:1 */
  --color-steel-text: #5C6F82;  /* 4.54:1 */
  --color-gold-text:  #836A21;  /* 4.54:1 */

  /* --- Semantic aliases — the only names components may use --------------- */
  --text-primary:       var(--color-deep-space);    /* 11.28:1 on page  */
  --text-secondary:     var(--color-steel-text);    /*  4.54:1 on page  */
  --text-link:          var(--color-blue-text);     /*  4.51:1 on page  */
  --text-on-dark:       var(--color-cloud-white);   /* 11.28:1 on inverse */
  --text-on-gold:       var(--color-deep-space);    /*  4.88:1 on gold  */

  --surface-page:       var(--color-cloud-white);
  --surface-raised:     #FFFFFF;
  --surface-inverse:    var(--color-deep-space);

  --cta-primary-bg:     var(--color-golden-accent);
  --cta-primary-text:   var(--color-deep-space);

  --border-subtle:      var(--color-steel-mist);

  /* Focus rings. --focus-ring on Deep Space would be 1.00:1 — invisible —
   * so dark surfaces get the inverse token (11.28:1). WCAG 2.4.7 / NFR22. */
  --focus-ring:         var(--color-deep-space);
  --focus-ring-inverse: var(--color-cloud-white);

  /* --- Typography -------------------------------------------------------- */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.8125rem;  /* 13px — meta only, never body */
  --text-sm:   0.875rem;
  --text-base: 1rem;       /* 16px — body floor, never below */
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --text-4xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);

  --leading-tight: 1.2;
  --leading-body:  1.6;   /* WCAG 1.4.12 floor is 1.5 */
  --measure:       68ch;

  /* --- Spacing — 4px base, one scale for margin, padding and gap ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* --- Radii — deliberately small; heavy rounding reads as consumer software */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-full: 999px;

  /* --- Layout ------------------------------------------------------------ */
  --container-max:     1200px;
  --container-reading: 720px;
  --touch-min:         44px;   /* WCAG 2.5.5 target floor */

  /* --- Motion ------------------------------------------------------------ */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Breakpoints (documented; media queries cannot consume custom props) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/*
 * theme_mode is light-only — DESIGN.md defines no dark token set. A
 * prefers-color-scheme block here would invent values the brand has not
 * approved, so there deliberately isn't one.
 */