:root {
  --color-red-primary: #D32F2F;
  --color-red-hover: #B71C1C;
  --color-red-muted: #EF5350;
  
  --color-dark-bg: #070A0D; 
  --color-dark-surface: #111d29;
  
  --color-light-bg: #F8FAFC;
  --color-light-surface: #FFFFFF;

  --color-gray-text: #465F6F;
  --color-white: #fff;
  --color-gainsboro: #dce3ea;

  --gap-16: 16px;
  --gap-24: 24px;
  --gap-32: 32px;
  --br-8: 8px;
  --br-16: 16px;

  --padding-input: 8px;
  --padding-16: 16px;
  --padding-card: 32px;

  --fs-text-primary: 20px;
  --fs-text: 18px;
  --fs-headings: 24px;

  --fw-big: 600;

  --primary: var(--color-red-primary);
  --primary-hovered: var(--color-red-hover);
  --on-primary: var(--color-white);
  --error: #FF1744;
}

@media (prefers-color-scheme: light) {
  :root {
    --text-headings: #0F172A;
    --text-body: #1E293B;
    --text-muted: #64748B;
    
    --body-background: var(--color-light-bg);
    --content-background: var(--color-light-surface);
    --outline-variant: var(--color-gainsboro);

    --graph-lines: #393a3b;
    --graph-stroke: #FF1744;
    
    --surface-opacity-10: rgba(15, 23, 42, 0.1);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-headings: #F8FAFC;
    --text-body: #E2E8F0;
    --text-muted: #94A3B8;
    
    --body-background: var(--color-dark-bg);
    --content-background: var(--color-dark-surface);
    --outline-variant: #1C2F40;

    --graph-lines: #eff3f7;
    --graph-stroke: #FF1744;
    
    --surface-opacity-10: rgba(248, 250, 252, 0.1);
  }
}