/* Studio design tokens, v2 "Cut Line" (2026-10).

   One file, every value. Components read the semantic names (--bg, --text,
   --accent ...), never the ramps, so light and dark are the same markup with a
   different set of variables. The design rationale lives on the design canvas
   and in DESIGN/02-design-system/DESIGN-SYSTEM-V2.md.

   Two accents, each with one job:
     Signal Blue  (--accent) = act, and what you keep.
     Tape Orange  (--cut)    = what Studio cut, and the one thing to notice.
   Blue and orange stay distinct for colour-blind readers. */

/* ---- Fonts: self-hosted, variable, latin + latin-ext (OFL) ---- */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("fonts/BricolageGrotesque-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: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("fonts/BricolageGrotesque-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; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/Geist-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: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/Geist-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; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/GeistMono-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: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/GeistMono-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 {
  /* Headlines only: Bricolage. Everything people read or click: Geist.
     Timecodes, minutes, prices and eyebrows: Geist Mono. */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-heading: var(--font-display);

  /* Type scale. Fluid display sizes are on the classes in components.css. */
  --text-2xs: 0.75rem;     /* 12 */
  --text-xs:  0.8125rem;   /* 13 */
  --text-sm:  0.875rem;    /* 14 */
  --text-base:1rem;        /* 16 */
  --text-lg:  1.125rem;    /* 18 */
  --text-xl:  1.25rem;     /* 20 */
  --text-2xl: 1.5rem;      /* 24 */
  --text-3xl: 1.875rem;    /* 30 */
  --text-4xl: 2.5rem;      /* 40 */
  --text-5xl: 3.25rem;     /* 52 */
  --text-6xl: 4rem;        /* 64 */
  --text-7xl: 5.25rem;     /* 84 */

  --leading-none:    1;
  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --tracking-tighter: -0.035em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:     0.02em;
  --tracking-caps:     0.08em;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  /* Space: 4px base. Inside components 8-24, between groups 32-48,
     between page sections 96-128 (64 on phones). */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);

  --spacing-xs:  var(--space-1);
  --spacing-sm:  var(--space-2);
  --spacing-md:  var(--space-4);
  --spacing-lg:  var(--space-6);
  --spacing-xl:  var(--space-8);
  --spacing-2xl: var(--space-12);

  /* Shape. 12 buttons and inputs, 16 cards, 24 panels, the cut corner for
     the one thing per page that matters most. */
  --radius-xs:   0.375rem;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.5rem;
  --radius-3xl:  2rem;
  --radius-full: 9999px;
  --cut-corner: polygon(0 0, calc(100% - 1.75rem) 0, 100% 1.75rem, 100% 100%, 0 100%);

  /* Depth. In dark mode shadows go and depth comes from surface + border. */
  --shadow-xs: 0 1px 2px rgba(12, 17, 20, 0.05);
  --shadow-sm: 0 1px 2px rgba(12, 17, 20, 0.05), 0 1px 3px rgba(12, 17, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(12, 17, 20, 0.08), 0 2px 6px rgba(12, 17, 20, 0.05);
  --shadow-lg: 0 24px 64px rgba(12, 17, 20, 0.12), 0 4px 12px rgba(12, 17, 20, 0.05);
  --shadow-xl: 0 32px 80px rgba(12, 17, 20, 0.18), 0 8px 16px rgba(12, 17, 20, 0.08);
  --shadow-focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Motion: only to show a cut, show progress, or say where to look. */
  --duration-instant: 120ms;
  --duration-fast:    200ms;
  --duration-base:    320ms;
  --duration-slow:    560ms;
  --duration-lazy:    800ms;

  --ease-default:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-overlay:  1200;
  --z-modal:    1300;
  --z-popover:  1350;
  --z-tooltip:  1400;
  --z-toast:    1500;

  --breakpoint-mobile:   480px;
  --breakpoint-tablet:   768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide:    1440px;
  --breakpoint-ultra:   1792px;

  /* Layout. Content never wider than 1200, reading text never wider than 680. */
  --container-narrow: 42.5rem;
  --container-text:   48rem;
  --container-base:   64rem;
  --container-wide:   75rem;
  --container-full:   90rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);
  --header-h:         4.5rem;
  --appbar-h:         3.75rem;
  --sidenav-w:        15.5rem;
  --sidenav-w-collapsed: 3.75rem;
  --tabbar-h:         4rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --border-w:       1px;
  --border-w-thick: 2px;
  --border-w-heavy: 3px;
}

/* ---- Ramps (reference only; components use the semantic names below) ---- */
:root {
  --ink-950: #05080A;
  --ink-900: #0A0E11;
  --ink-875: #0C1114;
  --ink-850: #0E1317;
  --ink-800: #131A1F;
  --ink-750: #1A232A;
  --ink-700: #243039;
  --ink-600: #34434D;
  --ink-500: #5C6870;
  --ink-450: #6E7A82;
  --ink-400: #8794A0;
  --ink-300: #B4BEC4;
  --ink-200: #CDD4D8;
  --ink-100: #E4E8EA;
  --ink-075: #EEF1F2;
  --ink-050: #F4F6F7;

  --paper-50:  #FAF9F6;
  --paper-100: #F2F0EA;
  --paper-150: #F6F5F1;
  --paper-200: #E3E0D8;
  --paper-300: #CBC6BB;

  --white: #ffffff;
  --black: #000000;
}

:root {
  --brand-900: #18224A;
  --brand-800: #1A2E86;
  --brand-700: #1F3FB8;
  --brand-600: #2346C9;
  --brand-550: #2A4FD6;
  --brand-500: #2F56E8;
  --brand-400: #7C9CFF;
  --brand-300: #9BB3FF;
  --brand-200: #C9D5FF;
  --brand-100: #E8EDFF;
  --brand-050: #F3F6FF;
}

:root {
  --tape-700: #9A3412;
  --tape-600: #C2410C;
  --tape-500: #EA580C;
  --tape-400: #FB923C;
  --tape-300: #FDBA74;
  --tape-100: #FFEDD5;
  --tape-900: #3A1F10;
}

:root {
  --success-700: #0B5E3B;
  --success-600: #0F7A4D;
  --success-500: #15955F;
  --success-400: #4ADE80;
  --success-200: #B8E8D2;
  --success-100: #DDF3E8;

  --amber-700: #B45309;
  --amber-600: #C96A0A;
  --amber-500: #E08E00;
  --amber-400: #FBBF24;
  --amber-300: #FCD34D;
  --amber-200: #FDE68A;
  --amber-100: #FEF3C7;
  --amber-050: #FFFBEB;

  --rose-700: #B42318;
  --rose-600: #D92D20;
  --rose-500: #F04438;
  --rose-400: #F87171;
  --rose-300: #FCA5A5;
  --rose-200: #FECACA;
  --rose-100: #FDE4E1;
  --rose-050: #FEF3F2;

  --violet-600: #5B3CC4;
  --violet-500: #7C5CE0;
  --violet-400: #A78BFA;
  --violet-200: #DDD6FE;
  --violet-100: #EDE9FE;
}

/* ---- Light (default) ---- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:            var(--paper-50);
  --bg-subtle:     var(--paper-100);
  --bg-muted:      var(--paper-200);
  --bg-inverse:    var(--ink-875);
  --bg-raised:     var(--white);
  --bg-overlay:    rgba(12, 17, 20, 0.45);
  --bg-inset:      var(--paper-100);
  --bg-header:     rgba(250, 249, 246, 0.86);

  --surface:        var(--white);
  --surface-subtle: var(--paper-150);
  --surface-hover:  var(--paper-150);
  --surface-active: var(--paper-100);
  --surface-inverse:var(--ink-875);
  --surface-2:      var(--paper-150);

  --text:           var(--ink-875);
  --text-strong:    var(--ink-950);
  --text-muted:     #3B4750;
  --text-subtle:    var(--ink-500);
  --text-inverse:   var(--paper-50);
  --text-link:      var(--brand-550);

  --border:         var(--paper-200);
  --border-strong:  var(--paper-300);
  --border-subtle:  #ECE9E2;
  --border-inverse: var(--ink-700);

  --accent:         var(--brand-500);
  --accent-hover:   var(--brand-600);
  --accent-active:  var(--brand-700);
  --accent-subtle:  var(--brand-100);
  --accent-border:  var(--brand-200);
  --accent-text:    var(--brand-550);
  --text-on-accent: var(--white);

  --cut:            var(--tape-500);
  --cut-text:       var(--tape-600);
  --cut-subtle:     var(--tape-100);

  --info:    var(--violet-600);
  --success: var(--success-600);
  --warning: var(--amber-700);
  --error:   var(--rose-700);

  --info-subtle:    var(--violet-100);
  --success-subtle: var(--success-100);
  --warning-subtle: var(--amber-100);
  --error-subtle:   var(--rose-100);

  --color-primary:       var(--accent);
  --color-primary-dark:  var(--accent-active);
  --color-primary-light: var(--accent-subtle);
  --color-secondary:     var(--ink-875);
  --color-success:       var(--success);
  --color-error:         var(--error);
  --color-warning:       var(--warning);
  --color-info:          var(--info);
  --color-background:    var(--bg);
  --color-surface:       var(--surface);
  --color-text:          var(--text);
  --color-text-muted:    var(--text-muted);
  --color-border:        var(--border);

  --ring: rgba(47, 86, 232, 0.35);

  /* The always-dark panel (before/after, final call to action). */
  --ink-panel:      var(--ink-875);
  --ink-panel-2:    var(--ink-800);
  --ink-panel-line: var(--ink-700);

  --band-bg:        var(--paper-100);
  --band-heading:   var(--ink-950);
  --band-text:      var(--ink-500);
  --band-muted:     var(--ink-500);
  --band-border:    var(--paper-200);
  --band-accent:    var(--brand-550);

  --shot-bg:        var(--white);
  --shot-chrome:    var(--paper-150);
  --shot-border:    var(--paper-200);
  --shot-text:      var(--ink-875);
  --shot-muted:     var(--ink-500);
  --shot-inset:     var(--paper-50);
  --edge: 0 0 0 1px var(--border);
}

/* ---- Dark ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--ink-900);
  --bg-subtle:     var(--ink-850);
  --bg-muted:      var(--ink-750);
  --bg-inverse:    var(--paper-50);
  --bg-raised:     var(--ink-800);
  --bg-overlay:    rgba(0, 0, 0, 0.62);
  --bg-inset:      var(--ink-850);
  --bg-header:     rgba(10, 14, 17, 0.84);

  --surface:        var(--ink-800);
  --surface-subtle: var(--ink-850);
  --surface-hover:  var(--ink-750);
  --surface-active: var(--ink-700);
  --surface-inverse:var(--paper-50);
  --surface-2:      var(--ink-750);

  --text:           var(--ink-075);
  --text-strong:    var(--white);
  --text-muted:     var(--ink-300);
  --text-subtle:    var(--ink-400);
  --text-inverse:   var(--ink-900);
  --text-link:      var(--brand-300);

  --border:         var(--ink-700);
  --border-strong:  var(--ink-600);
  --border-subtle:  #1C262D;
  --border-inverse: var(--ink-200);

  --accent:         var(--brand-400);
  --accent-hover:   var(--brand-300);
  --accent-active:  var(--brand-200);
  --accent-subtle:  var(--brand-900);
  --accent-border:  rgba(124, 156, 255, 0.4);
  --accent-text:    #8FA8FF;
  --text-on-accent: var(--ink-900);

  --cut:            var(--tape-400);
  --cut-text:       var(--tape-300);
  --cut-subtle:     var(--tape-900);

  --info:    var(--violet-400);
  --success: var(--success-400);
  --warning: var(--amber-400);
  --error:   var(--rose-400);

  --info-subtle:    rgba(167, 139, 250, 0.14);
  --success-subtle: #0F2A1C;
  --warning-subtle: #2E2208;
  --error-subtle:   #3A1414;

  --color-primary:       var(--accent);
  --color-primary-dark:  var(--accent-active);
  --color-primary-light: var(--accent-subtle);
  --color-secondary:     var(--ink-200);
  --color-success:       var(--success);
  --color-error:         var(--error);
  --color-warning:       var(--warning);
  --color-info:          var(--info);
  --color-background:    var(--bg);
  --color-surface:       var(--surface);
  --color-text:          var(--text);
  --color-text-muted:    var(--text-muted);
  --color-border:        var(--border);

  --ring: rgba(124, 156, 255, 0.45);

  --ink-panel:      var(--ink-950);
  --ink-panel-2:    var(--ink-800);
  --ink-panel-line: var(--ink-700);

  --band-bg:        var(--ink-850);
  --band-heading:   var(--white);
  --band-text:      var(--ink-300);
  --band-muted:     var(--ink-300);
  --band-border:    var(--ink-700);
  --band-accent:    var(--brand-400);
  --shot-bg:        var(--ink-850);
  --shot-chrome:    var(--ink-800);
  --shot-border:    var(--ink-700);
  --shot-text:      var(--ink-075);
  --shot-muted:     var(--ink-300);
  --shot-inset:     var(--ink-800);
  --edge: inset 0 0 0 1px var(--border);

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.55);
}

:root {
  --code-bg:     var(--ink-900);
  --code-text:   var(--ink-200);
  --code-dim:    var(--ink-400);
  --code-ok:     var(--success-400);
  --code-warn:   var(--amber-400);
  --code-bad:    var(--rose-400);

  --status-queued:  var(--ink-500);
  --status-running: var(--accent);
  --status-done:    var(--success-600);
  --status-failed:  var(--rose-700);
  --status-stopped: var(--ink-500);
  --status-review:  var(--amber-700);
}
[data-theme="light"] {
  --code-bg:     var(--paper-100);
  --code-text:   var(--ink-800);
  --code-dim:    var(--ink-500);
  --code-ok:     var(--success-700);
  --code-warn:   var(--amber-700);
  --code-bad:    var(--rose-700);
}
[data-theme="dark"] {
  --status-queued:  var(--ink-400);
  --status-running: var(--brand-400);
  --status-done:    var(--success-400);
  --status-failed:  var(--rose-400);
  --status-stopped: var(--ink-400);
  --status-review:  var(--amber-400);
}

:root {
  --tier-free:     var(--ink-500);
  --tier-creator:  var(--brand-550);
  --tier-pro:      var(--violet-600);
  --tier-business: var(--tape-600);
}
[data-theme="dark"] {
  --tier-free:     var(--ink-400);
  --tier-creator:  var(--brand-400);
  --tier-pro:      var(--violet-400);
  --tier-business: var(--tape-400);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
    --duration-slow: 0ms; --duration-lazy: 0ms;
    --ease-spring: linear;
  }
}

/* Controls: 44px on touch, 40px with a mouse. */
:root { --control-h: 2.5rem; --control-h-sm: 2.125rem; --control-h-lg: 3.25rem; }
[data-density="compact"] { --control-h: 2.125rem; --control-h-sm: 1.875rem; --control-h-lg: 2.75rem; }
@media (pointer: coarse) {
  :root { --control-h: 2.75rem; --control-h-sm: 2.75rem; --control-h-lg: 3.25rem; }
}