/*
 * Thena Life Assessment Styles
 * Design principles: Relief, Energy, Safety, Agency
 * Not chaotic, loud, or preachy. Clear strategy and momentum.
 */

/* Cascade layer order. Later layers win regardless of source order or
   specificity, so file/load order no longer decides the cascade. */
@layer tokens, base, components, pages, utilities;

@layer tokens {
  :root {
    --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;

    /* Core brand colors - warm, grounded, purposeful */
    --color-primary: #1a1209;
    --color-primary-light: #2e1f0a;
    --color-primary-dark: #0e0904;
    --color-accent: #c4922a;
    --color-accent-light: #d4a84a;
    --color-relevance: #c4922a;
    --color-satisfaction: #5a9e72;
    --color-time-energy: #5b8db8;
    --color-relevance-strong: #7c5cbf;    /* purple slider fill (matches slider_controller.js) */
    --color-satisfaction-strong: #4a7c59; /* green slider fill (matches slider_controller.js) */

    /* Neutrals */
    --color-text: #1a1209;
    --color-text-light: #5c4f3a;
    --color-text-muted: #9c8e7a;
    --color-bg: #ede8db;
    --color-bg-warm: #f5f1e8;
    --color-surface: #fdfaf4;
    --color-white: #ffffff;
    --color-border: #d8d0c0;
    --color-border-light: #e8e2d4;
    --color-divider: #d9d9d9;

    /* Extended palette - consolidated from per-feature literals */
    --color-heading: #2a2a2a;     /* neutral near-black headings */
    --color-ink-soft: #4a4540;    /* soft dark body text */
    --color-text-soft: #8a847a;   /* warm muted text */
    --color-gray: #8a8a8a;        /* neutral mid gray */
    --color-gray-dark: #5a5a5a;   /* neutral dark gray */

    --color-accent-muted: #c8a96e;  /* desaturated gold */
    --color-accent-dark: #854f0b;   /* dark gold text */
    --color-accent-bg: #e8d5a8;     /* pale gold surface */

    --color-positive: #4a7c59;      /* dark green (text/badges) */
    --color-positive-bg: #e8f5ee;   /* mint surface */

    --color-danger: #c0392b;        /* error red */
    --color-danger-bright: #dc2626; /* bright error red */
    --color-danger-bg: #fef2f2;     /* error surface */
    --color-danger-border: #fecaca; /* error border */

    /* Alignment bands — freemium Life Map report (score badge, domain bars,
       chart background bands). Foreground = number/badge; -bg = chart band. */
    --color-align-thriving: #2e7d32;      /* 9+  dark green */
    --color-align-aligned: #5a9e72;       /* 7–9 green */
    --color-align-drifting: #c4922a;      /* 4–7 gold/yellow */
    --color-align-misaligned: #c0392b;    /* 0–4 red */
    --color-align-thriving-bg: #d9ead3;
    --color-align-aligned-bg: #e8f5ee;
    --color-align-drifting-bg: #faf3e0;
    --color-align-misaligned-bg: #fbeae8;

    /* Domain View change-over-time indicators + vertical bar track. */
    --color-trend-up: #2e7d32;    /* positive change — dark green */
    --color-trend-down: #b3541e;  /* negative change — dark orange */
    --color-bar-track: #e2ddd0;   /* light grey vertical-bar background */

    /* Shadows - subtle, grounded */
    --shadow-sm: 0 1px 3px rgba(26, 18, 9, 0.06);
    --shadow-md: 0 4px 16px rgba(26, 18, 9, 0.08);
    --shadow-lg: 0 8px 28px rgba(26, 18, 9, 0.12);

    /* Spacing */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;
  }
}

@layer base {
  * {
    box-sizing: border-box;
  }

  body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
  }
}