/* ============================================================
   Design Tokens — macOS-inspired premium UI
   Theme: data-theme="light" (default) / data-theme="dark"
   Non-color tokens (typography, spacing, radius) never change.
   ============================================================ */

:root {
  /* === Typography === */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:   "SF Mono", "Fira Code", ui-monospace, 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 */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* === Spacing === */
  --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 */

  /* === Radii === */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* === Layout === */
  --max-width-content: 760px;
  --max-width-wide:    1100px;
  --sidebar-width:     320px;

  /* === Transitions === */
  --transition-fast:  150ms ease;
  --transition-base:  200ms ease;
  --transition-slow:  300ms ease;

  /* ============================================================
     LIGHT THEME (default — macOS Sonoma/Sequoia light)
     ============================================================ */

  /* Backgrounds */
  --color-bg:        #FAFAF8;   /* Editorial warm cream-white */
  --color-surface:   #FFFFFF;   /* Card / panel surface */
  --color-surface-2: transparent; /* Underline-style inputs — no box background */

  /* Borders */
  --color-border:       #EDE6D9; /* Warm sand border — Editorial/Calm */
  --color-border-focus: #0891B2;

  /* Editorial/Calm — new in v2 */
  --font-serif:              "Georgia", "Times New Roman", serif; /* PDF reports only */
  --color-section-accent:    #0891B2;   /* Section header underline */
  --color-field-border:      #F0E9DB;   /* Underline between input fields */

  /* Text */
  --color-text-primary:   #1D1D1F;
  --color-text-secondary: rgba(60, 60, 67, 0.6);
  --color-text-tertiary:  rgba(60, 60, 67, 0.35);
  --color-text-inverse:   #FFFFFF;

  /* Accent — deep teal (consistent brand color, light mode) */
  --color-accent:       #0891B2;
  --color-accent-hover: #0e7490;
  --color-accent-light: #e0f7fa;

  /* Semantic */
  --color-success:      #30D158;
  --color-warning:      #FF9500;
  --color-danger:       #FF3B30;
  --color-danger-light: rgba(255, 59, 48, 0.1);

  /* Alert component */
  --color-alert-warn-bg:        #FFF8EC;
  --color-alert-warn-border:    #FFD580;
  --color-alert-warn-text:      #7A4F00;
  --color-alert-error-bg:       #FFF0EE;
  --color-alert-error-border:   #FFBBB8;
  --color-alert-error-text:     #8B1A17;
  --color-alert-success-bg:     #EDFAF3;
  --color-alert-success-border: #A2EDCA;
  --color-alert-success-text:   #145C37;

  /* Chart */
  --color-chart-principal: #0891B2;
  --color-chart-interest:  #FF9500;
  --color-chart-line:      #30D158;

  /* Header glass */
  --color-header-bg:     rgba(246, 246, 246, 0.92);
  --color-header-border: rgba(0, 0, 0, 0.1);

  /* Shadows — light mode (subtle) */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(8, 145, 178, 0.25);
}

/* ============================================================
   DARK THEME — macOS Sequoia dark
   Applied via <html data-theme="dark">
   ============================================================ */
[data-theme="dark"] {
  /* Backgrounds — slightly lifted for card contrast */
  --color-bg:        #1C1C1E;   /* macOS System Background dark */
  --color-surface:   #313135;   /* Cards — lifted from bg for visible contrast */
  --color-surface-2: #3D3D41;   /* Input fields */

  /* Borders — a touch brighter for card edges to pop */
  --color-border:       rgba(255, 255, 255, 0.13);
  --color-border-focus: #5AC8FA;

  /* Text */
  --color-text-primary:   #F5F5F7;
  --color-text-secondary: rgba(235, 235, 245, 0.6);
  --color-text-tertiary:  rgba(235, 235, 245, 0.35);
  --color-text-inverse:   #FFFFFF;

  /* Accent — teal, much more visible on dark than blue */
  --color-accent:       #5AC8FA;
  --color-accent-hover: #70D7FF;
  --color-accent-light: rgba(90, 200, 250, 0.14);

  /* Semantic */
  --color-success:      #30D158;
  --color-warning:      #FF9F0A;
  --color-danger:       #FF453A;
  --color-danger-light: rgba(255, 69, 58, 0.15);

  /* Alert component */
  --color-alert-warn-bg:        rgba(255, 159, 10, 0.12);
  --color-alert-warn-border:    rgba(255, 159, 10, 0.28);
  --color-alert-warn-text:      #FF9F0A;
  --color-alert-error-bg:       rgba(255, 69, 58, 0.12);
  --color-alert-error-border:   rgba(255, 69, 58, 0.28);
  --color-alert-error-text:     #FF453A;
  --color-alert-success-bg:     rgba(48, 209, 88, 0.12);
  --color-alert-success-border: rgba(48, 209, 88, 0.28);
  --color-alert-success-text:   #30D158;

  /* Chart — teal for principal in dark mode */
  --color-chart-principal: #5AC8FA;
  --color-chart-interest:  #FF9F0A;
  --color-chart-line:      #30D158;

  /* Header glass — dark frosted */
  --color-header-bg:     rgba(28, 28, 30, 0.92);
  --color-header-border: rgba(255, 255, 255, 0.08);

  /* Shadows — dark mode */
  --shadow-xs:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm:    0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg:    0 8px 48px rgba(0, 0, 0, 0.6), 0 2px 16px rgba(0, 0, 0, 0.35);
  --shadow-focus: 0 0 0 3px rgba(90, 200, 250, 0.3);
}