/* ==========================================================================
   Design Tokens
   ==========================================================================
   Single source of truth for all visual properties. Every component references
   these custom properties — never raw values.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Surface Elevation Hierarchy
     -------------------------------------------------------------------------- */
  --color-surface-base: #efefef;
  --color-surface-100: #e5e6e9;
  --color-surface-200: #dcdde1;
  --color-surface-300: #d0d2d7;
  --color-surface-inset: #e8e9ec;

  /* --------------------------------------------------------------------------
     Text Hierarchy
     -------------------------------------------------------------------------- */
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-tertiary: #6b7280;
  --color-text-muted: #9ca3af;

  /* --------------------------------------------------------------------------
     Border Progression
     -------------------------------------------------------------------------- */
  --color-border-subtle: #dddee2;
  --color-border-default: #cfd1d6;
  --color-border-strong: #bfc1c7;

  /* --------------------------------------------------------------------------
     Control Tokens (inputs, buttons, interactive elements)
     -------------------------------------------------------------------------- */
  --color-control-bg: #ffffff;
  --color-control-border: #bfc1c7;
  --color-control-focus: #879854;
  --color-control-focus-ring: rgba(135, 152, 84, 0.25);
  --color-control-accent: #879854;
  --color-control-accent-hover: #425525;
  --color-control-accent-active: #344419;
  --color-control-accent-text: #ffffff;

  /* --------------------------------------------------------------------------
     Brand
     -------------------------------------------------------------------------- */
  --color-brand: #879854;
  --color-brand-hover: #425525;
  --color-brand-active: #344419;
  --color-brand-subtle: #eef1e6;
  --color-brand-text: #ffffff;
  --color-link: var(--color-brand);

  /* --------------------------------------------------------------------------
     Avatar
     -------------------------------------------------------------------------- */
  --color-avatar-bg: #f59e0b;

  /* --------------------------------------------------------------------------
     Semantic Colors
     -------------------------------------------------------------------------- */
  --color-success: #16a34a;
  --color-success-hover: #15803d;
  --color-success-subtle: #e2f5e9;
  --color-success-text: #15803d;
  --color-success-btn: var(--color-success);
  --color-success-btn-hover: var(--color-success-hover);
  --color-success-btn-active: #166534;
  --color-success-btn-text: #ffffff;

  --color-warning: #d97706;
  --color-warning-hover: #b45309;
  --color-warning-subtle: #f5eddf;
  --color-warning-text: #b45309;
  --color-warning-btn: var(--color-warning);
  --color-warning-btn-hover: var(--color-warning-hover);
  --color-warning-btn-active: #92400e;
  --color-warning-btn-text: #ffffff;

  --color-destructive: #dc2626;
  --color-destructive-hover: #b91c1c;
  --color-destructive-subtle: #f5e1e1;
  --color-destructive-text: #b91c1c;
  --color-destructive-btn: var(--color-destructive);
  --color-destructive-btn-hover: var(--color-destructive-hover);
  --color-destructive-btn-active: #991b1b;
  --color-destructive-btn-text: #ffffff;

  --color-info: #2563eb;
  --color-info-hover: #1d4ed8;
  --color-info-subtle: #e0eaf5;
  --color-info-text: #1d4ed8;
  --color-info-btn: var(--color-info);
  --color-info-btn-hover: var(--color-info-hover);
  --color-info-btn-active: #1e40af;
  --color-info-btn-text: #ffffff;

  /* --------------------------------------------------------------------------
     Spacing Scale (4px base)
     -------------------------------------------------------------------------- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* --------------------------------------------------------------------------
     Typography Scale
     -------------------------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", Consolas, monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

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

  /* --------------------------------------------------------------------------
     Border Radius Scale
     -------------------------------------------------------------------------- */
  --radius-sm: 0.25rem;   /*  4px */
  --radius-md: 0.375rem;  /*  6px */
  --radius-lg: 0.5rem;    /*  8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);

  /* --------------------------------------------------------------------------
     Z-Index Scale
     -------------------------------------------------------------------------- */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;
}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */

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

  /* Surfaces */
  --color-surface-base: #04060c;
  --color-surface-100: #131a0e;
  --color-surface-200: #1e2518;
  --color-surface-300: #2a3222;
  --color-surface-inset: #060804;

  /* Text */
  --color-text-primary: #fefefe;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;

  /* Borders */
  --color-border-subtle: #1c2316;
  --color-border-default: #2a3222;
  --color-border-strong: #3a4430;

  /* Controls */
  --color-control-bg: #000000;
  --color-control-border: #333d2a;
  --color-control-focus: #3a7d0c;
  --color-control-focus-ring: rgba(45, 97, 9, 0.35);
  --color-control-accent: #8cb868;
  --color-control-accent-hover: #7aa858;
  --color-control-accent-active: #6a9a4a;
  --color-control-accent-text: #111827;

  /* Brand */
  --color-brand: #4a572e;
  --color-brand-hover: #3d4826;
  --color-brand-active: #30391e;
  --color-brand-subtle: #1a2510;
  --color-brand-text: #ffffff;
  --color-link: #9aad62;

  /* Avatar */
  --color-avatar-bg: #d97706;

  /* Semantic */
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-success-subtle: #0f291a;
  --color-success-text: #4ade80;
  --color-success-btn: #86d9a1;
  --color-success-btn-hover: #6ccc8c;
  --color-success-btn-active: #56c07a;
  --color-success-btn-text: #111827;

  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-subtle: #2d1f04;
  --color-warning-text: #fbbf24;
  --color-warning-btn: #f5c468;
  --color-warning-btn-hover: #f0b44e;
  --color-warning-btn-active: #eba438;
  --color-warning-btn-text: #111827;

  --color-destructive: #ef4444;
  --color-destructive-hover: #dc2626;
  --color-destructive-subtle: #2d0f0f;
  --color-destructive-text: #f87171;
  --color-destructive-btn: #f0908a;
  --color-destructive-btn-hover: #eb7a73;
  --color-destructive-btn-active: #e6655d;
  --color-destructive-btn-text: #111827;

  --color-info: #3b82f6;
  --color-info-hover: #2563eb;
  --color-info-subtle: #1e3a5f;
  --color-info-text: #60a5fa;
  --color-info-btn: #93b8f9;
  --color-info-btn-hover: #7da8f7;
  --color-info-btn-active: #6898f5;
  --color-info-btn-text: #111827;

  /* Modal backdrop — lighter overlay for dark backgrounds */
  --modal-backdrop-bg: rgba(100, 100, 100, 0.4);

  /* Shadows (deeper for dark backgrounds) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}