/* Sway Studio product design system — tokens.
   Source of truth for the Studio dashboard (control/) and the editor (trials/studio-editor/).
   Edit here, then run scripts/sync-design.sh. Product chrome only: client sites keep their own design-system.json.

   Two layers:
   1. Primitives (--gray-*, --lavender-*, …) are raw values. Components never use them directly.
   2. Semantic tokens (--bg, --text, --accent, …) are what CSS references. Dark mode only remaps this layer. */

@font-face { font-family: "OpenRunde"; src: url("fonts/OpenRunde-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenRunde"; src: url("fonts/OpenRunde-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenRunde"; src: url("fonts/OpenRunde-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenRunde"; src: url("fonts/OpenRunde-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ── Primitives ─────────────────────────────────────────── */
  --carbon: #181925;
  --white: #ffffff;
  --gray-25: #fafafa;   /* linen */
  --gray-50: #f5f5f5;   /* mist */
  --gray-100: #efefef;
  --gray-150: #e8e8e8;  /* fog — the 1px hairline */
  --gray-200: #dddddd;
  --gray-400: #999999;  /* ash — placeholders and disabled only, fails AA as text */
  --gray-500: #737373;
  --gray-600: #666666;  /* graphite */

  --lavender-50: #f3f2fe;
  --lavender-100: #e9e8fd;
  --lavender-300: #b9b6fa;
  --lavender-400: #918df6; /* the signature */
  --lavender-500: #7d78f2;
  --lavender-600: #625ce6; /* white text passes AA (5.0:1) */
  --lavender-700: #5751d8;
  --lavender-800: #4a44c4;

  --mint-500: #33c758;
  --mint-700: #16722f;
  --mint-wash: #def6e4;
  --amber-500: #ffa600;
  --amber-700: #8f5700;
  --amber-wash: #fff3d6;
  --ember-500: #ff3e00;
  --ember-700: #c2330a;
  --ember-wash: #ffe7de;
  --sky-500: #2c78fc;
  --sky-700: #1d5fd6;
  --sky-wash: #e3eeff;
  --magenta-500: #d6409f;

  /* ── Semantic: surfaces ─────────────────────────────────── */
  --bg: var(--white);              /* page and content canvas */
  --bg-subtle: var(--gray-25);     /* sidebars, alternate bands, table header */
  --bg-muted: var(--gray-50);      /* inputs, ghost hovers, wells */
  --bg-hover: var(--gray-100);
  --surface: var(--white);         /* cards, popovers, menus */
  --surface-raised: var(--white);
  --scrim: rgb(24 25 37 / 0.32);

  /* ── Semantic: lines ────────────────────────────────────── */
  --border: var(--gray-150);
  --border-strong: var(--gray-200);

  /* ── Semantic: text ─────────────────────────────────────── */
  --text: var(--carbon);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-placeholder: #767676;
  --text-on-accent: var(--white);

  /* ── Semantic: accent (one color does the work) ─────────── */
  --accent: var(--lavender-400);          /* indicators, selected marks, focus ring, chart line */
  --accent-solid: var(--lavender-600);    /* fills that carry white text */
  --accent-solid-hover: var(--lavender-700);
  --accent-solid-active: var(--lavender-800);
  --accent-soft: var(--lavender-50);      /* selected rows, active nav fill */
  --accent-soft-strong: var(--lavender-100);
  --accent-ink: var(--lavender-700);      /* accent as text */
  --focus-ring: 0 0 0 3px rgb(145 141 246 / 0.35);

  /* ── Semantic: status (text always uses -ink on a -soft fill) ── */
  --positive: var(--mint-500);
  --positive-ink: var(--mint-700);
  --positive-soft: var(--mint-wash);
  --warning: var(--amber-500);
  --warning-ink: var(--amber-700);
  --warning-soft: var(--amber-wash);
  --danger: var(--ember-500);
  --danger-ink: var(--ember-700);
  --danger-soft: var(--ember-wash);
  --info: var(--sky-500);
  --info-ink: var(--sky-700);
  --info-soft: var(--sky-wash);

  /* ── Type ───────────────────────────────────────────────── */
  --font-sans: "OpenRunde", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

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

  /* size / line-height / tracking travel together. App UI lives in 12–24. 36+ is for login and empty states. */
  --text-xs: 12px;   --leading-xs: 16px;   --tracking-xs: -0.01em;
  --text-sm: 13px;   --leading-sm: 18px;   --tracking-sm: -0.012em;
  --text-md: 14px;   --leading-md: 20px;   --tracking-md: -0.016em;
  --text-base: 16px; --leading-base: 24px; --tracking-base: -0.02em;
  --text-lg: 18px;   --leading-lg: 24px;   --tracking-lg: -0.02em;
  --text-xl: 20px;   --leading-xl: 28px;   --tracking-xl: -0.022em;
  --text-2xl: 24px;  --leading-2xl: 28px;  --tracking-2xl: -0.025em;
  --text-3xl: 36px;  --leading-3xl: 44px;  --tracking-3xl: -0.035em;
  --text-4xl: 48px;  --leading-4xl: 48px;  --tracking-4xl: -0.04em;
  --text-display: 60px; --leading-display: 64px; --tracking-display: -0.05em;

  /* ── Space (4px base) ───────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-xs: 6px;      /* kbd, tiny swatches */
  --radius-sm: 8px;      /* inputs, images, menu items */
  --radius-md: 12px;     /* menus, popovers, inner cards */
  --radius-lg: 16px;     /* cards, panels */
  --radius-xl: 24px;     /* tables, large containers */
  --radius-pill: 9999px; /* every button, chip, tag, tab pill */

  /* ── Elevation (three steps, never more) ────────────────── */
  --shadow-control: 0 1px 1px 0 rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.05);
  --shadow-accent: 0 1px 1px 1px rgb(0 0 0 / 0.08), 0 0 0 0.5px rgb(0 0 0 / 0.06);
  --shadow-raised: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 8px 16px 0 rgb(0 0 0 / 0.06), 0 0 0 1px rgb(0 0 0 / 0.02);
  --shadow-overlay: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 16px 32px -4px rgb(0 0 0 / 0.12), 0 0 0 1px rgb(0 0 0 / 0.05);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration: 180ms;

  /* ── Layout ─────────────────────────────────────────────── */
  --page-max: 1200px;
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px;

  /* Gradients are atmosphere only: full-bleed bands and chart fills. Never buttons, cards, or text. */
  --gradient-band: linear-gradient(to right in oklab, var(--sky-500), var(--lavender-400));
  --gradient-band-soft: linear-gradient(to right in oklab, #bed5fe, #ebf2ff 50%, var(--lavender-400));
  --gradient-shimmer: linear-gradient(90deg, var(--gray-50) 25%, var(--gray-100) 50%, var(--gray-50) 75%);

  color-scheme: light;
}

/* Dark is a remap of the semantic layer only. Set by Settings › Appearance in the editor. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121319;
  --bg-subtle: #16171e;
  --bg-muted: #1d1e26;
  --bg-hover: #23242d;
  --surface: #1a1b23;
  --surface-raised: #20212a;
  --scrim: rgb(0 0 0 / 0.55);

  --border: #2a2b35;
  --border-strong: #363743;

  --text: #ededf0;
  --text-secondary: #a8a8b3;
  --text-muted: #8b8b96;
  --text-placeholder: #81818c;
  --text-on-accent: var(--white);

  --accent: #a29ef8;
  --accent-solid: var(--lavender-600);
  --accent-solid-hover: #6e68ec;
  --accent-solid-active: var(--lavender-700);
  --accent-soft: rgb(145 141 246 / 0.12);
  --accent-soft-strong: rgb(145 141 246 / 0.2);
  --accent-ink: #b9b6fa;
  --focus-ring: 0 0 0 3px rgb(145 141 246 / 0.4);

  --positive-ink: #6fdc8a;
  --positive-soft: rgb(51 199 88 / 0.14);
  --warning-ink: #ffc35c;
  --warning-soft: rgb(255 166 0 / 0.14);
  --danger-ink: #ff8a63;
  --danger-soft: rgb(255 62 0 / 0.14);
  --info-ink: #7fb0ff;
  --info-soft: rgb(44 120 252 / 0.16);

  --shadow-control: 0 0 0 1px rgb(255 255 255 / 0.06), 0 1px 1px 0 rgb(0 0 0 / 0.4);
  --shadow-accent: 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 1px 0 rgb(0 0 0 / 0.4);
  --shadow-raised: 0 0 0 1px rgb(255 255 255 / 0.05), 0 8px 16px 0 rgb(0 0 0 / 0.35);
  --shadow-overlay: 0 0 0 1px rgb(255 255 255 / 0.07), 0 16px 32px -4px rgb(0 0 0 / 0.5);
  --gradient-shimmer: linear-gradient(90deg, #1d1e26 25%, #262732 50%, #1d1e26 75%);
}