/* Kraftflix design tokens — the single source of truth.
   Loaded before every other stylesheet on every page. positioning.css
   (landing) and subpage-theme.css (legal/contact/careers) both consume
   these; neither defines its own palette. */

:root{
  /* Violet — brand ramp */
  --violet-50:#faf8ff;
  --violet-100:#f3eeff;
  --violet-150:#ebe3fd;
  --violet-200:#e4d9f7;
  --violet-300:#dbc9f8;
  --violet-400:#c8a7f9;
  --violet-500:#b48dfa;
  --violet-600:#9050ff;
  --violet-650:#7a40c9;
  --violet-700:#6f28df;
  --violet-800:#5a1bc4;
  --violet-900:#4a16b5;
  --violet-950:#34106f;
  --violet-glow:#503383;

  /* Neutral — surfaces & borders */
  --neutral-0:#ffffff;
  --neutral-100:#f0eef5;
  --neutral-150:#eae8f1;
  --neutral-200:#e5e2ef;
  --neutral-300:#dcd7e8;
  --neutral-400:#d2cddf;
  --neutral-500:#bbb6ce;

  /* Text */
  --text-500:#5a6071;
  --text-600:#454c5e;
  --text-700:#3d3a4b;
  --text-800:#282536;
  --text-900:#151928;
  --text-violet:#5d4d75;

  /* Blueprint blue */
  --blue-50:#f5f9ff;
  --blue-100:#e4eefc;
  --blue-200:#d5e5f5;
  --blue-500:#7397c7;
  --blue-600:#3a66b5;
  --blue-700:#33628f;

  /* Advertising indigo */
  --indigo-600:#5549d4;

  /* Status */
  --green-50:#dcf7e9;
  --pink-100:#fce7f1;
  --green-200:#b9ecd1;
  --green-500:#29c69b;
  --pink-600:#b74c8a;
  --green-700:#0f7f6a;
  --green-800:#126449;

  /* Dark surfaces */
  --dark-800:#2c2150;
  --dark-900:#1c1833;
  --dark-950:#120d23;
  --black:#000000;

  /* Alpha tints — channel triplets behind the rgb(... / n%) usages below. */
  --shadow-tint:42 30 74;
  --overlay-tint:16 11 34;

  /* ── Role aliases. Component rules reference these, not the scale. ── */
  --ink:var(--text-900);
  --muted:var(--text-500);
  --violet:var(--violet-700);
  --deep:var(--violet-900);
  --line:var(--neutral-200);
  --soft:var(--violet-50);

  --text-strong:var(--text-900);
  --text-body:var(--text-600);
  --text-muted:var(--text-500);
  --text-subtle:var(--text-500);
  --text-on-dark:#e7e4f2;
  --text-muted-on-dark:var(--neutral-500);

  --surface:var(--neutral-0);
  --surface-soft:var(--violet-50);
  --surface-sunken:var(--violet-100);
  --surface-dark:var(--dark-900);
  --border:var(--neutral-200);
  --border-strong:var(--neutral-300);

  /* ── Type scale — 1.2 modular, 12px content floor ── */
  --text-2xs:12px; --text-xs:13px;  --text-sm:14px;  --text-md:16px;
  --text-lg:18px;  --text-xl:21px;  --text-2xl:25px; --text-3xl:30px;
  --text-4xl:36px;
  --text-illustrative:11px;   /* decorative mock chrome only */

  /* ── Spacing — 4pt grid ── */
  --space-1:4px;  --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-6:24px; --space-8:32px;  --space-12:48px; --space-16:64px;
  --space-24:96px; --space-32:128px;

  /* ── Radius ── */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px;

  /* ── Elevation — three steps, built from the shadow tint ── */
  --shadow-1:0 1px 2px rgb(var(--shadow-tint) / 6%), 0 2px 8px rgb(var(--shadow-tint) / 4%);
  --shadow-2:0 4px 10px rgb(var(--shadow-tint) / 7%), 0 12px 28px rgb(var(--shadow-tint) / 7%);
  --shadow-3:0 12px 24px rgb(var(--shadow-tint) / 8%), 0 32px 64px rgb(var(--shadow-tint) / 12%);

  /* ── Motion — one duration per intent ── */
  --ease-out:cubic-bezier(.2,.8,.3,1);
  --dur-fast:120ms;   /* colour / state echo */
  --dur-base:200ms;   /* hover lift, chips */
  --dur-slow:320ms;   /* disclosure, reveal */

  /* ── Focus ── */
  --focus-ring:var(--violet-900);
  --focus-ring-on-dark:var(--neutral-0);

  --header-h:76px;
  --shell:1220px;
}