/*
 * 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-black: #000000;
    --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 */

    /* Life-domain fills — hex twins of the bubble chart's CATEGORY_COLORS
       (bubble_chart_controller.js). The workspace strategy tracker colors
       goals with these. */
    --color-domain-people: #ead1dc;
    --color-domain-health: #d9ead3;
    --color-domain-stability: #cfe2f3;
    --color-domain-lifestyle: #c3e8e3;
    --color-domain-growth: #fdf0d5;
    --color-domain-belonging: #e2d9f3;

    /* 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);

    /* Height of the assessment progress bar, which pins itself to the top of
       the viewport. Anything else that sticks (the assessment column header)
       offsets by this so it lands underneath rather than behind it. Keep in
       sync with .progress-bar-fixed's padding and content. */
    --progress-bar-h: 42px;

    /* 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;
  }
}