/* Generated by scripts/sync-tokens.sh from 'design system/tokens'. Do not edit. */
/* ============================================================
   Studio — Color tokens  (neutral base · ink accent)
   Ink-dark primaries; canvas selection chrome keeps slate blue
   (--selection) so it reads on the board.
   Neutral surface ramp keeps the canvas color-neutral so users
   can work with imagery of any hue without a cast. Consumers use
   the semantic aliases (--surface-*, --text-*, --accent-*), not
   raw ramp values, so a future brand can re-map one layer.
   (Ramp vars keep the --warm-* names for backward compatibility;
   their values are now neutral greys.)
   ============================================================ */
:root {
  /* --- Neutral surface ramp (chrome & canvas) --- */
  --warm-0:  #ffffff;
  --warm-25: #fcfcfc;   /* raised alt */
  --warm-50: #fafafa;   /* sunken */
  --warm-100:#f5f5f4;   /* app canvas background */
  --warm-150:#efefee;   /* card / inset surface */
  --warm-200:#e6e6e3;   /* hover fill */
  --warm-300:#e0e0dd;   /* border */
  --warm-400:#cfcfcb;   /* border strong / divider / canvas dots */
  --warm-500:#a6a6a1;   /* faint text / disabled */
  --warm-600:#84847f;
  --warm-700:#6b6b66;   /* low-emphasis text */
  --warm-800:#51514d;   /* mid text */
  --warm-900:#333330;
  --warm-950:#1c1c1a;   /* high-emphasis text */

  /* dim chrome (nav / agent / top bar sit darker than the canvas) */
  --chrome:        #e9e9e6;
  --chrome-2:      #e3e3df;   /* hover on chrome */
  --chrome-hover:  #dbdbd5;   /* visible hover fill on dim chrome */

  /* --- Slate ramp (canvas selection chrome + note-slate) --- */
  --slate-50:  #e7ecf5;
  --slate-100: #d6deec;
  --slate-200: #b9c6de;
  --slate-300: #93a7cd;  /* accent-hi */
  --slate-400: #7389ba;
  --slate-500: #5a76b0;  /* accent */
  --slate-600: #4c6499;  /* accent-hover */
  --slate-700: #3d517e;  /* accent-active */

  /* --- Semantic status ramps (tuned to read on neutral surfaces) --- */
  --green-100:#dcefe2; --green-500:#3f9d6b; --green-700:#2c7a51;
  --amber-100:#f6eccf; --amber-500:#c98a24; --amber-700:#9a6a17;
  --red-100:  #f6dcd8; --red-500:  #d1584c; --red-700:  #ab3a30;
  --blue-100: #dfe9f6; --blue-500: #4b83cf; --blue-700: #356199;

  /* --- Sticky-note fills (token-driven categories) --- */
  --note-yellow:#f6df9a; --note-yellow-ink:#6a5312;
  --note-pink:  #f4c0cd; --note-pink-ink:  #8a3a4c;
  --note-blue:  #bcd6f4; --note-blue-ink:  #2f5686;
  --note-green: #c3e4c8; --note-green-ink: #2f6b3a;
  --note-violet:#d8cffa; --note-violet-ink:#4c3a94;
  --note-slate: #cdd6ea; --note-slate-ink: #3d517e;
  --note-gray:  #e4e4e0; --note-gray-ink:  #51514d;

  /* ================= SEMANTIC ALIASES ================= */
  /* surfaces */
  --surface-canvas:  var(--warm-100);   /* the board */
  --surface-panel:   var(--warm-0);     /* light panels / floating strips */
  --surface-chrome:  var(--chrome);     /* dim nav / agent / top bar */
  --surface-card:    var(--warm-150);
  --surface-raised:  var(--warm-0);     /* toolbars, popovers, menus, dialogs, inputs */
  --surface-overlay: var(--warm-0);
  --surface-hover:   var(--warm-200);
  --surface-sunken:  var(--warm-50);

  /* borders */
  --border-subtle:  var(--warm-300);
  --border-default: var(--warm-300);
  --border-strong:  var(--warm-400);
  --chrome-border:  var(--warm-400);    /* border on dim chrome */

  /* text */
  --text-hi:    var(--warm-950);
  --text-mid:   var(--warm-800);
  --text-lo:    var(--warm-700);
  --text-faint: var(--warm-500);
  --text-on-accent: #ffffff;

  /* accent (ink — near-black primaries) */
  --accent:        var(--warm-950);
  --accent-hover:  var(--warm-900);
  --accent-active: #000000;
  --accent-hi:     var(--warm-500);
  --accent-soft:   var(--warm-150);
  --accent-soft-2: var(--warm-200);
  --focus-ring:    var(--warm-600);

  /* status */
  --success:     var(--green-500);  --success-soft:var(--green-100);
  --warning:     var(--amber-500);  --warning-soft:var(--amber-100);
  --danger:      var(--red-500);    --danger-soft: var(--red-100);
  --danger-hover:var(--red-700);
  --info:        var(--blue-500);   --info-soft:   var(--blue-100);

  /* selection / canvas chrome — keeps a hue so it reads on the board */
  --selection:      var(--slate-500);
  --selection-fill: var(--slate-50);
  --canvas-dot:     var(--warm-400);
}

/* ============================================================
   Studio — Typography tokens
   Families, sizes (rem @16px base), weights, line-heights,
   tracking. Semantic role aliases at the bottom.
   ============================================================ */
:root {
  /* families */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* size scale */
  --fs-micro:   0.6875rem; /* 11 — mono labels, badges */
  --fs-caption: 0.75rem;   /* 12 */
  --fs-sm:      0.8125rem; /* 13 — dense UI, secondary */
  --fs-body:    0.875rem;  /* 14 — default UI text */
  --fs-md:      1rem;      /* 16 — emphasized body / h3 */
  --fs-lg:      1.1875rem; /* 19 — h2 / panel titles */
  --fs-xl:      1.5rem;    /* 24 — h1 */
  --fs-display: 2.125rem;  /* 34 — display */

  /* line-heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-normal:1.5;
  --lh-relaxed:1.65;

  /* tracking */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.14em;  /* mono eyebrow labels */

  /* ================= ROLE ALIASES ================= */
  --text-display: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-sans);
  --text-h1:      var(--fw-bold) var(--fs-xl)/var(--lh-tight) var(--font-sans);
  --text-h2:      var(--fw-semibold) var(--fs-lg)/var(--lh-snug) var(--font-sans);
  --text-h3:      var(--fw-semibold) var(--fs-md)/var(--lh-snug) var(--font-sans);
  --text-body:    var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans);
  --text-body-strong: var(--fw-semibold) var(--fs-body)/var(--lh-normal) var(--font-sans);
  --text-ui:      var(--fw-medium) var(--fs-sm)/var(--lh-snug) var(--font-sans);
  --text-caption: var(--fw-regular) var(--fs-caption)/var(--lh-snug) var(--font-sans);
  --text-mono-label: var(--fw-medium) var(--fs-micro)/1 var(--font-mono);
}

/* ============================================================
   Studio — Spacing tokens  (4px base grid)
   Use --space-* for padding, margin, and fl-/grid gap.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.125rem; /* 2 */
  --space-2:  0.25rem;  /* 4 */
  --space-3:  0.375rem; /* 6 */
  --space-4:  0.5rem;   /* 8 */
  --space-5:  0.75rem;  /* 12 */
  --space-6:  1rem;     /* 16 */
  --space-7:  1.25rem;  /* 20 */
  --space-8:  1.5rem;   /* 24 */
  --space-9:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-11: 3rem;     /* 48 */
  --space-12: 4rem;     /* 64 */

  /* layout rhythm */
  --panel-pad:   var(--space-6);
  --panel-gap:   var(--space-5);
  --control-gap: var(--space-3);

  /* fixed chrome sizes */
  --topbar-h:      52px;
  --left-panel-w:  248px;
  --right-panel-w: 340px;
  --dock-h:        280px;
  --hit-target:    32px;   /* min interactive size (dense desktop) */
}

/* ============================================================
   Studio — Radius tokens  (soft-corner direction 2c)
   ============================================================ */
:root {
  --radius-xs:  4px;   /* handles, tiny chips */
  --radius-sm:  6px;   /* inputs, small buttons */
  --radius-md:  10px;  /* buttons, cards, notes */
  --radius-lg:  14px;  /* panels, popovers, dialogs */
  --radius-xl:  20px;  /* large surfaces, modals */
  --radius-full: 9999px;
}

/* ============================================================
   Studio — Elevation / shadow tokens
   Neutral cool-black shadows to sit on the neutral canvas.
   Plus focus ring + selection glow.
   ============================================================ */
:root {
  --shadow-xs:  0 1px 2px rgba(24,24,27,0.06);
  --shadow-sm:  0 2px 6px rgba(24,24,27,0.08);
  --shadow-md:  0 6px 18px rgba(24,24,27,0.10);
  --shadow-lg:  0 14px 34px rgba(24,24,27,0.13);
  --shadow-pop: 0 18px 44px rgba(24,24,27,0.16);

  /* on-canvas element lift */
  --shadow-note: 0 8px 20px rgba(24,24,27,0.13);

  /* rings */
  --ring-focus:     0 0 0 3px rgba(90,118,176,0.35);
  --ring-selection: 0 0 0 1.5px var(--selection);
  --ring-inset:     inset 0 0 0 1px var(--border-default);
}

/* ============================================================
   Studio — Motion tokens
   Functional motion only: state feedback, drop reactions,
   streaming. No decorative movement.
   ============================================================ */
:root {
  --dur-instant: 80ms;
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    240ms;
  --dur-slower:  360ms;

  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);   /* enter / expand */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);        /* exit */
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); /* drop reaction pop */

  --transition-control: background-color var(--dur-fast) var(--ease-out),
                        border-color var(--dur-fast) var(--ease-out),
                        color var(--dur-fast) var(--ease-out),
                        box-shadow var(--dur-fast) var(--ease-out),
                        transform var(--dur-fast) var(--ease-out);
}

@keyframes studio-spin { to { transform: rotate(360deg); } }
@keyframes studio-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@keyframes studio-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.45; }
}
@keyframes studio-pop-in {
  0%   { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes studio-flow {
  to { stroke-dashoffset: -16; }
}