/* ==========================================================================
   IMARA DESIGN SYSTEM - THEME VARIABLES
   ==========================================================================
   HOW TO CUSTOMIZE THIS SITE:
   1. Brand Colors: Change the primary hex codes in :root (--color-navy, 
      --color-emerald, --color-gold, --color-cream). The entire site will adapt.
   2. Typography: Change --font-sans to your preferred font family.
   3. Spacing: Adjust the --space-* scale to change layout density.
   4. Borders & Shadows: Modify --border-subtle and --shadow-paper for card feel.
   ========================================================================== */

:root {
  /* --- Core Brand Color Palette --- */
  --color-navy: #14213D;        /* Dominant brand shade: authority & calm */
  --color-navy-dark: #0D1627;   /* Deepest midnight for headers & dark mode */
  --color-navy-surface: #1B2B4C;/* Elevated navy surface for dark card tiles */
  
  --color-emerald: #1F8A70;     /* Primary CTA & growth accent */
  --color-emerald-hover: #176B57; /* Darker emerald for interactive hover */
  --color-emerald-light: #E8F5F1;/* Soft emerald wash for tags & badges */
  
  --color-gold: #C9A24B;        /* Muted gold for highlights & badges */
  --color-gold-hover: #B08C3A;  /* Deep gold for active states */
  --color-gold-wash: #FAF4E5;   /* Subtle gold tint for notices */

  --color-cream: #F4ECD8;       /* Warm cream background & card tint */
  --color-cream-light: #FAF7EF; /* Crisp light parchment background */
  --color-cream-border: #E5DAC0;/* Warm border line */

  /* Neutral tones */
  --color-white: #FFFFFF;
  --color-gray-100: #F6F7F9;
  --color-gray-200: #E9ECEF;
  --color-gray-400: #9CA3AF;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* --- Semantic Theme Variables (Light Mode Default) --- */
  --bg-page: var(--color-cream-light);
  --bg-surface: var(--color-white);
  --bg-surface-elevated: #FFFFFF;
  --bg-card: var(--color-white);
  --bg-subtle: var(--color-cream);
  --bg-highlight: var(--color-gold-wash);

  --text-main: var(--color-navy);
  --text-muted: #4B5565;
  --text-inverse: var(--color-cream-light);
  --text-accent: var(--color-emerald);

  --border-color: rgba(20, 33, 61, 0.15);
  --border-subtle: rgba(20, 33, 61, 0.08);
  --border-focus: var(--color-emerald);

  --shadow-sm: 0 1px 3px rgba(20, 33, 61, 0.05);
  --shadow-paper: 0 4px 18px rgba(20, 33, 61, 0.06), 0 1px 3px rgba(20, 33, 61, 0.04);
  --shadow-elevated: 0 12px 28px rgba(20, 33, 61, 0.10), 0 2px 6px rgba(20, 33, 61, 0.05);

  /* --- Typography Scale --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* --- Spacing Scale --- */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs:  0.5rem;  /* 8px */
  --space-sm:  0.75rem; /* 12px */
  --space-md:  1rem;    /* 16px */
  --space-lg:  1.5rem;  /* 24px */
  --space-xl:  2rem;    /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4.5rem;  /* 72px */

  /* --- Border Radius Scale --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Minimum interactive target size (accessibility) */
  --target-min: 44px;
}

/* ==========================================================================
   Dark Theme (Activated via data-theme="dark" attribute or system preference)
   ========================================================================== */
[data-theme="dark"] {
  --bg-page: #0C1424;
  --bg-surface: #14213D;
  --bg-surface-elevated: #1B2B4C;
  --bg-card: #14213D;
  --bg-subtle: #182746;
  --bg-highlight: rgba(201, 162, 75, 0.15);

  --text-main: #F4ECD8;
  --text-muted: #A3B1C6;
  --text-inverse: #14213D;
  --text-accent: #2FB291;

  --border-color: rgba(244, 236, 216, 0.16);
  --border-subtle: rgba(244, 236, 216, 0.08);
  --border-focus: #2FB291;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-paper: 0 4px 18px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 12px 28px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #0C1424;
    --bg-surface: #14213D;
    --bg-surface-elevated: #1B2B4C;
    --bg-card: #14213D;
    --bg-subtle: #182746;
    --bg-highlight: rgba(201, 162, 75, 0.15);

    --text-main: #F4ECD8;
    --text-muted: #A3B1C6;
    --text-inverse: #14213D;
    --text-accent: #2FB291;

    --border-color: rgba(244, 236, 216, 0.16);
    --border-subtle: rgba(244, 236, 216, 0.08);
    --border-focus: #2FB291;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-paper: 0 4px 18px rgba(0, 0, 0, 0.45);
    --shadow-elevated: 0 12px 28px rgba(0, 0, 0, 0.6);
  }
}