.app-replica {
  

  --surface: oklch(0.188 0.006 220);
  --surface-raised: oklch(0.238 0.007 220);
  --surface-2: oklch(0.285 0.008 220);
  --border: oklch(0.315 0.009 220);

  --text: oklch(0.945 0.004 220);
  --text-muted: oklch(0.685 0.009 220);
  
  --decorative: oklch(0.545 0.010 220);
  
  --faint: var(--decorative);

  --accent: oklch(0.705 0.088 200);
  --accent-ink: oklch(0.175 0.020 200);

  --green: oklch(0.725 0.105 155);
  --amber: oklch(0.790 0.105 80);
  
  --red: oklch(0.672 0.150 25);

  
  --accent-hover: oklch(0.760 0.090 200);

  
  --accent-soft: oklch(0.285 0.030 200);
  --green-soft: oklch(0.285 0.030 155);
  --amber-soft: oklch(0.285 0.030 80);
  --red-soft: oklch(0.285 0.030 25);

  
  --red-ink: oklch(0.175 0.020 25);
  --red-hover: oklch(0.720 0.140 25);

  
  --border-control: oklch(0.585 0.010 220);

  
  --focus: var(--accent);
  --focus-width: 2px;
  --focus-offset: 2px;

  
  --scrim: oklch(0.120 0.004 220 / 0.60);

  
  --bg: var(--surface);
  --muted: var(--text-muted);

  
  --state-settled: var(--green);
  --state-waiting: var(--amber);
  --state-overdue: var(--red);

  
  --background: var(--surface);
  --card: var(--surface-raised);
  --popover: var(--surface-raised);
  --input: var(--border-control); 
  --foreground: var(--text);
  --muted-foreground: var(--text-muted);
  --primary: var(--accent);
  --ring: var(--focus);           
  --destructive: var(--red);
  --destructive-foreground: var(--red-ink); 

  

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;

  
  --s10: 40px;

  

  --density-row-h: 40px; 
  --density-cell-px: 12px;
  --density-control-h: 32px;
  --density-gap: var(--s3);

  

  --radius: 0.375rem; 

  

  
  --font-sans: "Source Sans 3", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Source Code Pro", Consolas, ui-monospace, monospace;

  
  --text-reading: 1rem;                 
  --text-reading--line-height: 1.5rem;  
  --text-reading--font-weight: 400;

  --text-display: 1.75rem;              
  --text-display--line-height: 2.25rem; 
  --text-display--letter-spacing: -0.02em;
  --text-display--font-weight: 700;

  
  --text-figure: 1.625rem;              
  --text-figure--line-height: 2rem;     
  --text-figure--font-weight: 600;

  --text-title-lg: 1.25rem;              
  --text-title-lg--line-height: 1.75rem; 
  --text-title-lg--letter-spacing: -0.01em;
  --text-title-lg--font-weight: 600;

  
  --text-title: var(--text-body-strong);
  --text-title--line-height: var(--text-body-strong--line-height);
  --text-title--font-weight: var(--text-body-strong--font-weight);

  --text-body: 0.875rem;                 
  --text-body--line-height: 1.25rem;     
  --text-body--font-weight: 400;

  --text-body-strong: 0.875rem;
  --text-body-strong--line-height: 1.25rem;
  --text-body-strong--font-weight: 600;

  
  --text-label: 0.75rem;                 
  --text-label--line-height: 1rem;       
  --text-label--letter-spacing: 0em;     
  --text-label--font-weight: 600;
  --text-label--text-transform: uppercase;

  --text-caption: 0.75rem;               
  --text-caption--line-height: 1rem;     
  --text-caption--font-weight: 400;

  --text-mono: 0.75rem;
  --text-mono--line-height: 1rem;
  --text-mono--font-weight: 500;

  
  --text-mono-sm: var(--text-mono);
  --text-mono-sm--line-height: var(--text-mono--line-height);
  --text-mono-sm--font-weight: var(--text-mono--font-weight);

  

  
  --motion-duration-instant: 70ms;

  
  --motion-duration-fast: 120ms;

  
  --motion-duration-base: 240ms;

  
  --motion-duration-slow: 400ms;

  
  --motion-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);

  
  --motion-ease-enter: cubic-bezier(0, 0, 0.38, 0.9);

  
  --motion-ease-exit: cubic-bezier(0.2, 0, 1, 0.9);

  
  --queue-input-guard: 500ms;

  

  
  --ease-echo: cubic-bezier(0.2, 0, 0, 1);

  
  --transition-fast: var(--motion-duration-fast);

  
  --float-ground: var(--surface-raised);
  --float-edge-outer: oklch(0.120 0.004 220);
  --float-edge-inner: oklch(0.800 0.006 220);
  --float-edge-width: 1px;
  
  --float-radius: 10px;
  
  --float-inset: var(--s2);
  --float-shadow: 0 2px 6px oklch(0 0 0 / 0.40);
  
  --float-input-guard: 500ms;

  color-scheme: dark;

  
  accent-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .app-replica {
    
    --motion-duration-instant: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
  }
}
@media (prefers-contrast: more) {
  .app-replica {
    
    --border: oklch(0.520 0.012 220);
    --text-muted: oklch(0.800 0.009 220);
    --decorative: oklch(0.700 0.010 220);
    
    --float-edge-width: 2px;
    
    --border-control: oklch(0.700 0.010 220);
  }
  :root[data-theme="light"] .app-replica {
    --border: oklch(0.680 0.010 220);
    --text-muted: oklch(0.380 0.010 220);
    --decorative: oklch(0.450 0.010 220);
    
    --border-control: oklch(0.450 0.010 220);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .app-replica {
    --border: oklch(0.680 0.010 220);
    --text-muted: oklch(0.380 0.010 220);
    --decorative: oklch(0.450 0.010 220);
    
    --border-control: oklch(0.450 0.010 220);
  }
  }
}
@media (prefers-reduced-transparency: reduce) {
  .app-replica {
    
    --surface-translucent: var(--surface);
    --surface-raised-translucent: var(--surface-raised);
  }
}

:root[data-theme="light"] .app-replica {
  --surface: oklch(0.935 0.004 220);        
  --surface-raised: oklch(0.970 0.002 220); 
  --surface-2: oklch(1 0 0);                
  --border: oklch(0.870 0.007 220);         

  --text: oklch(0.245 0.009 220);
  --text-muted: oklch(0.505 0.010 220);
  --decorative: oklch(0.605 0.010 220);

  --accent: oklch(0.500 0.100 200);         
  --accent-ink: oklch(0.995 0.002 200);

  --green: oklch(0.505 0.110 155);          
  --amber: oklch(0.520 0.110 70);           
  --red: oklch(0.520 0.160 25);

  
  --accent-hover: oklch(0.450 0.095 200);   
  --accent-soft: oklch(0.935 0.030 200);
  --green-soft: oklch(0.935 0.030 155);
  --amber-soft: oklch(0.935 0.030 70);
  --red-soft: oklch(0.935 0.030 25);
  --red-ink: oklch(0.995 0.002 25);         
  --red-hover: oklch(0.470 0.160 25);       
  --border-control: oklch(0.585 0.010 220); 
  --scrim: oklch(0.245 0.009 220 / 0.40);

  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .app-replica {
  --surface: oklch(0.935 0.004 220);        
  --surface-raised: oklch(0.970 0.002 220); 
  --surface-2: oklch(1 0 0);                
  --border: oklch(0.870 0.007 220);         

  --text: oklch(0.245 0.009 220);
  --text-muted: oklch(0.505 0.010 220);
  --decorative: oklch(0.605 0.010 220);

  --accent: oklch(0.500 0.100 200);         
  --accent-ink: oklch(0.995 0.002 200);

  --green: oklch(0.505 0.110 155);          
  --amber: oklch(0.520 0.110 70);           
  --red: oklch(0.520 0.160 25);

  
  --accent-hover: oklch(0.450 0.095 200);   
  --accent-soft: oklch(0.935 0.030 200);
  --green-soft: oklch(0.935 0.030 155);
  --amber-soft: oklch(0.935 0.030 70);
  --red-soft: oklch(0.935 0.030 25);
  --red-ink: oklch(0.995 0.002 25);         
  --red-hover: oklch(0.470 0.160 25);       
  --border-control: oklch(0.585 0.010 220); 
  --scrim: oklch(0.245 0.009 220 / 0.40);

  color-scheme: light;
}
}

.app-replica[data-density="compact"] {
  --density-row-h: 32px;
  --density-cell-px: 8px;
  --density-control-h: 24px;
  --density-gap: var(--s2);
}