/*
 * Evolve Evolution — Shared Design Tokens
 * 
 * Both sites import this file. Site-specific overrides go in each site's styles/.
 * Based on "embracing your whole spectrum" concept with origami brand elements.
 * 
 * PENDING: Refinement after Annica provides logo assets and colour preferences.
 * Current palette is a working starting point based on conversation context.
 */

:root {
  /* ── Primary Palette ── */
  /* Warm, grounded tones that feel natural and professional without being clinical */
  --color-primary: #2A7A76;         /* Teal — grounding, health, calm */
  --color-primary-dark: #1A5653;    /* Deep teal — headers, strong emphasis */
  --color-primary-light: #E8F4F3;   /* Light teal — backgrounds, subtle highlights */
  
  /* ── Accent ── */
  --color-accent: #D4956A;          /* Warm terracotta — CTAs, highlights, warmth */
  --color-accent-light: #F5E6D8;    /* Soft warm — hover states, gentle emphasis */
  
  /* ── Spectrum Colours (coaching site primarily) ── */
  /* The "whole spectrum" concept — used sparingly as accent touches */
  --color-spectrum-1: #C75B5B;      /* Warm red */
  --color-spectrum-2: #D4956A;      /* Terracotta (same as accent) */
  --color-spectrum-3: #D4C26A;      /* Warm gold */
  --color-spectrum-4: #6AAD6A;      /* Natural green */
  --color-spectrum-5: #2A7A76;      /* Teal (same as primary) */
  --color-spectrum-6: #5B7FC7;      /* Calm blue */
  --color-spectrum-7: #8B6AAD;      /* Soft purple */

  /* ── Journey Stage Accents (Rock → Boat → Swan → Bird) ── */
  /* From Report 6 (Origami Brand Metaphor), contrast-adjusted.
   * Each stage maps to an emotional tone and colour palette segment.
   * Usage: borders, icons, accent backgrounds — never as body text colour.
   *
   * Rock  = grounding, safety, predictability
   * Boat  = orientation, guided movement, tentative hope
   * Swan  = competence, confidence, calm pride
   * Bird  = autonomy, lightness, possibility
   */
  --color-stage-rock:       var(--color-primary-dark);  /* #1A5653 — deep teal, grounded */
  --color-stage-rock-bg:    var(--color-primary-light);  /* #E8F4F3 — calm surface */
  --color-stage-boat:       #336CA0;   /* Sky blue — orientation (5.54:1 on white ✓ AA) */
  --color-stage-boat-bg:    #E8F0F8;   /* Soft blue surface */
  --color-stage-swan:       var(--color-primary);        /* #2A7A76 — teal, confident (5.07:1 ✓ AA) */
  --color-stage-swan-bg:    #FFF0EB;   /* Warm coral tint surface */
  --color-stage-swan-accent: #D96C6C;  /* Bloom coral — warmth (3.33:1 non-text ✓) */
  --color-stage-bird:       #336CA0;   /* Sky blue — openness */
  --color-stage-bird-bg:    #FDF6EC;   /* Warm amber tint surface */
  --color-stage-bird-accent: #B8822A;  /* Dawn amber — possibility (3.35:1 non-text ✓) */
  
  /* ── Neutrals ── */
  --color-text: #2D2D2D;            /* Primary text — near-black, not harsh */
  --color-text-secondary: #555555;  /* Secondary text, captions */
  --color-text-light: #888888;      /* Tertiary, metadata */
  --color-border: #D0D0D0;          /* Borders, dividers */
  --color-background: #FFFFFF;      /* Page background */
  --color-surface: #FAFAF9;         /* Card/section backgrounds — warm white */
  
  /* ── Semantic ── */
  --color-heading: var(--color-primary-dark);

  --color-success: #1A7F37;
  --color-success-bg: #DAFBE1;
  --color-warning: #9A6700;
  --color-warning-bg: #FFF8C5;
  --color-error: #CF222E;
  --color-error-bg: #FFEBE9;

  /* ── Code Blocks (dark bg in both themes) ── */
  --color-code-bg: #1A2E2D;
  --color-code-text: #E8F4F3;

  /* ── Typography ── */
  --font-heading: 'Georgia', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
  
  /* Type scale (1.25 ratio) */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.6;
  --line-height-reading: 1.75;
  --line-height-relaxed: 1.8;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ── Spacing ── */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  
  /* ── Layout ── */
  --max-width-content: 42rem;      /* ~672px — comfortable reading width */
  --max-width-wide: 64rem;         /* ~1024px — wider sections */
  --max-width-page: 75rem;         /* ~1200px — page container */
  
  /* ── Z-Index ── */
  --z-below: -1;
  --z-base: 0;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  
  /* ── Borders & Radius ── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  
  --border-thin: 1px solid var(--color-border);
  --border-accent: 2px solid var(--color-accent);
  
  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 300ms ease;

  color-scheme: light;
}

/* ── Dark Theme (hub pages only) ── */
[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #3AADA8;
  --color-primary-dark: #B2E0DE;
  --color-primary-light: #1A2E2D;

  --color-accent: #D4956A;
  --color-accent-light: #3D2E22;

  --color-heading: #B2E0DE;

  --color-text: #E0E0E0;
  --color-text-secondary: #A0A0A0;
  --color-text-light: #787878;
  --color-border: #3A3A3A;
  --color-background: #1A1A1A;
  --color-surface: #222222;

  --color-success: #3FB950;
  --color-success-bg: #1A2E1F;
  --color-warning: #D29922;
  --color-warning-bg: #2E2510;
  --color-error: #F85149;
  --color-error-bg: #2E1516;

  --color-code-bg: #0D1B1A;
  --color-code-text: #B2E0DE;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}