:root {


  --ground-0: #0B0A09;
  --ground-1: #121110;
  --ground-2: #1A1817;
  --ground-3: #232120;
  --ground-4: #2C2A28;

  --hairline-soft: #211F1E;   
  --hairline: #302D2B;        
  --hairline-strong: #423E3A; 

  --metal-lo: #46392A;
  --metal-hi: #8A7350;


  --text-hi: #F3EFE9;
  --text: #CFC8BF;
  --text-lo: #9A928A;
  --text-dim: #756E67;
  --text-on-accent: #150C04;


  --ember: #F2761E;
  --ember-hi: #FF8D3F;      
  --ember-lo: #C2570F;      
  --ember-deep: #7A3407;    
  --ember-wash: rgba(242, 118, 30, 0.10);  
  --ember-wash-strong: rgba(242, 118, 30, 0.18);
  --ember-glow: rgba(242, 118, 30, 0.30);  


  --state-active: #3FD07E;
  --state-active-fill: rgba(63, 208, 126, 0.12);
  --state-active-line: rgba(63, 208, 126, 0.38);

  --state-warn: #F5C542;
  --state-warn-fill: rgba(245, 197, 66, 0.12);
  --state-warn-line: rgba(245, 197, 66, 0.38);

  --state-danger: #E4494E;
  --state-danger-fg: #FF8084;
  --state-danger-fill: rgba(228, 73, 78, 0.13);
  --state-danger-line: rgba(228, 73, 78, 0.42);

  --state-pending: #8AA0FF;
  --state-pending-fill: rgba(138, 160, 255, 0.12);
  --state-pending-line: rgba(138, 160, 255, 0.38);

  --state-idle: #8C857D;
  --state-idle-fill: rgba(140, 133, 125, 0.10);
  --state-idle-line: rgba(140, 133, 125, 0.30);

  --money: #D9C7A3;
  --money-strike: #7E766B;  

  --bg-page: var(--ground-0);
  --bg-panel: var(--ground-1);
  --bg-panel-header: var(--ground-2);
  --bg-row-hover: var(--ground-2);
  --bg-input: var(--ground-3);
  --bg-input-focus: var(--ground-4);
  --bg-inset: #0E0D0C;        
  --bg-scrim: rgba(6, 5, 4, 0.72);  

  --border: var(--hairline);
  --border-soft: var(--hairline-soft);
  --border-strong: var(--hairline-strong);

  --selection-bg: rgba(242, 118, 30, 0.28);
  --selection-fg: var(--text-hi);

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-brand: "Chakra Petch", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;

  --fs-3xs: 0.6875rem;  
  --fs-2xs: 0.75rem;    
  --fs-xs: 0.8125rem;   
  --fs-sm: 0.875rem;    
  --fs-base: 1rem;      
  --fs-md: 1.125rem;    
  --fs-lg: 1.375rem;    
  --fs-xl: 1.75rem;     
  --fs-2xl: 2.25rem;    
  --fs-3xl: 3rem;       
  --fs-hero: clamp(2rem, 1.2rem + 3.6vw, 3.875rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-display: 1.08;
  --lh-heading: 1.22;
  --lh-body: 1.6;
  --lh-tight: 1.35;   

  --ls-display: -0.02em;
  --ls-normal: 0;
  --ls-label: 0.10em;
  --ls-mono: 0.02em;  

  --sp-1: 0.25rem;   
  --sp-2: 0.5rem;    
  --sp-3: 0.75rem;   
  --sp-4: 1rem;      
  --sp-5: 1.25rem;   
  --sp-6: 1.5rem;    
  --sp-8: 2rem;      
  --sp-10: 2.5rem;   
  --sp-12: 3rem;     
  --sp-16: 4rem;     
  --sp-20: 5rem;     
  --sp-section: clamp(3rem, 1.5rem + 6vw, 6rem);

  --page-max: 1180px;        
  --prose-max: 68ch;         
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --rail: 248px;             
  --tap: 44px;               

  --r-1: 2px;    
  --r-2: 4px;    
  --r-3: 6px;    
  --r-4: 10px;   
  --r-pill: 999px;
  --chamfer: 14px;

  --elev-0: none;
  --elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 2px 6px -2px rgba(0, 0, 0, 0.6);
  --elev-3: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px -10px rgba(0, 0, 0, 0.75);
  --elev-4: 0 28px 64px -18px rgba(0, 0, 0, 0.85);
  --elev-ember: 0 0 0 1px var(--ember-deep), 0 10px 30px -12px var(--ember-glow);

  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--ember);
  --focus-ring-inset: inset 0 0 0 2px var(--text-on-accent), inset 0 0 0 4px var(--ember);

  --dur-instant: 90ms;
  --dur-fast: 130ms;
  --dur-base: 180ms;
  --dur-slow: 220ms;
  --ease-out: cubic-bezier(0.22, 0.7, 0.24, 1);   
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);    

  --z-base: 0;
  --z-sticky: 100;
  --z-rail: 200;
  --z-header: 300;
  --z-dropdown: 400;
  --z-scrim: 500;
  --z-modal: 510;
  --z-toast: 600;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --ground-0: #EFE9DE;
  --ground-1: #FFFCF6;
  --ground-2: #F7F1E6;
  --ground-3: #EFE8DA;
  --ground-4: #E5DCCB;

  --hairline-soft: #EAE2D3;
  --hairline: #DCD2C0;
  --hairline-strong: #BFB39C;

  --metal-lo: #C2AE8A;
  --metal-hi: #8A7350;

  --text-hi: #1F1B16;
  --text: #3B342B;
  --text-lo: #6A6053;
  --text-dim: #8E8477;
  --text-on-accent: #FFFFFF;

  --ember: #A8480B;
  --ember-hi: #8E3C08;
  --ember-lo: #F2761E;      
  --ember-deep: #7A3407;
  --ember-wash: rgba(242, 118, 30, 0.10);
  --ember-wash-strong: rgba(242, 118, 30, 0.18);
  --ember-glow: rgba(242, 118, 30, 0.35);

  --state-active: #14794A;        
  --state-active-fill: rgba(20, 121, 74, 0.10);
  --state-active-line: rgba(20, 121, 74, 0.35);

  --state-warn: #8A5B00;          
  --state-warn-fill: rgba(245, 197, 66, 0.22);
  --state-warn-line: rgba(160, 110, 0, 0.40);

  --state-danger: #B62328;        
  --state-danger-fg: #B62328;
  --state-danger-fill: rgba(182, 35, 40, 0.09);
  --state-danger-line: rgba(182, 35, 40, 0.35);

  --state-pending: #3244B8;       
  --state-pending-fill: rgba(50, 68, 184, 0.09);
  --state-pending-line: rgba(50, 68, 184, 0.32);

  --state-idle: #6E665B;          
  --state-idle-fill: rgba(110, 102, 91, 0.09);
  --state-idle-line: rgba(110, 102, 91, 0.28);

  --money: #5A4520;               
  --money-strike: #9A8F7C;

  --bg-inset: #F2ECE0;
  --bg-scrim: rgba(40, 34, 26, 0.45);

  --selection-bg: rgba(242, 118, 30, 0.26);
  --selection-fg: var(--text-hi);

  --elev-1: 0 1px 0 rgba(31, 27, 22, 0.03);
  --elev-2: 0 1px 2px rgba(31, 27, 22, 0.08), 0 2px 8px -4px rgba(31, 27, 22, 0.10);
  --elev-3: 0 8px 24px -10px rgba(31, 27, 22, 0.22);
  --elev-4: 0 28px 60px -20px rgba(31, 27, 22, 0.30);
  --elev-ember: 0 0 0 1px rgba(242, 118, 30, 0.55), 0 10px 26px -14px rgba(242, 118, 30, 0.5);

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --ground-0: #EFE9DE;
    --ground-1: #FFFCF6;
    --ground-2: #F7F1E6;
    --ground-3: #EFE8DA;
    --ground-4: #E5DCCB;
    --hairline-soft: #EAE2D3;
    --hairline: #DCD2C0;
    --hairline-strong: #BFB39C;
    --metal-lo: #C2AE8A;
    --metal-hi: #8A7350;
    --text-hi: #1F1B16;
    --text: #3B342B;
    --text-lo: #6A6053;
    --text-dim: #8E8477;
    --text-on-accent: #FFFFFF;
    --ember: #A8480B;
    --ember-hi: #8E3C08;
    --ember-lo: #F2761E;
    --state-active: #14794A;
    --state-active-fill: rgba(20, 121, 74, 0.10);
    --state-active-line: rgba(20, 121, 74, 0.35);
    --state-warn: #8A5B00;
    --state-warn-fill: rgba(245, 197, 66, 0.22);
    --state-warn-line: rgba(160, 110, 0, 0.40);
    --state-danger: #B62328;
    --state-danger-fg: #B62328;
    --state-danger-fill: rgba(182, 35, 40, 0.09);
    --state-danger-line: rgba(182, 35, 40, 0.35);
    --state-pending: #3244B8;
    --state-pending-fill: rgba(50, 68, 184, 0.09);
    --state-pending-line: rgba(50, 68, 184, 0.32);
    --state-idle: #6E665B;
    --state-idle-fill: rgba(110, 102, 91, 0.09);
    --state-idle-line: rgba(110, 102, 91, 0.28);
    --money: #5A4520;
    --money-strike: #9A8F7C;
    --bg-inset: #F2ECE0;
    --bg-scrim: rgba(40, 34, 26, 0.45);
    --elev-1: 0 1px 0 rgba(31, 27, 22, 0.03);
    --elev-2: 0 1px 2px rgba(31, 27, 22, 0.08), 0 2px 8px -4px rgba(31, 27, 22, 0.10);
    --elev-3: 0 8px 24px -10px rgba(31, 27, 22, 0.22);
    --elev-4: 0 28px 60px -20px rgba(31, 27, 22, 0.30);
    --elev-ember: 0 0 0 1px rgba(242, 118, 30, 0.55), 0 10px 26px -14px rgba(242, 118, 30, 0.5);
    color-scheme: light;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}

@media (forced-colors: active) {
  :root {
    --focus-ring: 0 0 0 3px Highlight;
    --focus-ring-inset: inset 0 0 0 3px Highlight;
  }
}