/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — Cloud Dancer + Enneagram Type Colors
   "Human-Centered Digital Sanctuary" Design System
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ── Light Theme (default) ── */
:root {
    /* Primary Palette — Cloud Dancer warm white */
    --cloud-dancer: #F0ECE5;
    --sage-green: #8B9E8B;
    --muted-blue: #7B8FA2;
    --sand: #C4B5A0;
    --stone: #8C8279;

    /* Primary Accent (replaces Indigo #6366f1) */
    --primary-accent: #8B9E8B;
    --primary-accent-light: #A3B3A3;
    --primary-accent-dark: #6F856F;
    --primary-accent-alpha: rgba(139, 158, 139, 0.3);

    /* Semantic Colors */
    --primary-color: var(--primary-accent);
    --primary-light: rgba(139, 158, 139, 0.12);
    --primary-dark: #6F856F;
    --primary-rgb: 139, 158, 139;
    --primary-gradient-end: #818cf8;

    /* Sign-in brand panel */
    --auth-panel-dark: #3D5240;
    --auth-panel-mid: #5A7560;
    --auth-panel-light: #7B947B;

    /* Backgrounds */
    --body-bg: #F4F1EB;
    --header-bg: #FDFCFA;
    --card-bg: #FDFCFA;
    --surface-bg: #F7F4EF;
    --surface-light: #FAF8F5;

    /* Text */
    --text-color: #2C2825;
    --text-muted: #6B6560;
    --text-tertiary: #9A938C;
    --text-on-primary: #ffffff;

    /* Borders */
    --border-color: #E2DDD6;
    --border-light: #EDE9E3;

    /* Interactive States */
    --hover-bg: rgba(139, 158, 139, 0.08);
    --active-bg: rgba(139, 158, 139, 0.12);
    --active-bg-strong: rgba(139, 158, 139, 0.18);
    --focus-ring: rgba(139, 158, 139, 0.4);

    /* Status Colors */
    --error-color: #B5534A;
    --error-light: rgba(181, 83, 74, 0.08);
    --error-rgb: 181, 83, 74;
    --success-color: #5F8C5F;
    --success-light: rgba(95, 140, 95, 0.1);
    --success-dark: #4A7A4A;
    --success-rgb: 95, 140, 95;
    --warning-color: #B8923E;
    --warning-light: rgba(184, 146, 62, 0.1);
    --warning-dark: #9A7A30;
    --warning-rgb: 184, 146, 62;
    --info-color: var(--muted-blue);
    --info-light: rgba(123, 143, 162, 0.1);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(44, 40, 37, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(44, 40, 37, 0.06), 0 2px 4px -2px rgba(44, 40, 37, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(44, 40, 37, 0.08), 0 4px 6px -4px rgba(44, 40, 37, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(44, 40, 37, 0.1), 0 8px 10px -6px rgba(44, 40, 37, 0.04);

    /* Radii */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;
    --radius-full: 9999px;

    /* Light-specific RGB (for rgba() usage) */
    --light-rgb: 244, 241, 235;

    /* ── Enneagram Type Colors ── */
    --type-1-color: #6B8BA4; /* Reformer — Steel blue */
    --type-2-color: #D4827A; /* Helper — Warm rose */
    --type-3-color: #D4A843; /* Achiever — Amber gold */
    --type-4-color: #4A5A8A; /* Individualist — Deep indigo */
    --type-5-color: #5B9EA6; /* Investigator — Cool teal */
    --type-6-color: #8B7355; /* Loyalist — Earth brown */
    --type-7-color: #D4895A; /* Enthusiast — Warm orange */
    --type-8-color: #8B3A3A; /* Challenger — Deep crimson */
    --type-9-color: #8B9E8B; /* Peacemaker — Sage green */

    /* Enneagram Type Light Backgrounds */
    --type-1-light: rgba(107, 139, 164, 0.12);
    --type-2-light: rgba(212, 130, 122, 0.12);
    --type-3-light: rgba(212, 168, 67, 0.12);
    --type-4-light: rgba(74, 90, 138, 0.12);
    --type-5-light: rgba(91, 158, 166, 0.12);
    --type-6-light: rgba(139, 115, 85, 0.12);
    --type-7-light: rgba(212, 137, 90, 0.12);
    --type-8-light: rgba(139, 58, 58, 0.12);
    --type-9-light: rgba(139, 158, 139, 0.12);

    /* ── Typography Scale (14px base) ── */
    --fs-overline: 0.7857rem;      /* 11px */
    --fs-xs: 0.8571rem;            /* 12px - caption, badges, tags */
    --fs-form: 0.9286rem;          /* 13px - form labels, inputs */
    --fs-sm: 1rem;                 /* 14px - body small / body default */
    --fs-base: 1rem;               /* 14px - body text, labels */
    --fs-md: 1.1429rem;            /* 16px - subheadings */
    --fs-lg: 1.4286rem;            /* 20px - H3 */
    --fs-xl: 1.7143rem;            /* 24px - H2 */
    --fs-2xl: 2.2857rem;           /* 32px - H1 */
    --fs-3xl: 3.1429rem;           /* 44px - display/hero */
    --fs-display-sm: 1.7143rem;    /* 24px - display mobile */

    /* Font Family */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Letter Spacing */
    --ls-tight: -0.03em;           /* display */
    --ls-snug: -0.02em;            /* h1 */
    --ls-slight: -0.01em;          /* h2, h3 */
    --ls-normal: 0em;              /* h4, body */
    --ls-wide: 0.01em;             /* body small */
    --ls-wider: 0.02em;            /* label, caption */
    --ls-widest: 0.10em;           /* overline (UPPERCASE) */

    /* Line Heights */
    --lh-display: 1.15;
    --lh-h1: 1.20;
    --lh-h2: 1.25;
    --lh-h3: 1.30;
    --lh-h4: 1.35;
    --lh-body-lg: 1.70;
    --lh-body: 1.65;
    --lh-body-sm: 1.60;
    --lh-label: 1.40;
    --lh-caption: 1.50;

    /* ── Spacing ── */
    --spacing-xs: 0.125rem;
    --spacing-sm: 0.25rem;
    --spacing-md: 0.5rem;
    --spacing-lg: 0.75rem;
    --spacing-xl: 1rem;
    --spacing-2xl: 1.25rem;
    --spacing-3xl: 2rem;

    /* Transitions */
    --transition-fast: 0.1s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ── Deep Forest Dark Theme ── */
[data-theme="dark"] {
    /* Backgrounds — Deep Forest sage tones */
    --body-bg: #1A1F1E;
    --header-bg: #242B29;
    --card-bg: #242B29;
    --surface-bg: #2D3432;
    --surface-light: #353C3A;

    /* Text — Warm Stone off-whites */
    --text-color: #E8E5E0;
    --text-muted: #A0A8A3;
    --text-tertiary: #7F8C8D;
    --text-on-primary: #ffffff;

    /* Borders — dark sage-warm */
    --border-color: #3A4240;
    --border-light: #2A3230;

    /* Primary Accent — slightly brighter for dark bg */
    --primary-accent: #A3B3A3;
    --primary-accent-light: #B8C5B8;
    --primary-accent-dark: #8B9E8B;
    --primary-accent-alpha: rgba(163, 179, 163, 0.3);

    --primary-color: var(--primary-accent);
    --primary-light: rgba(163, 179, 163, 0.15);
    --primary-dark: #8B9E8B;
    --primary-rgb: 163, 179, 163;

    /* Interactive States */
    --hover-bg: rgba(163, 179, 163, 0.1);
    --active-bg: rgba(163, 179, 163, 0.15);
    --active-bg-strong: rgba(163, 179, 163, 0.22);
    --focus-ring: rgba(163, 179, 163, 0.4);

    /* Status Colors — adjusted for dark backgrounds */
    --error-color: #D4736A;
    --error-light: rgba(212, 115, 106, 0.12);
    --error-rgb: 212, 115, 106;
    --success-color: #7AAF7A;
    --success-light: rgba(122, 175, 122, 0.12);
    --success-dark: #5F8C5F;
    --success-rgb: 122, 175, 122;
    --warning-color: #D4AB52;
    --warning-light: rgba(212, 171, 82, 0.12);
    --warning-dark: #B8923E;
    --warning-rgb: 212, 171, 82;
    --info-color: #94ADC2;
    --info-light: rgba(148, 173, 194, 0.12);

    /* Shadows — heavier for dark theme */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45);

    /* Enneagram Type Colors — brightened for dark backgrounds */
    --type-1-color: #89A8C0;
    --type-2-color: #E09B93;
    --type-3-color: #E0BD5C;
    --type-4-color: #6A7AB0;
    --type-5-color: #7BBAC2;
    --type-6-color: #A8926E;
    --type-7-color: #E0A273;
    --type-8-color: #B05555;
    --type-9-color: #A3B3A3;

    --type-1-light: rgba(137, 168, 192, 0.15);
    --type-2-light: rgba(224, 155, 147, 0.15);
    --type-3-light: rgba(224, 189, 92, 0.15);
    --type-4-light: rgba(106, 122, 176, 0.15);
    --type-5-light: rgba(123, 186, 194, 0.15);
    --type-6-light: rgba(168, 146, 110, 0.15);
    --type-7-light: rgba(224, 162, 115, 0.15);
    --type-8-light: rgba(176, 85, 85, 0.15);
    --type-9-light: rgba(163, 179, 163, 0.15);

    /* Dark-specific RGB */
    --light-rgb: 36, 43, 41;
}

/* ── Base Font Size ── */
html {
    font-size: 14px;
}