/* =============================================================
   SEEDS DESIGN SYSTEM — TOKENS v2
   Dark mode default + light mode support
   ============================================================= */

/* -------------------------------------------------------------
   DARK MODE (DEFAULT)
   
   Dark mode is the Seeds signature look. Deep navy background
   with gold accents, parchment cards, and serif typography
   creates the "pastoral premium" feel.
   
   All users START in dark mode by default.
   Light mode is opt-in via Settings > Appearance.
   ------------------------------------------------------------- */

:root {
  /* ─── BRAND COLORS (mode-independent) ─── */
  --seeds-gold: #D4AF37;
  --seeds-gold-dark: #B48C1E;      /* Used on light backgrounds for contrast */
  --seeds-green: #3E6B3A;
  --seeds-green-light: #8FB570;
  --seeds-coral: #C8746E;
  
  /* ─── PILLAR COLORS (mode-independent) ─── */
  --pillar-security: #0C4378;
  --pillar-freedom: #1A6B3A;
  --pillar-generosity: #D4AF37;
  --pillar-growth: #3E6B3A;
  --pillar-balance: #7B5EA7;
  --pillar-simplicity: #7B5EA7;
  --pillar-legacy: #8B6914;
  
  /* ─── PARCHMENT (mode-independent — always light) ─── */
  --parchment: #F0EAD2;
  --parchment-text: #2B3A2B;
  --parchment-label: rgba(62, 107, 58, 0.75);
  
  /* ─── DARK MODE TOKENS (default) ─── */
  
  /* Backgrounds */
  --bg-primary: #0E1E3A;              /* Navy — main app bg */
  --bg-secondary: #13254A;             /* Slightly lifted navy for cards */
  --bg-tertiary: #0A1729;              /* Darker for contrast */
  --bg-overlay: rgba(14, 30, 58, 0.85); /* Modal backdrops */
  
  /* Surfaces (card backgrounds) */
  --surface-card: rgba(245, 240, 230, 0.04);
  --surface-card-elevated: rgba(245, 240, 230, 0.06);
  --surface-card-highlight: rgba(212, 175, 55, 0.08);
  --surface-input: rgba(14, 30, 58, 0.6);
  
  /* Borders */
  --border-subtle: rgba(245, 240, 230, 0.06);
  --border-default: rgba(245, 240, 230, 0.1);
  --border-strong: rgba(245, 240, 230, 0.2);
  --border-accent: rgba(212, 175, 55, 0.35);
  --border-accent-strong: rgba(212, 175, 55, 0.5);
  
  /* Text */
  --text-primary: #F5F0E6;             /* Cream — main text */
  --text-secondary: rgba(245, 240, 230, 0.75);
  --text-tertiary: rgba(245, 240, 230, 0.55);
  --text-quaternary: rgba(245, 240, 230, 0.4);
  --text-dim: rgba(245, 240, 230, 0.3);
  --text-on-gold: #0E1E3A;             /* Navy text on gold buttons */
  
  /* Accent text */
  --text-gold: #D4AF37;                /* Gold accents */
  --text-gold-subtle: rgba(212, 175, 55, 0.7);
  --text-gold-label: rgba(212, 175, 55, 0.85);
  --text-green: #8FB570;
  --text-coral: #C8746E;
  
  /* Shadows (subtle in dark mode) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 14px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
  --shadow-gold-glow: 0 0 0 2px rgba(212, 175, 55, 0.25), 0 2px 14px rgba(212, 175, 55, 0.1);
  
  /* Gradients */
  --gradient-gold-hero: linear-gradient(180deg, rgba(212,175,55,0.14) 0%, rgba(212,175,55,0.04) 100%);
  --gradient-gold-card: linear-gradient(180deg, rgba(212,175,55,0.1) 0%, rgba(212,175,55,0.02) 100%);
  --gradient-card-lift: linear-gradient(180deg, #13254A 0%, #0E1E3A 100%);
  
  /* Interactive states */
  --hover-overlay: rgba(245, 240, 230, 0.05);
  --active-overlay: rgba(245, 240, 230, 0.08);
  
  /* ─── TYPOGRAPHY (mode-independent but has light-mode overrides below) ─── */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', monospace;
  --font-wordmark: 'Marcellus SC', serif;
  
  /* Weight scale */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  
  /* Size scale */
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 12px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-xl: 15px;
  --text-2xl: 17px;
  --text-3xl: 22px;
  --text-4xl: 28px;
  --text-5xl: 36px;
  --text-hero: 44px;
  
  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  
  /* Letter spacing */
  --tracking-tight: -0.3px;
  --tracking-normal: 0;
  --tracking-wide: 0.3px;
  --tracking-wider: 1.5px;
  --tracking-widest: 2px;
  
  /* ─── SPACING & SIZING ─── */
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 10px;
  --space-xl: 12px;
  --space-2xl: 14px;
  --space-3xl: 16px;
  --space-4xl: 18px;
  --space-5xl: 20px;
  --space-6xl: 22px;
  
  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-4xl: 18px;
  --radius-hero: 20px;
  --radius-full: 50%;
  
  /* ─── MOTION ─── */
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 350ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------
   LIGHT MODE OVERRIDES
   
   Applied when <html data-theme="light">
   
   Philosophy: warm cream (not pure white), navy text,
   slightly darker gold for contrast, white cards with shadows.
   
   Typography adjustments:
   - Cormorant bumped from 400 to 500 weight for readability
   - Text sizes slightly larger in light mode (older users)
   ------------------------------------------------------------- */

[data-theme="light"] {
  /* Backgrounds — warm cream, not pure white */
  --bg-primary: #FAF6EC;               /* Warm cream (keeps Seeds warmth) */
  --bg-secondary: #FFFFFF;             /* Pure white for cards */
  --bg-tertiary: #F2EBDA;              /* Slightly darker cream for depth */
  --bg-overlay: rgba(14, 30, 58, 0.45); /* Modal backdrop — semi-transparent navy */
  
  /* Surfaces */
  --surface-card: #FFFFFF;             /* Solid white cards */
  --surface-card-elevated: #FFFFFF;
  --surface-card-highlight: rgba(212, 175, 55, 0.08);
  --surface-input: #FFFFFF;
  
  /* Borders */
  --border-subtle: rgba(14, 30, 58, 0.06);
  --border-default: rgba(14, 30, 58, 0.1);
  --border-strong: rgba(14, 30, 58, 0.15);
  --border-accent: rgba(180, 140, 30, 0.35);     /* Darker gold for contrast */
  --border-accent-strong: rgba(180, 140, 30, 0.5);
  
  /* Text — navy replaces cream */
  --text-primary: #0E1E3A;
  --text-secondary: rgba(14, 30, 58, 0.75);
  --text-tertiary: rgba(14, 30, 58, 0.55);
  --text-quaternary: rgba(14, 30, 58, 0.45);
  --text-dim: rgba(14, 30, 58, 0.3);
  --text-on-gold: #0E1E3A;             /* Navy on gold still works */
  
  /* Accent text (gold shifts darker for contrast) */
  --text-gold: #B48C1E;                /* Darker gold readable on cream */
  --text-gold-subtle: rgba(180, 140, 30, 0.75);
  --text-gold-label: rgba(180, 140, 30, 0.9);
  --text-green: #3E6B3A;               /* Darker green for contrast */
  --text-coral: #B55D57;               /* Darker coral for contrast */
  
  /* Shadows — more visible, essential for depth on light bg */
  --shadow-sm: 0 1px 3px rgba(14, 30, 58, 0.06);
  --shadow-md: 0 2px 8px rgba(14, 30, 58, 0.08);
  --shadow-lg: 0 12px 40px rgba(14, 30, 58, 0.15);
  --shadow-gold-glow: 0 0 0 2px rgba(180, 140, 30, 0.2), 0 2px 14px rgba(180, 140, 30, 0.08);
  
  /* Gradients */
  --gradient-gold-hero: linear-gradient(180deg, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.06) 100%);
  --gradient-gold-card: linear-gradient(180deg, rgba(212,175,55,0.12) 0%, rgba(212,175,55,0.03) 100%);
  --gradient-card-lift: linear-gradient(180deg, #FFFFFF 0%, #FAF6EC 100%);
  
  /* Interactive states */
  --hover-overlay: rgba(14, 30, 58, 0.04);
  --active-overlay: rgba(14, 30, 58, 0.08);
  
  /* ─── TYPOGRAPHY ADJUSTMENTS for readability on light bg ─── */
  --weight-regular: 500;               /* Cormorant 400→500 for better rendering on cream */
  --weight-medium: 500;                /* Keep consistent */
  --weight-semibold: 600;
  
  /* Size scale — slightly larger in light mode for older users */
  --text-xs: 11px;                     /* 10→11 */
  --text-sm: 12px;                     /* 11→12 */
  --text-base: 13px;                   /* 12→13 */
  --text-md: 14px;                     /* 13→14 */
  --text-lg: 15px;                     /* 14→15 */
  --text-xl: 16px;                     /* 15→16 */
  --text-2xl: 18px;                    /* 17→18 */
  --text-3xl: 23px;                    /* 22→23 */
  --text-4xl: 29px;                    /* 28→29 */
  --text-5xl: 37px;                    /* 36→37 */
  --text-hero: 46px;                   /* 44→46 */
}

/* -------------------------------------------------------------
   ACCESSIBILITY MODE (opt-in via Settings > Appearance > Larger Text)
   
   When enabled, bumps typography up further for users with
   low vision or reading difficulty. Works on both modes.
   ------------------------------------------------------------- */

[data-a11y="larger"] {
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 17px;
  --text-2xl: 19px;
  --text-3xl: 25px;
  --text-4xl: 32px;
  --text-5xl: 40px;
  --text-hero: 50px;
}

/* -------------------------------------------------------------
   UTILITY CLASSES (semantic, mode-aware)
   
   Components should use these instead of hardcoded colors.
   ------------------------------------------------------------- */

.seeds-surface {
  background: var(--surface-card);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-3xl);
}

.seeds-surface-elevated {
  background: var(--surface-card-elevated);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-md);
}

.seeds-card-parchment {
  background: var(--parchment);
  border-radius: var(--radius-4xl);
  padding: 16px 18px;
  color: var(--parchment-text);
  /* Parchment works identically in both modes */
}

.seeds-button-primary {
  background: var(--seeds-gold);
  color: var(--text-on-gold);
  border: none;
  border-radius: var(--radius-2xl);
  padding: 14px;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--easing-default);
}

.seeds-button-primary:hover {
  opacity: 0.92;
}

.seeds-button-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 12px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.seeds-headline {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.seeds-subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
}

.seeds-label-uppercase {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

.seeds-input-pill {
  background: var(--surface-input);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 12px;
  height: 36px;
  font-size: var(--text-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.seeds-input-pill:focus {
  outline: none;
  border-color: var(--border-accent);
}

/* -------------------------------------------------------------
   SYSTEM-PREFERS-COLOR-SCHEME HANDLING
   
   If user has NOT explicitly chosen light/dark in Settings,
   respect their OS preference. Once they make a choice,
   data-theme overrides this.
   ------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    /* Apply light mode overrides here if user has no preference set */
    /* (Same as [data-theme="light"] rules above — can be imported or duplicated) */
  }
}

/* -------------------------------------------------------------
   HIGH CONTRAST MODE (accessibility)
   
   Triggered by OS accessibility setting OR Settings toggle.
   Bumps contrast for users with visual impairments.
   ------------------------------------------------------------- */

@media (prefers-contrast: high) {
  :root {
    --border-subtle: rgba(245, 240, 230, 0.15);
    --border-default: rgba(245, 240, 230, 0.25);
    --text-tertiary: rgba(245, 240, 230, 0.75);
    --text-quaternary: rgba(245, 240, 230, 0.6);
  }
  
  [data-theme="light"] {
    --border-subtle: rgba(14, 30, 58, 0.15);
    --border-default: rgba(14, 30, 58, 0.25);
    --text-tertiary: rgba(14, 30, 58, 0.75);
    --text-quaternary: rgba(14, 30, 58, 0.6);
  }
}

/* -------------------------------------------------------------
   REDUCED MOTION (accessibility)
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}