/* Zeltis design tokens — single source for site, app and admin.
   Dark-first. Load fonts/fonts.css before this file. Contrast figures: see index.html (brand guide). */

:root {
  /* ---- Brand colours (brief, section 3 — do not change) ---- */
  --z-ink: #0E0D12;          /* page background; text on gold */
  --z-night: #17161D;        /* surface */
  --z-night-2: #201F29;      /* raised surface */
  --z-line: #2D2B38;         /* decorative borders and dividers on dark */
  --z-gold: #FFC531;         /* primary action, brand */
  --z-gold-deep: #F2A900;    /* hover / pressed */
  --z-violet: #6B4EFF;       /* secondary accent, focus ring, links on light */
  --z-lilac: #B9A8FF;        /* soft accent and links on dark */
  --z-cream: #FFF8E7;        /* light sections */
  --z-paper: #FFFFFF;
  --z-mint: #22D3A0;         /* positive */
  --z-coral: #FF5A5F;        /* negative / alert */
  --z-text: #F4F2FA;         /* text on dark */
  --z-muted: #9A97A8;        /* secondary text on dark */
  --z-muted-light: #5E5B6B;  /* secondary text on cream / paper */

  /* ---- Derived colours (added by the brand kit for WCAG AA; see DECISIONS.md) ---- */
  --z-violet-deep: #5A3DF0;       /* hover / pressed for violet buttons */
  --z-line-strong: #74718A;       /* input and control borders on dark, 3.5:1 or better */
  --z-line-light: #E8DFC8;        /* decorative borders on cream */
  --z-line-light-strong: #85819A; /* input borders on cream / paper, 3.5:1 or better */
  --z-mint-deep: #0B7A5B;         /* positive text on cream / paper, 5.0:1 */
  --z-coral-deep: #C8323A;        /* negative text on cream / paper, 5.0:1 */
  --z-gold-soft: rgba(255, 197, 49, 0.14);   /* tinted fills on dark */
  --z-violet-soft: rgba(107, 78, 255, 0.18);
  --z-mint-soft: rgba(34, 211, 160, 0.14);
  --z-coral-soft: rgba(255, 90, 95, 0.14);
  --z-scrim: rgba(14, 13, 18, 0.72);         /* behind sheets and dialogs */

  /* ---- Semantic aliases (dark theme is the default) ---- */
  --z-bg: var(--z-ink);
  --z-surface: var(--z-night);
  --z-surface-raised: var(--z-night-2);
  --z-border: var(--z-line);
  --z-border-control: var(--z-line-strong);
  --z-fg: var(--z-text);
  --z-fg-muted: var(--z-muted);
  --z-link: var(--z-lilac);
  --z-primary: var(--z-gold);
  --z-primary-hover: var(--z-gold-deep);
  --z-on-primary: var(--z-ink);
  --z-positive: var(--z-mint);
  --z-negative: var(--z-coral);

  /* ---- Typography ---- */
  --z-font-display: "Unbounded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --z-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --z-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* addresses, IBANs, keys */

  --z-weight-regular: 400;
  --z-weight-medium: 500;
  --z-weight-semibold: 600;
  --z-weight-bold: 700;
  --z-weight-black: 800;

  /* type scale: size / line height. Display sizes use Unbounded, the rest Inter. */
  --z-fs-display: clamp(2.5rem, 1.4rem + 5.2vw, 4.5rem);   /* 40 -> 72 */
  --z-fs-h1: clamp(2rem, 1.4rem + 2.8vw, 3rem);            /* 32 -> 48 */
  --z-fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);          /* 24 -> 32 */
  --z-fs-h3: 1.25rem;    /* 20 */
  --z-fs-number: clamp(2rem, 1.5rem + 2.4vw, 2.75rem);     /* balances: 32 -> 44 */
  --z-fs-lead: 1.25rem;  /* 20 */
  --z-fs-body: 1rem;     /* 16 */
  --z-fs-small: 0.875rem;   /* 14 */
  --z-fs-caption: 0.75rem;  /* 12 */

  --z-lh-display: 1.05;
  --z-lh-heading: 1.15;
  --z-lh-body: 1.55;
  --z-lh-tight: 1.3;

  --z-track-display: -0.02em;
  --z-track-caps: 0.08em;   /* small uppercase labels */

  /* ---- Shape ---- */
  --z-radius-sm: 10px;    /* chips, small controls */
  --z-radius-md: 16px;    /* inputs, list rows */
  --z-radius-lg: 20px;    /* cards */
  --z-radius-xl: 28px;    /* sheets, hero panels */
  --z-radius-pill: 999px; /* buttons, badges */

  /* ---- Spacing (4 px grid) ---- */
  --z-space-1: 4px;
  --z-space-2: 8px;
  --z-space-3: 12px;
  --z-space-4: 16px;
  --z-space-5: 20px;
  --z-space-6: 24px;
  --z-space-8: 32px;
  --z-space-10: 40px;
  --z-space-12: 48px;
  --z-space-16: 64px;
  --z-space-20: 80px;
  --z-space-24: 96px;

  --z-control-h: 48px;      /* buttons and inputs: comfortable touch target */
  --z-control-h-sm: 40px;
  --z-content-max: 1120px;
  --z-reading-max: 68ch;

  /* ---- Elevation ---- */
  --z-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --z-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --z-shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55);
  --z-shadow-light: 0 8px 24px rgba(14, 13, 18, 0.08);  /* cards on cream */

  /* ---- Focus ring: thick 2 px violet outline, always visible for keyboard users ---- */
  --z-focus-width: 2px;
  --z-focus-offset: 2px;
  --z-focus-color: var(--z-violet);
  --z-focus-ring: var(--z-focus-width) solid var(--z-focus-color);

  /* ---- The one allowed gradient: gold-to-violet hero glow ---- */
  --z-glow: radial-gradient(closest-side, rgba(255, 197, 49, 0.5) 0%, rgba(107, 78, 255, 0.4) 42%, rgba(107, 78, 255, 0) 100%);

  /* ---- Motion ---- */
  --z-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --z-dur-fast: 120ms;
  --z-dur: 200ms;
  --z-dur-slow: 360ms;

  /* ---- Layers ---- */
  --z-layer-sticky: 100;
  --z-layer-overlay: 200;
  --z-layer-dialog: 300;
  --z-layer-toast: 400;

  color-scheme: dark;
}

/* Light sections (cream or paper): add class="z-light" to the section. */
.z-light {
  --z-bg: var(--z-cream);
  --z-surface: var(--z-paper);
  --z-surface-raised: var(--z-paper);
  --z-border: var(--z-line-light);
  --z-border-control: var(--z-line-light-strong);
  --z-fg: var(--z-ink);
  --z-fg-muted: var(--z-muted-light);
  --z-link: var(--z-violet);
  --z-positive: var(--z-mint-deep);
  --z-negative: var(--z-coral-deep);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --z-dur-fast: 0ms;
    --z-dur: 0ms;
    --z-dur-slow: 0ms;
  }
}