@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/Montserrat-Regular.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/Montserrat-Medium.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/Montserrat-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/Montserrat-Bold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("fonts/Montserrat-Black.ttf") format("truetype"); }
@font-face { font-family: "DejaVu Sans Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/DejaVuSansMono.ttf") format("truetype"); }
@font-face { font-family: "DejaVu Sans Mono"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/DejaVuSansMono-Bold.ttf") format("truetype"); }

:root {
  
  --font-display: "Montserrat", "Trebuchet MS", system-ui, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "DejaVu Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-heading: var(--font-display);   

  
  --text-2xs: 0.6875rem;  
  --text-xs:  0.75rem;    
  --text-sm:  0.875rem;   
  --text-base:1rem;       
  --text-lg:  1.125rem;   
  --text-xl:  1.25rem;    
  --text-2xl: 1.5rem;     
  --text-3xl: 1.875rem;   
  --text-4xl: 2.375rem;   
  --text-5xl: 3rem;       
  --text-6xl: 3.75rem;    
  --text-7xl: 4.75rem;    

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --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-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-32: 8rem;      

  --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);

  
  --radius-xs:   0.25rem;   
  --radius-sm:   0.375rem;  
  --radius-md:   0.5rem;    
  --radius-lg:   0.75rem;   
  --radius-xl:   1rem;      
  --radius-2xl:  1.25rem;   
  --radius-3xl:  1.5rem;    
  --radius-full: 9999px;

  
  --shadow-xs: 0 1px 2px rgba(8, 11, 13, 0.06);
  --shadow-sm: 0 1px 3px rgba(8, 11, 13, 0.08), 0 1px 2px rgba(8, 11, 13, 0.04);
  --shadow-md: 0 4px 12px rgba(8, 11, 13, 0.08), 0 2px 4px rgba(8, 11, 13, 0.04);
  --shadow-lg: 0 12px 32px rgba(8, 11, 13, 0.12), 0 4px 8px rgba(8, 11, 13, 0.06);
  --shadow-xl: 0 24px 64px rgba(8, 11, 13, 0.18), 0 8px 16px rgba(8, 11, 13, 0.08);
  --shadow-focus: 0 0 0 3px var(--ring);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  
  --duration-instant: 80ms;
  --duration-fast:    150ms;   
  --duration-base:    300ms;   
  --duration-slow:    500ms;   
  --duration-lazy:    800ms;

  --ease-default:  cubic-bezier(0.22, 0.61, 0.36, 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-sticky:   1100;   
  --z-dropdown: 1000;   
  --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;

  
  --container-narrow: 42rem;    
  --container-text:   48rem;    
  --container-base:   64rem;    
  --container-wide:   80rem;    
  --container-full:   90rem;    
  --header-h:         4rem;     
  --appbar-h:         3.5rem;   
  --sidenav-w:        15rem;    
  --sidenav-w-collapsed: 3.75rem; 
  --tabbar-h:         3.5rem;   
  --safe-bottom: env(safe-area-inset-bottom, 0px);

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


:root {
  --ink-950: #080b0d;
  --ink-900: #0c1114;
  --ink-850: #11171b;
  --ink-800: #161e23;
  --ink-750: #1a242a;
  --ink-700: #1f2a30;
  --ink-600: #2c3a42;
  --ink-500: #45565f;
  --ink-400: #6b7c86;   
  --ink-300: #93a3ac;
  --ink-200: #bfcad1;
  --ink-100: #e2e8eb;
  --ink-075: #eef2f4;
  --ink-050: #f3f6f7;

  
  --paper-50:  #faf9f6;
  --paper-100: #f4f2ed;
  --paper-200: #eae7df;
  --paper-300: #ddd9cf;

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


:root {
  --brand-800: #102A73;
  --brand-700: #16309B;
  --brand-600: #1f44c8;   
  --brand-500: #2a57e8;   
  --brand-450: #3363f5;   
  --brand-400: #7c9cff;   
  --brand-300: #a9beff;
  --brand-200: #cbd9ff;
  --brand-100: #e3eaff;
  --brand-050: #f2f5ff;
}


:root {
  --success-700: #075c39;
  --success-600: #0b7a4b;
  --success-500: #12915a;
  --success-400: #42c08a;
  --success-200: #b8e8d2;
  --success-100: #d9f2e6;
}


:root {
  --amber-700: #8a5200;
  --amber-600: #b87400;
  --amber-500: #e08e00;
  --amber-400: #ffbe3d;
  --amber-300: #ffd27a;
  --amber-200: #ffe6b3;
  --amber-100: #fff3d6;
  --amber-050: #fffaee;
}


:root {
  --rose-700: #9b1c13;
  --rose-600: #d92d20;
  --rose-500: #f04438;
  --rose-400: #ff6b60;
  --rose-300: #ffa39c;
  --rose-200: #ffd0cc;
  --rose-100: #fee4e2;
  --rose-050: #fef3f2;
}


:root {
  --violet-600: #6941c6;
  --violet-500: #7f56d9;
  --violet-400: #9b8afb;
  --violet-200: #e9d7fe;
  --violet-100: #f4ebff;
}


: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-900);
  --bg-raised:     var(--white);
  --bg-overlay:    rgba(8, 11, 13, 0.48);
  --bg-inset:      var(--paper-100);

  --surface:        var(--white);
  --surface-subtle: var(--paper-50);
  --surface-hover:  var(--paper-100);
  --surface-active: var(--paper-200);
  --surface-inverse:var(--ink-900);

  --text:           var(--ink-900);
  --text-strong:    var(--ink-950);
  
  --text-muted:     var(--ink-600);
  --text-subtle:    var(--ink-500);
  --text-inverse:   var(--paper-50);
  --text-on-accent: var(--white);
  --text-link:      var(--brand-600);

  --border:         var(--paper-300);
  --border-strong:  var(--ink-200);
  --border-subtle:  var(--paper-200);
  --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);
  --text-on-accent: var(--white);

  
  --info:    var(--violet-600);
  --success: var(--success-700);
  --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-900);
  --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(51, 99, 245, 0.30);

  
  --band-bg:        var(--paper-100);
  --band-heading:   var(--ink-950);
  --band-text:      var(--ink-500);
  --band-muted:     var(--ink-500);
  --band-border:    var(--paper-300);
  --band-accent:    var(--brand-600);
  
  --shot-bg:        var(--white);
  --shot-chrome:    var(--paper-100);
  --shot-border:    var(--paper-300);
  --shot-text:      var(--ink-900);
  --shot-muted:     var(--ink-500);
  --shot-inset:     var(--paper-50);
  --edge: 0 0 0 1px var(--border);
}


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

  --bg:            var(--ink-950);
  --bg-subtle:     var(--ink-900);
  --bg-muted:      var(--ink-850);
  --bg-inverse:    var(--paper-50);
  --bg-raised:     var(--ink-900);
  --bg-overlay:    rgba(0, 0, 0, 0.66);
  --bg-inset:      var(--ink-900);

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

  --text:           var(--ink-100);
  --text-strong:    var(--white);
  --text-muted:     var(--ink-200);
  --text-subtle:    var(--ink-300);
  --text-inverse:   var(--ink-950);
  --text-on-accent: var(--ink-950);
  --text-link:      var(--brand-300);

  --border:         var(--ink-700);
  --border-strong:  var(--ink-600);
  --border-subtle:  var(--ink-800);
  --border-inverse: var(--ink-200);

  --accent:         var(--brand-400);
  --accent-hover:   var(--brand-300);
  --accent-active:  var(--brand-500);
  --accent-subtle:  rgba(124, 156, 255, 0.14);
  --accent-border:  rgba(124, 156, 255, 0.38);
  --text-on-accent: var(--ink-950);

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

  --info-subtle:    rgba(155, 138, 251, 0.14);
  --success-subtle: rgba(66, 192, 138, 0.14);
  --warning-subtle: rgba(255, 190, 61, 0.14);
  --error-subtle:   rgba(255, 107, 96, 0.14);

  --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.38);

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

  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
}


:root {
  
  --code-bg:     var(--ink-950);
  --code-text:   var(--ink-200);
  --code-dim:    var(--ink-300);
  --code-ok:     #6ee7a8;
  --code-warn:   var(--amber-400);
  --code-bad:    var(--rose-400);

  --status-queued:  var(--ink-300);
  --status-running: var(--amber-400);
  --status-done:    var(--success-400);
  --status-failed:  var(--rose-400);
  --status-stopped: var(--ink-300);
  --status-review:  var(--violet-400);
}
[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);

  --status-queued:  var(--ink-500);
  --status-running: var(--amber-700);
  --status-done:    var(--success-600);
  --status-failed:  var(--rose-600);
  --status-stopped: var(--ink-500);
  --status-review:  var(--violet-600);
}


:root {
  --tier-free:     var(--ink-500);
  --tier-creator:  var(--brand-600);
  --tier-pro:      var(--violet-600);
  --tier-business: var(--amber-700);
}
[data-theme="dark"] {
  --tier-free:     var(--ink-300);
  --tier-creator:  var(--brand-400);
  --tier-pro:      var(--violet-400);
  --tier-business: var(--amber-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;
  }
}
:root { --control-h: 2.25rem; --control-h-sm: 1.875rem; --control-h-lg: 2.75rem; }
[data-density="compact"] { --control-h: 2rem; --control-h-sm: 1.625rem; --control-h-lg: 2.375rem; }


@media (pointer: coarse) {
  :root { --control-h: 2.75rem; --control-h-sm: 2.75rem; --control-h-lg: 3rem; }
}