/* ==========================================================================
   AyzalSoft — design tokens (Gateway identity)
   Single source of truth for the site's look. Retune here, not in site.css.

   Brand palette
     Ink    #0F172A   Gate  #2563EB   Packet #06B6D4
     Paper  #F8FAFC   Slate #64748B

   All five sit on the Tailwind slate / blue-600 / cyan-500 ramps (Ink is
   slate-900, Paper slate-50, Slate slate-500), so the intermediate steps
   below are taken from those same ramps rather than invented.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Brand ------------------------------------------------------------ */
  --ink: #0f172a;
  --gate: #2563eb;
  --packet: #06b6d4;
  --paper: #f8fafc;
  --slate: #64748b;

  /* --- Slate ramp ------------------------------------------------------- */
  --slate-50: #f8fafc;   /* = Paper */
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;  /* = Slate */
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;  /* = Ink */

  --gate-400: #60a5fa;
  --gate-500: #3b82f6;
  --gate-600: #2563eb;   /* = Gate */
  --gate-700: #1d4ed8;

  --packet-300: #67e8f9;
  --packet-400: #22d3ee;
  --packet-500: #06b6d4;  /* = Packet */
  --packet-600: #0891b2;

  /* --- Semantic colour --------------------------------------------------- */
  /* Contrast against Ink, measured:
       Paper      17.06:1   body and headings
       slate-300  12.02:1   secondary copy
       slate-400   6.96:1   muted copy — the floor for body text
       Packet      7.35:1   links and accents
       Gate        3.45:1   FAILS as text; background only (Paper on Gate = 4.94:1)
       Slate       3.75:1   borders, rules, large decorative text only          */
  --color-bg: var(--ink);
  --color-bg-raised: var(--slate-800);
  --color-bg-overlay: rgb(15 23 42 / 0.9);

  --color-text: var(--paper);
  --color-text-secondary: var(--slate-300);
  --color-text-muted: var(--slate-400);
  --color-text-faint: var(--slate-500);

  /* Packet carries every accent that has to be *read*. */
  --color-accent: var(--packet-500);
  --color-accent-hover: var(--packet-400);
  --color-on-accent: var(--ink);
  --accent-500: var(--packet-600);   /* pressed state */

  /* Gate is the action colour and only ever appears behind Paper text. */
  --color-action: var(--gate-600);
  --color-action-hover: var(--gate-500);
  --color-action-active: var(--gate-700);
  --color-on-action: var(--paper);

  /* Alpha-based so one value reads correctly on both bg and bg-raised. */
  --color-border-subtle: rgb(148 163 184 / 0.14);
  --color-border: rgb(148 163 184 / 0.2);
  --color-border-strong: rgb(148 163 184 / 0.34);
  --color-border-accent: rgb(6 182 212 / 0.5);
  --color-accent-wash: rgb(6 182 212 / 0.07);
  --color-selection: rgb(6 182 212 / 0.28);

  /* --- Typography -------------------------------------------------------- */
  /* Space Grotesk 600 display / 500 UI · Inter 400 body. Both are variable
     fonts declared over a weight range in fonts.css. */
  --font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  --weight-display: 600;
  --weight-ui: 500;
  --weight-body: 400;
  --weight-emphasis: 600;

  --text-2xs: 0.75rem;      /* 12px  index numerals, fine print */
  --text-xs: 0.8125rem;     /* 13px  kickers, stat labels */
  --text-sm: 0.875rem;      /* 14px  nav, buttons, meta */
  --text-base: 0.9375rem;   /* 15px  dense body */
  --text-md: 1rem;          /* 16px  body */
  --text-lg: 1.0625rem;     /* 17px  emphasis body */
  --text-xl: 1.125rem;      /* 18px  lede */
  --text-2xl: 1.3125rem;    /* 21px  card titles */
  --text-3xl: 1.5rem;       /* 24px  sub-section titles */
  --text-4xl: 1.75rem;      /* 28px  rule headings */
  --text-5xl: 2.25rem;      /* 36px  stat values */

  /* Display sizes are smaller than the previous condensed face carried:
     Space Grotesk is a wide grotesque, and it is set in sentence case now,
     so the same string occupies far more width per character. */
  --text-display: clamp(2.25rem, 5.2vw, 3.75rem);      /* 36 → 60 */
  --text-page-title: clamp(2rem, 4.6vw, 3.25rem);      /* 32 → 52 */
  --text-heading: clamp(1.75rem, 3.4vw, 2.5rem);       /* 28 → 40 */
  --text-subheading: clamp(1.5rem, 3vw, 2.125rem);     /* 24 → 34 */

  --tracking-display: -0.022em;
  --tracking-tight: -0.012em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;
  --tracking-brand: 0.02em;

  --leading-none: 1;
  --leading-tight: 1.08;
  --leading-snug: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.65;

  /* --- Space (4px base) --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-19: 4.75rem;
  --space-21: 5.25rem;

  /* --- Layout -------------------------------------------------------------- */
  --container-max: 1200px;
  --gutter: 20px;
  --section-y: var(--space-21);
  --header-h: 64px;

  /* --- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 160ms;
  --duration-slow: 240ms;

  /* --- Borders ------------------------------------------------------------- */
  /* The mark uses a 3–4px corner radius on the packet; the UI echoes it
     rather than staying fully square as the previous wireframe system did. */
  --radius: 4px;
  --radius-sm: 3px;
  --hairline: 1px;
}