/**
 * Design Tokens - SBAFA Personal Finance
 * Inspired by Warm Editorial & Tactile Modernist Aesthetics (referencing SKILL.md)
 * Palette: Warm Wheat Linen / Espresso Charcoal with Burnt Tangerine Terracotta Accents
 */

:root {
  /* Core Brand Identity (Terracotta Tangerine) */
  --accent-primary: #E86034;
  --accent-primary-hover: #D45025;
  --accent-primary-subtle: rgba(232, 96, 52, 0.12);
  --accent-primary-glow: rgba(232, 96, 52, 0.25);
  --accent-primary-text: #FFFFFF;

  /* Secondary Accents */
  --accent-sage: #3D6B52;
  --accent-sage-subtle: rgba(61, 107, 82, 0.14);
  --accent-ochre: #D9822B;
  --accent-ochre-subtle: rgba(217, 130, 43, 0.14);

  /* Semantic Theme Fallbacks (sticking to theme) */
  --accent-emerald: #2E7D5B;
  --accent-emerald-subtle: rgba(46, 125, 91, 0.14);
  --accent-blue: #E86034; /* Aliased to theme brand terracotta */
  --accent-blue-subtle: rgba(232, 96, 52, 0.14);

  /* Functional Financial Signals */
  --signal-income: #2E7D5B;
  --signal-income-subtle: rgba(46, 125, 91, 0.14);
  --signal-expense: #E86034;
  --signal-expense-subtle: rgba(232, 96, 52, 0.14);
  --signal-warning: #D9822B;
  --signal-warning-subtle: rgba(217, 130, 43, 0.14);

  /* Clean Architectural Lighter Gray Theme (Noticeably Lighter & Cleaner) */
  --bg-deep: #1E2126;
  --bg-main: #272A32;
  --bg-surface: #323742;
  --bg-surface-elevated: #3E4452;
  --bg-surface-subtle: rgba(50, 55, 66, 0.85);
  --bg-glass: rgba(39, 42, 50, 0.90);
  --bg-glass-card: rgba(50, 55, 66, 0.75);
  --bg-glass-card-hover: rgba(62, 68, 82, 0.92);

  /* Clean Crisp Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);
  --border-hover: rgba(255, 255, 255, 0.25);
  --border-focus: rgba(232, 96, 52, 0.65);
  --border-accent: rgba(232, 96, 52, 0.40);

  /* High Legibility Clean Typography */
  --text-primary: #FFFFFF;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-dim: #7E8799;
  --text-inverse: #1E2126;

  /* Typography Families */
  --font-family-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Typography Scale */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.844rem;    /* 13.5px */
  --text-base: 0.938rem;  /* 15px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.313rem;    /* 21px */
  --text-2xl: 1.625rem;   /* 26px */
  --text-3xl: 2.125rem;   /* 34px */
  --text-4xl: 2.75rem;    /* 44px */
  --text-5xl: 3.5rem;     /* 56px */

  /* Tactile Modernist Radii (Pills & Squircles) */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 30px;
  --radius-full: 9999px;

  /* Warm Depth Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 18px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 36px -4px rgba(0, 0, 0, 0.6);
  --shadow-glow-terracotta: 0 0 24px -2px rgba(232, 96, 52, 0.35);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.25);

  /* Transitions */
  --transition-fast: 140ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 360ms cubic-bezier(0.34, 1.35, 0.64, 1);

  /* Layout Safe Areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --nav-height: 68px;
}

/**
 * Warm Linen Oatmeal / Wheat Light Theme
 * As shown in the Meetgen editorial mobile app reference!
 */
:root[data-theme="light"],
[data-theme="light"] {
  /* Warm Linen / Oatmeal Surface Canvas */
  --bg-deep: #EDE7DD;
  --bg-main: #F5F1E8;
  --bg-surface: #FAF7F0;
  --bg-surface-elevated: #FFFFFF;
  --bg-surface-subtle: rgba(245, 241, 232, 0.9);
  --bg-glass: rgba(245, 241, 232, 0.88);
  --bg-glass-card: rgba(255, 255, 255, 0.9);
  --bg-glass-card-hover: #FFFFFF;

  /* Subtle Warm Slate Borders */
  --border-subtle: rgba(26, 27, 23, 0.08);
  --border-medium: rgba(26, 27, 23, 0.14);
  --border-hover: rgba(26, 27, 23, 0.25);
  --border-focus: rgba(232, 96, 52, 0.6);
  --border-accent: rgba(232, 96, 52, 0.4);

  /* Deep High-Contrast Charcoal Typography */
  --text-primary: #11120E;
  --text-secondary: #3E3D36;
  --text-muted: #5C5950;
  --text-dim: #78756C;
  --text-inverse: #FFFFFF;

  /* Signals tailored for light linen */
  --signal-income: #1E6B4A;
  --signal-income-subtle: rgba(30, 107, 74, 0.1);
  --signal-expense: #D94D20;
  --signal-expense-subtle: rgba(217, 77, 32, 0.1);
  --signal-warning: #B86B1C;
  --signal-warning-subtle: rgba(184, 107, 28, 0.1);

  /* Soft Organic Depth Shadows */
  --shadow-sm: 0 1px 3px rgba(30, 31, 26, 0.05);
  --shadow-md: 0 4px 16px -2px rgba(30, 31, 26, 0.08);
  --shadow-lg: 0 12px 32px -4px rgba(30, 31, 26, 0.12);
  --shadow-glow-terracotta: 0 0 20px -2px rgba(232, 96, 52, 0.25);
  --shadow-card: 0 1px 4px rgba(30, 31, 26, 0.06);
}