/*
 * Theming system — two layers:
 *   1. Primitive tokens (palette): raw colors, do not use directly in components.
 *   2. Semantic tokens: what UI actually references (--bg, --fg, --accent, ...).
 *      Each theme redefines the semantic layer; primitives stay the same.
 *
 * To add a new theme:
 *   - Add a block: :root[data-theme="<name>"] { --bg: ...; --fg: ...; ... }
 *   - Add its id to THEMES in app.js so the switcher cycles through it.
 *
 * Components in style.css must reference ONLY semantic tokens (var(--bg) etc),
 * never primitive ones (var(--gray-900)). This keeps themes a one-file change.
 */

/* ── Primitive palette ─────────────────────────────────────────────────── */
:root {
    --gray-50:  #fafafa;
    --gray-100: #f1f1f1;
    --gray-200: #e5e5e5;
    --gray-400: #999;
    --gray-500: #666;
    --gray-700: #333;
    --gray-800: #1f1f1f;
    --gray-900: #1a1a1a;
    --gray-950: #0f0f0f;

    --blue-400: #60a5fa;
    --blue-500: #2563eb;

    --red-400: #f87171;
    --red-500: #dc2626;

    --gold-400:  #c9a961;
    --ink-50:    #ece8e0;
    --ink-400:   #7a756c;
    --ink-700:   #2a2826;
    --ink-800:   #1a1917;
    --ink-900:   #100f0e;

    --white:    #ffffff;
    --black:    #000000;
}

/* ── Semantic tokens: light (default) ──────────────────────────────────── */
:root,
:root[data-theme="light"] {
    --bg:          var(--gray-50);
    --bg-elevated: var(--white);
    --fg:          var(--gray-900);
    --muted:       var(--gray-500);
    --border:      var(--gray-200);
    --accent:      var(--blue-500);
    --accent-fg:   var(--white);
    --accent-gradient: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--black)));
    --danger:      var(--red-500);
    --danger-fg:   var(--white);
    --warn:        #d97706;
    --warn-fg:     var(--white);
    --success:     #2f8f5e;
    --success-fg:  var(--white);
    --code-bg:     var(--gray-100);
    --image-outline: rgba(0, 0, 0, 0.1);

    --font-base:    "Montserrat", system-ui, -apple-system, sans-serif;
    --font-heading: "Montserrat", system-ui, -apple-system, sans-serif;

    /* Shadow tokens — derive from --fg so a theme change retones shadows too.
       Use via `color-mix(in srgb, var(--shadow-color) 22%, transparent)` so
       each call site picks its own opacity. */
    --shadow-color: var(--gray-900);

    /* Cube backgrounds — task/rule state */
    --cube-bg-blocked:       color-mix(in srgb, var(--muted) 18%, var(--bg-elevated));

    /* Cube priority borders — medium = dashed, high = solid accent */
    --cube-border-prio-medium: var(--accent);
    --cube-border-prio-high:   var(--accent);

    /* Cube icon colors — fixed per-icon contrast palette */
    --icon-link-relates:      var(--blue-500);
    --icon-blocked:           var(--red-500);
    --icon-blocks:            #ea580c;
    --icon-deadline-miss:     #7c3aed;
    --icon-blocker-forward:   #b45309;
    --icon-author-rule:       #0d9488;
    --icon-done:              var(--success);

    /* Capacity plank states (calendar day X/Y badge) */
    --capacity-overfull:  var(--danger);
    --capacity-full:      var(--muted);
    --capacity-underfull: var(--warn);

    /* Line-chart series (weight page — one hue per measure, small multiples) */
    --chart-line-weight: var(--accent);
    --chart-line-fat:    var(--icon-author-rule);
    --chart-grid:        var(--border);
    --chart-dot-ring:    var(--bg-elevated);

    /* Day-rating heatmap (life-mood page) — diverging danger→success scale,
       since 1-5 has a meaningful midpoint (a so-so day), not just "more". */
    --mood-empty: var(--border);
    --mood-1: color-mix(in srgb, var(--danger) 75%, var(--bg-elevated));
    --mood-2: color-mix(in srgb, var(--danger) 35%, var(--bg-elevated));
    --mood-3: color-mix(in srgb, var(--warn) 40%, var(--bg-elevated));
    --mood-4: color-mix(in srgb, var(--success) 35%, var(--bg-elevated));
    --mood-5: color-mix(in srgb, var(--success) 75%, var(--bg-elevated));

    /* Generic sequential activity heatmap (js/shared/heatmap.js default
       palette) — plain intensity, not diverging like mood above: darker =
       more/higher, no meaningful midpoint. Used by any day/week heatmap
       that doesn't supply its own colorVar (weight, pull-up count, ...). */
    --heatmap-empty: var(--border);
    --heatmap-1: color-mix(in srgb, var(--accent) 20%, var(--bg-elevated));
    --heatmap-2: color-mix(in srgb, var(--accent) 40%, var(--bg-elevated));
    --heatmap-3: color-mix(in srgb, var(--accent) 60%, var(--bg-elevated));
    --heatmap-4: color-mix(in srgb, var(--accent) 80%, var(--bg-elevated));
    --heatmap-5: var(--accent);

    /* Area-blocks (js/shared/area_blocks.js) sequential color choices —
       same color-mix formula as --heatmap-* above (which doubles as the
       "blue" choice), one more scale per selectable palette so a custom
       heatmap block isn't stuck with blue. */
    --areablock-green-empty: var(--border);
    --areablock-green-1: color-mix(in srgb, var(--success) 20%, var(--bg-elevated));
    --areablock-green-2: color-mix(in srgb, var(--success) 40%, var(--bg-elevated));
    --areablock-green-3: color-mix(in srgb, var(--success) 60%, var(--bg-elevated));
    --areablock-green-4: color-mix(in srgb, var(--success) 80%, var(--bg-elevated));
    --areablock-green-5: var(--success);
    --areablock-red-empty: var(--border);
    --areablock-red-1: color-mix(in srgb, var(--danger) 20%, var(--bg-elevated));
    --areablock-red-2: color-mix(in srgb, var(--danger) 40%, var(--bg-elevated));
    --areablock-red-3: color-mix(in srgb, var(--danger) 60%, var(--bg-elevated));
    --areablock-red-4: color-mix(in srgb, var(--danger) 80%, var(--bg-elevated));
    --areablock-red-5: var(--danger);
    --areablock-orange-empty: var(--border);
    --areablock-orange-1: color-mix(in srgb, var(--warn) 20%, var(--bg-elevated));
    --areablock-orange-2: color-mix(in srgb, var(--warn) 40%, var(--bg-elevated));
    --areablock-orange-3: color-mix(in srgb, var(--warn) 60%, var(--bg-elevated));
    --areablock-orange-4: color-mix(in srgb, var(--warn) 80%, var(--bg-elevated));
    --areablock-orange-5: var(--warn);
}

/* ── Semantic tokens: dark ─────────────────────────────────────────────── */
:root[data-theme="dark"] {
    --bg:          var(--gray-950);
    --bg-elevated: var(--gray-800);
    --fg:          var(--gray-50);
    --muted:       var(--gray-400);
    --border:      var(--gray-700);
    --accent:      var(--blue-400);
    --accent-fg:   var(--gray-950);
    --accent-gradient: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--black)));
    --danger:      var(--red-400);
    --danger-fg:   var(--gray-950);
    --warn:        #fbbf24;
    --warn-fg:     var(--gray-950);
    --success:     #4fb87c;
    --success-fg:  var(--gray-950);
    --code-bg:     var(--gray-800);
    --image-outline: rgba(255, 255, 255, 0.1);

    --font-base:    "Montserrat", system-ui, -apple-system, sans-serif;
    --font-heading: "Montserrat", system-ui, -apple-system, sans-serif;

    --shadow-color: var(--black);

    /* Cube backgrounds — task/rule state */
    --cube-bg-blocked:         color-mix(in srgb, var(--muted) 22%, var(--bg-elevated));

    /* Cube priority borders */
    --cube-border-prio-medium: var(--accent);
    --cube-border-prio-high:   var(--accent);

    /* Cube icon colors */
    --icon-link-relates:      #60a5fa;
    --icon-blocked:           #f87171;
    --icon-blocks:            #fb923c;
    --icon-deadline-miss:     #a78bfa;
    --icon-blocker-forward:   #fbbf24;
    --icon-author-rule:       #2dd4bf;
    --icon-done:              var(--success);

    /* Capacity plank states */
    --capacity-overfull:  var(--danger);
    --capacity-full:      var(--muted);
    --capacity-underfull: var(--warn);

    /* Line-chart series (weight page) */
    --chart-line-weight: var(--accent);
    --chart-line-fat:    var(--icon-author-rule);
    --chart-grid:        var(--border);
    --chart-dot-ring:    var(--bg-elevated);

    /* Day-rating heatmap (life-mood page) */
    --mood-empty: var(--border);
    --mood-1: color-mix(in srgb, var(--danger) 75%, var(--bg-elevated));
    --mood-2: color-mix(in srgb, var(--danger) 35%, var(--bg-elevated));
    --mood-3: color-mix(in srgb, var(--warn) 40%, var(--bg-elevated));
    --mood-4: color-mix(in srgb, var(--success) 35%, var(--bg-elevated));
    --mood-5: color-mix(in srgb, var(--success) 75%, var(--bg-elevated));

    /* Generic sequential activity heatmap (js/shared/heatmap.js default
       palette) — plain intensity, not diverging like mood above: darker =
       more/higher, no meaningful midpoint. Used by any day/week heatmap
       that doesn't supply its own colorVar (weight, pull-up count, ...). */
    --heatmap-empty: var(--border);
    --heatmap-1: color-mix(in srgb, var(--accent) 20%, var(--bg-elevated));
    --heatmap-2: color-mix(in srgb, var(--accent) 40%, var(--bg-elevated));
    --heatmap-3: color-mix(in srgb, var(--accent) 60%, var(--bg-elevated));
    --heatmap-4: color-mix(in srgb, var(--accent) 80%, var(--bg-elevated));
    --heatmap-5: var(--accent);

    /* Area-blocks (js/shared/area_blocks.js) sequential color choices —
       same color-mix formula as --heatmap-* above (which doubles as the
       "blue" choice), one more scale per selectable palette so a custom
       heatmap block isn't stuck with blue. */
    --areablock-green-empty: var(--border);
    --areablock-green-1: color-mix(in srgb, var(--success) 20%, var(--bg-elevated));
    --areablock-green-2: color-mix(in srgb, var(--success) 40%, var(--bg-elevated));
    --areablock-green-3: color-mix(in srgb, var(--success) 60%, var(--bg-elevated));
    --areablock-green-4: color-mix(in srgb, var(--success) 80%, var(--bg-elevated));
    --areablock-green-5: var(--success);
    --areablock-red-empty: var(--border);
    --areablock-red-1: color-mix(in srgb, var(--danger) 20%, var(--bg-elevated));
    --areablock-red-2: color-mix(in srgb, var(--danger) 40%, var(--bg-elevated));
    --areablock-red-3: color-mix(in srgb, var(--danger) 60%, var(--bg-elevated));
    --areablock-red-4: color-mix(in srgb, var(--danger) 80%, var(--bg-elevated));
    --areablock-red-5: var(--danger);
    --areablock-orange-empty: var(--border);
    --areablock-orange-1: color-mix(in srgb, var(--warn) 20%, var(--bg-elevated));
    --areablock-orange-2: color-mix(in srgb, var(--warn) 40%, var(--bg-elevated));
    --areablock-orange-3: color-mix(in srgb, var(--warn) 60%, var(--bg-elevated));
    --areablock-orange-4: color-mix(in srgb, var(--warn) 80%, var(--bg-elevated));
    --areablock-orange-5: var(--warn);
}

/* ── Semantic tokens: golden ───────────────────────────────────────────── */
:root[data-theme="golden"] {
    --bg:          var(--ink-900);
    --bg-elevated: var(--ink-800);
    --fg:          var(--ink-50);
    --muted:       var(--ink-400);
    --border:      var(--ink-700);
    --accent:      var(--gold-400);
    --accent-fg:   var(--ink-900);
    --accent-gradient: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--black)));
    --danger:      var(--red-400);
    --danger-fg:   var(--ink-900);
    --warn:        #f59e0b;
    --warn-fg:     var(--ink-900);
    --success:     #6fc28c;
    --success-fg:  var(--ink-900);
    --code-bg:     var(--ink-800);
    --image-outline: rgba(255, 255, 255, 0.1);

    --font-base:    "Montserrat", system-ui, -apple-system, sans-serif;
    --font-heading: "Montserrat", system-ui, -apple-system, sans-serif;

    --shadow-color: var(--ink-900);

    /* Cube backgrounds — task/rule state */
    --cube-bg-blocked:         color-mix(in srgb, var(--ink-700) 75%, var(--bg-elevated));

    /* Cube priority borders */
    --cube-border-prio-medium: var(--gold-400);
    --cube-border-prio-high:   var(--gold-400);

    /* Cube icon colors — golden palette */
    --icon-link-relates:      var(--gold-400);
    --icon-blocked:           #f87171;
    --icon-blocks:            #f59e0b;
    --icon-deadline-miss:     #c4b5fd;
    --icon-blocker-forward:   #fde68a;
    --icon-author-rule:       #5eead4;
    --icon-done:              var(--success);

    /* Capacity plank states */
    --capacity-overfull:  var(--danger);
    --capacity-full:      var(--ink-400);
    --capacity-underfull: var(--warn);

    /* Line-chart series (weight page) */
    --chart-line-weight: var(--accent);
    --chart-line-fat:    var(--icon-author-rule);
    --chart-grid:        var(--border);
    --chart-dot-ring:    var(--bg-elevated);

    /* Day-rating heatmap (life-mood page) */
    --mood-empty: var(--border);
    --mood-1: color-mix(in srgb, var(--danger) 75%, var(--bg-elevated));
    --mood-2: color-mix(in srgb, var(--danger) 35%, var(--bg-elevated));
    --mood-3: color-mix(in srgb, var(--warn) 40%, var(--bg-elevated));
    --mood-4: color-mix(in srgb, var(--success) 35%, var(--bg-elevated));
    --mood-5: color-mix(in srgb, var(--success) 75%, var(--bg-elevated));

    /* Generic sequential activity heatmap (js/shared/heatmap.js default
       palette) — plain intensity, not diverging like mood above: darker =
       more/higher, no meaningful midpoint. Used by any day/week heatmap
       that doesn't supply its own colorVar (weight, pull-up count, ...). */
    --heatmap-empty: var(--border);
    --heatmap-1: color-mix(in srgb, var(--accent) 20%, var(--bg-elevated));
    --heatmap-2: color-mix(in srgb, var(--accent) 40%, var(--bg-elevated));
    --heatmap-3: color-mix(in srgb, var(--accent) 60%, var(--bg-elevated));
    --heatmap-4: color-mix(in srgb, var(--accent) 80%, var(--bg-elevated));
    --heatmap-5: var(--accent);

    /* Area-blocks (js/shared/area_blocks.js) sequential color choices —
       same color-mix formula as --heatmap-* above (which doubles as the
       "blue" choice), one more scale per selectable palette so a custom
       heatmap block isn't stuck with blue. */
    --areablock-green-empty: var(--border);
    --areablock-green-1: color-mix(in srgb, var(--success) 20%, var(--bg-elevated));
    --areablock-green-2: color-mix(in srgb, var(--success) 40%, var(--bg-elevated));
    --areablock-green-3: color-mix(in srgb, var(--success) 60%, var(--bg-elevated));
    --areablock-green-4: color-mix(in srgb, var(--success) 80%, var(--bg-elevated));
    --areablock-green-5: var(--success);
    --areablock-red-empty: var(--border);
    --areablock-red-1: color-mix(in srgb, var(--danger) 20%, var(--bg-elevated));
    --areablock-red-2: color-mix(in srgb, var(--danger) 40%, var(--bg-elevated));
    --areablock-red-3: color-mix(in srgb, var(--danger) 60%, var(--bg-elevated));
    --areablock-red-4: color-mix(in srgb, var(--danger) 80%, var(--bg-elevated));
    --areablock-red-5: var(--danger);
    --areablock-orange-empty: var(--border);
    --areablock-orange-1: color-mix(in srgb, var(--warn) 20%, var(--bg-elevated));
    --areablock-orange-2: color-mix(in srgb, var(--warn) 40%, var(--bg-elevated));
    --areablock-orange-3: color-mix(in srgb, var(--warn) 60%, var(--bg-elevated));
    --areablock-orange-4: color-mix(in srgb, var(--warn) 80%, var(--bg-elevated));
    --areablock-orange-5: var(--warn);
}