/* ── Self-hosted Platform Fonts ────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/platform/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/platform/fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light dark;

    /* ── INK ──────────────────────────────────── */
    --ink-darkest: oklch(12% 0.006 70);
    --ink-darker: oklch(20% 0.006 70);
    --ink-dark: oklch(33% 0.005 70);
    --ink-medium: oklch(48% 0.005 70);
    --ink-light: oklch(62% 0.004 70);
    --ink-lighter: oklch(86% 0.006 70);
    --ink-lightest: oklch(95.5% 0.005 70);

    /* ── ACCENT ───────────────────────────────── */
    --accent-darkest: oklch(35% 0.12 90);
    --accent-darker: oklch(50% 0.15 90);
    --accent-dark: oklch(65% 0.16 90);
    --accent-medium: oklch(75% 0.15 90);
    --accent-light: oklch(85% 0.10 90);
    --accent-lighter: oklch(93% 0.05 90);
    --accent-lightest: oklch(97% 0.02 90);

    /* ── SEMANTIC COLORS ──────────────────────── */
    --color-positive: oklch(55% 0.24 155);
    --color-positive-bg: oklch(97% 0.03 155);
    --color-negative: oklch(50% 0.22 25);
    --color-negative-bg: oklch(95% 0.03 25);
    --color-link: oklch(65% 0.16 90);
    --color-link-hover: oklch(50% 0.15 90);
    --color-highlight: oklch(92% 0.12 90);
    --color-highlight-strong: oklch(85% 0.16 90);

    /* ── SURFACES ─────────────────────────────── */
    --white: oklch(100% 0 0);
    --paper: var(--white);
    --surface: var(--ink-lightest);
    --surface-raised: var(--white);
    --surface-sunken: oklch(92% 0.008 70);

    --bg-primary: var(--paper);
    --bg-secondary: var(--surface);
    --text-primary: var(--ink-darkest);
    --text-secondary: var(--ink-dark);
    --text-tertiary: var(--ink-medium);
    --border-subtle: var(--border-light);

    /* ── ALIASES ───────────────────────────────── */
    --accent: var(--accent-dark);
    --primary: var(--accent-dark);
    --ink: var(--ink-darkest);
    --ink-60: var(--ink-dark);
    --ink-40: var(--ink-medium);

    /* ── BORDERS ───────────────────────────────── */
    --border-light: var(--ink-lighter);
    --border: oklch(84% 0.005 70);
    --border-dark: var(--ink-light);

    /* ── SHADOWS ───────────────────────────────── */
    --shadow-sm: 0 1px 3px oklch(20% 0.005 70 / 0.1);
    --shadow-elevated:
        0 0 0 1px oklch(20% 0.005 70 / 6%),
        0 0.1em 0.3em oklch(20% 0.005 70 / 6%),
        0 0.2em 0.6em oklch(20% 0.005 70 / 5%),
        0 0.4em 1em oklch(20% 0.005 70 / 5%),
        0 0.8em 2em oklch(20% 0.005 70 / 4%),
        0 1.2em 3em oklch(20% 0.005 70 / 3%);

    /* ── TYPOGRAPHY ────────────────────────────── */
    --font-body: Inter, system-ui, -apple-system, sans-serif;
    --font-display: Inter, system-ui, -apple-system, sans-serif;
    --font-ui: Inter, system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --text-xs: 13px;
    --text-sm: 15px;
    --text-base: 17px;
    --text-lg: 19px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 38px;
    --text-4xl: 48px;
    --text-5xl: 64px;
    --text-6xl: 84px;

    /* ── SPACING ───────────────────────────────── */
    --1: 0.5rem; /* 8px - The Atomic Rhythm */

    --space-xs: var(--1);
    --space-sm: calc(var(--1) * 1.5);
    --space-md: calc(var(--1) * 2);
    --space-lg: calc(var(--1) * 3);
    --space-xl: calc(var(--1) * 4);
    --space-2xl: calc(var(--1) * 6);
    --space-3xl: calc(var(--1) * 8);
    --space-4xl: calc(var(--1) * 12);

    /* ── LAYOUT ────────────────────────────────── */
    --layout-narrow: 640px;
    --layout-content: 800px;
    --layout-wide: 1000px;
    --layout-max: 1200px;

    /* ── RADIUS ────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ── TRANSITIONS ──────────────────────────── */
    --transition-fast: 150ms ease;
    --transition: 300ms ease;
    --transition-slow: 500ms ease;

    /* ── EASING ────────────────────────────────── */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);
    --ease-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── FOCUS ─────────────────────────────────── */
    --focus-ring-color: oklch(65% 0.16 250);
    --focus-ring-offset: 2px;
    --focus-ring-size: 2px;

    /* ── BUTTONS ───────────────────────────────── */
    --btn-hover-brightness: 0.9;

    /* ── DIALOG ────────────────────────────────── */
    --dialog-duration: 150ms;
}

/* ── DARK MODE ────────────────────────────────── */
[data-theme="dark"] {
    --ink-darkest: oklch(95% 0.005 220);
    --ink-darker: oklch(85% 0.005 220);
    --ink-dark: oklch(72% 0.008 220);
    --ink-medium: oklch(55% 0.008 220);
    --ink-light: oklch(42% 0.008 220);
    --ink-lighter: oklch(26% 0.008 220);
    --ink-lightest: oklch(17% 0.008 220);

    --accent-darkest: oklch(90% 0.08 155);
    --accent-darker: oklch(78% 0.14 155);
    --accent-dark: oklch(65% 0.20 155);
    --accent-medium: oklch(55% 0.18 155);
    --accent-light: oklch(42% 0.14 155);
    --accent-lighter: oklch(28% 0.08 155);
    --accent-lightest: oklch(20% 0.05 155);

    --color-positive: oklch(65% 0.20 155);
    --color-positive-bg: oklch(20% 0.05 155);
    --color-negative: oklch(65% 0.20 25);
    --color-negative-bg: oklch(22% 0.06 25);
    --color-link: var(--accent-dark);
    --color-link-hover: var(--accent-darker);
    --color-highlight: oklch(28% 0.08 155);
    --color-highlight-strong: oklch(35% 0.12 155);

    --paper: oklch(13% 0.008 250);
    --surface: oklch(17% 0.008 250);
    --surface-raised: oklch(21% 0.008 250);
    --surface-sunken: oklch(10% 0.008 250);

    --border-light: oklch(24% 0.008 250);
    --border: oklch(30% 0.008 250);
    --border-dark: oklch(38% 0.008 250);

    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
    --shadow-elevated:
        0 0 0 1px oklch(0% 0 0 / 40%),
        0 0.2em 0.6em oklch(0% 0 0 / 35%),
        0 0.4em 1.2em oklch(0% 0 0 / 25%),
        0 0.8em 2.4em oklch(0% 0 0 / 15%);

    --btn-hover-brightness: 1.25;
}

/* ── KEYFRAMES ────────────────────────────────── */

@keyframes wobble {
  0%   { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
  15%  { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
  25%  { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
  50%  { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
  75%  { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
}

@keyframes success {
  0%   { background-color: var(--border); scale: 0.8; }
  33%  { background-color: var(--border); scale: 1; }
}

@keyframes zoom-fade {
  100% { transform: translateY(-1.5em); scale: 2; opacity: 0; }
}

@keyframes react {
  0%   { transform: scale(0.85); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes scale-fade-out {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes slide-up-fade-in {
  from { transform: translateY(2rem); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(2rem); }
}

@keyframes pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

@keyframes gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shake {
  0%   { transform: translateX(-2rem); }
  25%  { transform: translateX(2rem); }
  50%  { transform: translateX(-1rem); }
  75%  { transform: translateX(1rem); }
}

@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(3deg); }
  40%  { transform: rotate(-3deg); }
  60%  { transform: rotate(3deg); }
  80%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

@keyframes appear-then-fade {
  0%, 100% { opacity: 0; }
  5%, 60%  { opacity: 1; }
}