/* ================================================================
   Surma design tokens — "Ocean Breeze"
   The single shared source for colour, spacing, type, radius,
   elevation and control sizes. The public site loads this file
   before website.css; the admin can adopt it later.

   Balance:  ~60 % background family (background / canvas)
             ~30 % primary family (headings, links, body ink, dark surfaces)
             <=10 % accents (secondary everywhere, tertiary <=3 %)
   Hard rules (proved by tests/design-tokens.test.js):
     1. secondary and tertiary are fills, never text on a light surface.
     2. a label on a secondary fill is --ink, never white.
     3. no #fff / #000; no surface darker than #242424; shadows are tinted --ink.
   ================================================================ */

:root {
  /* ── Brand (given by the client) ───────────────────────── */
  --primary:    #0B3D91;
  --secondary:  #3BA7F2;
  --tertiary:   #7FE7D6;
  --background: #E8F6FF;   /* lightest surface: cards, inputs, header, modals */

  /* ── Derived tones (same hues) ─────────────────────────── */
  --ink:              #1A2F5E;  /* body text */
  --muted:            #4A5C80;  /* secondary text on light */
  --muted-on-dark:    #B9D7F5;  /* secondary text on --primary */
  --canvas:           #D7EEFE;  /* alternate section band, wells */
  --border-subtle:    #C2E5FC;  /* dividers, card edges */
  --border-control:   #6B7FA6;  /* input edges, 3.66:1 (WCAG 1.4.11) */
  --primary-hover:    #0A3480;
  --primary-active:   #092C6B;
  --secondary-hover:  #2B96E3;

  /* ── Semantic ──────────────────────────────────────────── */
  --success:    #0F6E5F;
  --warning:    #8A5A00;
  --danger:     #B3261E;
  --success-bg: #D2EFE9;
  --warning-bg: #F3E6CC;
  --danger-bg:  #F6DAD8;

  /* ── RGB triplets, only for alpha tints: rgba(var(--x-rgb), .2) ── */
  --primary-rgb:    11, 61, 145;
  --secondary-rgb:  59, 167, 242;
  --tertiary-rgb:   127, 231, 214;
  --background-rgb: 232, 246, 255;
  --ink-rgb:        26, 47, 94;

  /* ── Gradients: adjacent hues only ─────────────────────── */
  --gradient-brand:  linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  /* Text version: the element only shows the first 62 % of the run, so its last letter is still >= 3:1. */
  --gradient-text:   linear-gradient(135deg, var(--primary) 0%, var(--secondary) 160%);
  --gradient-accent: linear-gradient(90deg, var(--secondary) 0%, var(--tertiary) 100%);  /* thin accent lines only */

  /* ── Spacing: 4 px base ────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px;  --space-8: 32px;  --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;
  --control-h: 40px;         /* 44 px on touch: see website.css */
  --control-h-touch: 44px;
  --gutter: 32px;            /* page side padding; 16-20 px on phones */

  /* ── Type (families stay in the site stylesheets) ─────── */
  --fs-12: 12px/16px;  --fs-14: 14px/20px;  --fs-16: 16px/24px;  --fs-18: 18px/28px;  --fs-20: 20px/28px;
  --fs-24: 24px/32px;  --fs-32: 32px/40px;  --fs-48: 48px/52px;
  --fw-regular: 400;   --fw-medium: 500;    --fw-semibold: 600;
  --tracking-tight: -0.02em;  /* >= 32 px only */
  --tracking-caps: 0.04em;    /* 12 px caps only */

  /* ── Radius ────────────────────────────────────────────── */
  --radius-1: 4px;     /* tags, badges */
  --radius-2: 8px;     /* inputs, small cards */
  --radius-3: 12px;    /* cards, modals */
  --radius-4: 16px;    /* hero cards, sheets */
  --radius-pill: 999px;

  /* ── Elevation: tinted with --ink, never black ─────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(var(--ink-rgb), 0.08);
  --shadow-2: 0 4px 12px -2px rgba(var(--ink-rgb), 0.14);
  --shadow-3: 0 12px 32px -8px rgba(var(--ink-rgb), 0.22);
  --shadow-4: 0 24px 64px -16px rgba(var(--ink-rgb), 0.38);

  /* ── Focus ─────────────────────────────────────────────── */
  --focus-ring: 2px solid var(--primary);
  --focus-ring-on-dark: 2px solid var(--tertiary);
  --focus-offset: 2px;

  /* ── Motion ────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}