/* ==========================================================================
   BORA design tokens — derived from "Brand Guidelines 5.pdf"
   Layer 1: brand primitives (never change per theme)
   Layer 2: semantic tokens per theme — components only ever use these.
   Dark mode later = one more [data-theme="dark"] block of layer 2.
   ========================================================================== */

:root {
  /* — Brand palette (Colors chapter, pp.25–30) — */
  --bora-charcoal: #191818;
  --bora-midnight: #07073b;
  --bora-deep-indigo: #24145d;
  --bora-digital-indigo: #372473;
  --bora-soft-violet: #543c9e;
  --bora-electric-violet: #723ea0;
  --bora-core-purple: #9a5de9;
  --bora-lavender: #ba95c8;
  --bora-white: #ffffff;

  /* — Grayscale (p.26) — */
  --gray-800: #333333;
  --gray-700: #4d4d4d;
  --gray-600: #666666;
  --gray-500: #7f7f7f;
  --gray-400: #999999;
  --gray-300: #cccccc;
  --gray-200: #e6e6e6;
  --gray-100: #f2f2f2;

  /* — Brand gradients (p.31 "A touch of gradient", p.52 gradient types) — */
  --grad-touch: linear-gradient(90deg, var(--bora-electric-violet), var(--bora-core-purple));
  --grad-deep: linear-gradient(90deg, var(--bora-midnight), var(--bora-deep-indigo));
  --grad-indigo: linear-gradient(90deg, var(--bora-electric-violet), var(--bora-digital-indigo));
  --grad-violet: linear-gradient(90deg, var(--bora-soft-violet), var(--bora-deep-indigo));
  --grad-lavender: linear-gradient(90deg, var(--bora-lavender), var(--bora-core-purple));
  --grad-directional: linear-gradient(100deg, var(--bora-soft-violet), var(--bora-deep-indigo));
  --grad-radial: radial-gradient(60% 60% at 50% 50%, var(--bora-soft-violet), var(--bora-deep-indigo));
  /* the O element / patterns gradient (Affinity export: #191818 → #543c9e, #543c9e → #24145d) */
  --grad-o: linear-gradient(135deg, var(--bora-soft-violet), var(--bora-deep-indigo));

  /* — Typography (pp.35–45) — */
  --font-display: "Readex Pro", "Readex Pro Fallback", system-ui, sans-serif;
  --font-body: "A Jannat LT", "Readex Pro", system-ui, sans-serif;
  --fw-xlight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);
  --step-5: clamp(2.75rem, 2rem + 3.6vw, 5.25rem);
  --step-6: clamp(3.25rem, 2.1rem + 5.6vw, 7.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-label: 0.08em;

  /* — Space, layout, shape — */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --space-3xl: clamp(5rem, 3rem + 8vw, 10rem);

  --page-max: 1320px;
  --page-gutter: clamp(16px, 4vw, 64px);
  --header-h: 98px;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* — Motion — */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
}

/* ==========================================================================
   Semantic tokens — LIGHT (current scope)
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --surface: var(--bora-white);
  --surface-sunken: var(--gray-100);
  --surface-tint: color-mix(in srgb, var(--bora-lavender) 12%, var(--bora-white));
  --surface-band: var(--bora-midnight);            /* deep brand band used inside the light theme */
  --surface-band-2: var(--bora-deep-indigo);

  --ink: var(--bora-charcoal);
  --ink-2: var(--gray-700);
  --ink-3: var(--gray-600);
  --ink-on-band: var(--bora-white);
  --ink-on-band-2: color-mix(in srgb, var(--bora-white) 72%, transparent);

  --accent: var(--bora-soft-violet);               /* AA on white for text */
  --accent-strong: var(--bora-digital-indigo);
  --accent-bright: var(--bora-core-purple);        /* large / decorative only */
  --accent-soft: var(--bora-lavender);
  --on-accent: var(--bora-white);

  --line: var(--gray-200);
  --line-strong: var(--gray-300);
  --line-accent: color-mix(in srgb, var(--bora-core-purple) 55%, transparent);

  --glass-bg: color-mix(in srgb, var(--bora-white) 62%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--bora-white) 82%, transparent);
  --glass-border: color-mix(in srgb, var(--bora-core-purple) 38%, transparent);
  --glass-blur: 18px;
  --glass-band-bg: color-mix(in srgb, var(--bora-white) 8%, transparent);
  --glass-band-border: color-mix(in srgb, var(--bora-lavender) 40%, transparent);
  --glass-highlight: inset 0 1px 0 color-mix(in srgb, var(--bora-white) 70%, transparent);

  --loader-rgb: 255 255 255;
  --loader-track: var(--gray-200);

  --shadow-soft: 0 24px 60px -28px color-mix(in srgb, var(--bora-deep-indigo) 35%, transparent);
  --shadow-lift: 0 30px 80px -30px color-mix(in srgb, var(--bora-soft-violet) 55%, transparent);

  --grad-text: linear-gradient(90deg, var(--bora-electric-violet), var(--bora-core-purple));
  --grad-text-deep: linear-gradient(90deg, var(--bora-soft-violet), var(--bora-digital-indigo));

  --focus-ring: 0 0 0 3px var(--bora-white), 0 0 0 5px var(--bora-soft-violet);

  /* arc ramps: colour along each pattern arc (patterns p.55, read by the WebGL arc engine) */
  --arc-ramp-deep: var(--bora-deep-indigo), var(--bora-soft-violet);
  --arc-ramp-bright: var(--bora-soft-violet), var(--bora-core-purple) 60%, var(--bora-lavender);
  --arc-ramp-soft: var(--bora-lavender), var(--gray-200);
  --arc-ramp-o: var(--gray-200), var(--bora-lavender) 35%, var(--bora-soft-violet) 75%, var(--bora-digital-indigo);
  --arc-ramp-track: var(--gray-200), var(--gray-300);

  /* logo colour slots (Logo chapter p.13: "Logo on White") */
  --logo-solid: var(--bora-charcoal);
  --logo-grad-a: var(--bora-white);
  --logo-grad-b: #353233;   /* Affinity-exported logo gradient stops (p.10) */
  --logo-grad-c: #231f20;
}

/* ==========================================================================
   Semantic tokens — DARK (the brand's dark pages: pp.49–51, 57–58, 72)
   Midnight ground, Core Purple point-light, glass panes with a lavender hairline.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #06062e;                               /* Midnight, one step deeper for the page ground */
  --surface-sunken: #04041f;
  --surface-tint: color-mix(in srgb, var(--bora-core-purple) 16%, var(--bora-midnight));
  --surface-band: var(--bora-deep-indigo);
  --surface-band-2: var(--bora-digital-indigo);

  --ink: var(--bora-white);
  --ink-2: color-mix(in srgb, var(--bora-white) 78%, var(--bora-midnight));
  --ink-3: color-mix(in srgb, var(--bora-white) 64%, var(--bora-midnight));
  --ink-on-band: var(--bora-white);
  --ink-on-band-2: color-mix(in srgb, var(--bora-white) 78%, transparent);

  --accent: var(--bora-lavender);                  /* AA on Midnight for text */
  --accent-strong: color-mix(in srgb, var(--bora-lavender) 60%, var(--bora-white));
  --accent-bright: var(--bora-core-purple);
  --accent-soft: var(--bora-soft-violet);
  --on-accent: var(--bora-white);

  --line: color-mix(in srgb, var(--bora-white) 11%, transparent);
  --line-strong: color-mix(in srgb, var(--bora-white) 22%, transparent);
  --line-accent: color-mix(in srgb, var(--bora-core-purple) 65%, transparent);

  --glass-bg: color-mix(in srgb, var(--bora-white) 6%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--bora-deep-indigo) 58%, transparent);
  --glass-border: color-mix(in srgb, var(--bora-lavender) 26%, transparent);
  --glass-blur: 22px;
  --glass-band-bg: color-mix(in srgb, var(--bora-white) 6%, transparent);
  --glass-band-border: color-mix(in srgb, var(--bora-lavender) 30%, transparent);
  --glass-highlight: inset 0 1px 0 color-mix(in srgb, var(--bora-white) 16%, transparent);

  --loader-rgb: 6 6 46;
  --loader-track: color-mix(in srgb, var(--bora-white) 10%, transparent);

  --shadow-soft: 0 30px 70px -30px rgb(0 0 0 / 0.65);
  --shadow-lift: 0 30px 80px -24px color-mix(in srgb, var(--bora-core-purple) 45%, transparent);

  --grad-text: linear-gradient(100deg, var(--bora-white) 0%, var(--bora-lavender) 48%, var(--bora-core-purple) 100%);
  --grad-text-deep: linear-gradient(90deg, var(--bora-lavender), var(--bora-core-purple));

  --focus-ring: 0 0 0 3px var(--bora-midnight), 0 0 0 5px var(--bora-lavender);

  --arc-ramp-deep: var(--bora-digital-indigo), var(--bora-core-purple);
  --arc-ramp-bright: var(--bora-soft-violet), var(--bora-core-purple) 60%, var(--bora-lavender);
  --arc-ramp-soft: var(--bora-lavender), var(--bora-soft-violet);
  --arc-ramp-o: var(--bora-white), var(--bora-lavender) 35%, var(--bora-core-purple) 75%, var(--bora-soft-violet);
  --arc-ramp-track: var(--bora-deep-indigo), var(--bora-digital-indigo);

  /* Logo On Background (p.14): the white wordmark with its grey gradient arcs */
  --logo-solid: var(--bora-white);
  --logo-grad-a: var(--bora-white);
  --logo-grad-b: #353233;
  --logo-grad-c: #231f20;
}