/* ==========================================================================
   THEMING CONVENTION (light + dark)
   --------------------------------------------------------------------------
   Theming is token-first. `:root` below defines every semantic token in its
   LIGHT value; the `[data-theme="dark"]` block further down RE-DEFINES those
   same tokens with dark (gb-*) values. Component CSS consumes var(--token)
   and stays theme-agnostic — it flips automatically when the tokens change.

   RULE OF THUMB:
   1. If dark only needs a different *value*, add/repoint a token here. Do NOT
      write a scoped rule.
   2. Only when dark needs a structurally *different rule* (e.g. filled vs
      outline buttons, accent rail vs fill — where the colour moves to a
      different property) add a `[data-theme="dark"] .component` block,
      co-located at the bottom of that component's own CSS file under a
      "Dark mode —" comment. Keep the colour decision in a token, the
      structural rule in the component. Do not start a monolithic dark.css.
   ========================================================================== */

/* The light token set is the default (:root). Tagging any element with
   data-theme="light" re-applies it within that subtree — used to keep a "light
   island" (e.g. the viewer's highlight cards) light inside a dark page. */
:root,
[data-theme="light"] {
  /* Native form controls + scrollbars follow this */
  color-scheme: light;

  /* ==========================================================================
     Design System - Semantic Colors
     These reference the palette.css color definitions
     ========================================================================== */

  /* Tab corner masks */
  --mask-tab-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M8,0 L8,8 L0,8 A8,8 0 0,0 8,0 Z' fill='white'/%3E%3C/svg%3E");
  --mask-tab-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0,0 L0,8 L8,8 A8,8 0 0,1 0,0 Z' fill='white'/%3E%3C/svg%3E");

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* ==========================================================================
     Typography & Text
     ========================================================================== */
  --color-primary: var(--stone-600);
  --color-darker: var(--stone-800);
  --color-muted: var(--stone-500);
  --color-muted-more: var(--stone-400);
  --color-lighter: var(--stone-300);

  /* ==========================================================================
     Links
     ========================================================================== */
  --link: var(--lime-750);
  --link-hover: var(--lime-600);

  /* ==========================================================================
     Backgrounds
     ========================================================================== */
  --background-nav: var(--stone-350);
  --background-body: var(--stone-125);
  --background-subnav: var(--stone-200);
  --background-subnav-contrast: var(--stone-225);
  --background-control: var(--stone-200);
  --background-section: var(--stone-150);
  --background-td: var(--stone-125);
  --background-medium-light: var(--stone-75);
  --background-light: var(--stone-50);
  /* AI chat standalone surface ramp — its own light palette (frame darker than
     the panels on top); the dark values invert it into a proper dark ramp. */
  --ai-frame: var(--stone-300);
  --ai-surface: var(--stone-50);
  --ai-raised: var(--stone-100);
  --past-due-bg: var(--yellow-50);
  --task-highlight-bg: var(--selected-background);

  /* ==========================================================================
     Navigation
     ========================================================================== */
  --color-nav: var(--color-primary);
  --background-nav-tab-active: var(--background-body);
  --background-subnav-tab-active: var(--background-section);

  /* ==========================================================================
     Sidebar
     ========================================================================== */
  --sidebar-width: 11.25rem;
  --sidebar-width-collapsed: 4.5rem;
  --topnav-height: 3.5rem;
  --background-sidebar: var(--stone-200);
  --background-sidebar-hover: var(--stone-225);
  --background-sidebar-active: var(--stone-250);

  /* ==========================================================================
     Buttons
     ========================================================================== */
  --button-primary-background: var(--link);
  --button-primary-color: var(--color-lighter);
  --button-secondary-background: var(--background-section);
  --button-secondary-color: var(--color-primary);
  --button-toolbar: var(--color-primary);
  --btn-secondary-bg: var(--blue-50);
  --btn-success-bg: var(--lime-100);
  --btn-danger-bg: var(--red-100);

  /* ==========================================================================
     Forms & Inputs
     ========================================================================== */
  --input-border: var(--stone-300);
  --input-background: var(--stone-50);
  --input-placeholder: var(--stone-400);

  /* ==========================================================================
     Borders & Dividers
     ========================================================================== */
  --border-light: var(--stone-200);
  --border-medium: var(--stone-300);
  --border-medium-dark: var(--stone-350);
  --border-dark: var(--stone-400);

  /* ==========================================================================
     Selection & Active States
     ========================================================================== */
  --selected-background: var(--violet-150);
  --selected-color: var(--stone-700);
  --selected-border: var(--border-medium-dark);

  /* ==========================================================================
     Status & Feedback
     ========================================================================== */
  --urgent: var(--orange-800);
  --warning: var(--orange-800);
  --success: var(--lime-700);
  --true: var(--lime-700);
  --false: var(--urgent);
  --error: var(--urgent);
  --error-background: var(--orange-100);
  --error-border: var(--urgent);

  /* ==========================================================================
     Labels & Badges
     ========================================================================== */
  --label-gray: var(--background-control);
  --label-green: var(--lime-100);
  --label-orange: var(--orange-100);
  --label-purple: var(--violet-100);
  --label-red: var(--red-100);
  --label-yellow: var(--yellow-100);

  /* ==========================================================================
     Icons
     ========================================================================== */
  --icon-default: var(--color-primary);
  --icon-muted: var(--color-muted);
  --accent-link: var(--link);
  --icon-violet: var(--violet-700);
  --icon-violet-muted: var(--violet-600);
  --icon-yellow: var(--yellow-700);
  --add: var(--link);

  /* ==========================================================================
     Row Highlights
     ========================================================================== */
  --hl-gray: var(--background-control);
  --hl-blue: var(--blue-100);
  --hl-slate: var(--slate-100);
  --hl-green: var(--lime-100);
  --hl-orange: var(--orange-100);
  --hl-violet: var(--violet-100);
  --hl-red: var(--red-100);
  --hl-yellow: var(--yellow-100);

}

/* ==========================================================================
   Utility Classes - Highlights
   ========================================================================== */

.hl-blue { background: var(--hl-blue) !important; }
.hl-slate { background: var(--hl-slate) !important; }
.hl-gray { background: var(--hl-gray) !important; }
.hl-green { background: var(--hl-green) !important; }
.hl-orange { background: var(--hl-orange) !important; }
.hl-violet { background: var(--hl-violet) !important; }
.hl-purple { background: var(--hl-violet) !important; }
.hl-red { background: var(--hl-red) !important; }
.hl-yellow { background: var(--hl-yellow) !important; }

/* Dark mode — bright "line" colour per highlight class, for contexts that show
   the colour as an accent (underline / rail / swatch) rather than a muddy dark
   fill. Harmless on the generic .hl-* fills, which ignore it. */
[data-theme="dark"] .hl-yellow { --hl-line: var(--yellow-400); }
[data-theme="dark"] .hl-red    { --hl-line: var(--red-400); }
[data-theme="dark"] .hl-orange { --hl-line: var(--orange-400); }
[data-theme="dark"] .hl-green  { --hl-line: var(--lime-400); }
[data-theme="dark"] .hl-blue   { --hl-line: var(--blue-400); }
[data-theme="dark"] :is(.hl-violet, .hl-purple) { --hl-line: var(--violet-400); }
[data-theme="dark"] :is(.hl-slate, .hl-gray) { --hl-line: var(--slate-400); }

/* Dark mode — any table row flagged with a highlight colour shows it as a bright
   left rail on the first cell, never a full-row fill (dark fills go muddy and
   dominate). Covers facts/timeline, calendar & event rows, dash totals, etc. */
[data-theme="dark"] tr[class*="hl-"],
[data-theme="dark"] tr[class*="hl-"] > td {
  background: transparent !important;
}
[data-theme="dark"] tr[class*="hl-"] > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--hl-line);
}

.past-due td { background: var(--past-due-bg); }

/* ==========================================================================
   Utility Classes - Text
   ========================================================================== */

.text-muted {
  color: var(--color-muted) !important;
}

/* ==========================================================================
   Utility Classes - Status
   ========================================================================== */

.true-bool {
  color: var(--true);
}

.false-bool {
  color: var(--false);
}

.money-positive {
  color: var(--success) !important;
}

/* ==========================================================================
   Dark theme — Hojicha-inspired warm palette
   Deepest base is neutral; surface lifts, text, and borders carry warmth
   (low-chroma tan/brown hues, 48–82°). Accent green shifts from cool lime
   to a softer yellow-green (~138°) for the Gruvbox-aqua feel.
   The bootstrap script in base.html resolves "auto" to either "light" or
   "dark" before paint, so CSS only handles the two concrete states.
   ========================================================================== */
[data-theme="dark"] {
  /* Native form controls (radios, checkboxes) + scrollbars render dark */
  color-scheme: dark;

  /* Warm grays — neutral deep base, warming as it lifts */
  --gb-dark:      oklch(0.277 0     263);
  --gb-dark-soft: oklch(0.311 0.003  48);
  --gb-dark1:     oklch(0.344 0.007  48);
  --gb-dark2:     oklch(0.411 0.011  52);
  --gb-dark3:     oklch(0.482 0.018  61);
  --gb-dark4:     oklch(0.551 0.023  63);

  /* Warm creams for text */
  --gb-light:  oklch(0.956 0.055 96);
  --gb-light3: oklch(0.756 0.041 82);
  --gb-light4: oklch(0.690 0.035 76);
  --gb-gray:   oklch(0.619 0.029 67);

  /* Yellow-green accents (Gruvbox aqua family) */
  --gb-bright-aqua: oklch(0.756 0.108 138);
  --gb-aqua:        oklch(0.645 0.094 145);
  --gb-faded-aqua:  oklch(0.534 0.082 155);

  /* Status accents */
  --gb-bright-red:    oklch(0.660 0.217  30);
  --gb-bright-orange: oklch(0.731 0.182  52);
  --gb-bright-green:  oklch(0.765 0.158 111);
  --gb-bright-purple: oklch(0.705 0.098   2);

  /* Typography & Text */
  --color-primary: var(--gb-light4);
  --color-darker: var(--gb-light);
  --color-muted: var(--gb-gray);
  --color-muted-more: var(--gb-dark4);
  --color-lighter: var(--gb-light);

  /* Links */
  --link: var(--gb-bright-aqua);
  --link-hover: var(--gb-aqua);

  /* Backgrounds */
  --background-nav: var(--gb-dark-soft);
  --background-body: var(--gb-dark);
  --background-subnav: var(--gb-dark1);
  --background-subnav-contrast: var(--gb-dark2);
  --background-control: var(--gb-dark1);
  --background-section: var(--gb-dark1);
  --background-td: var(--gb-dark);
  --background-medium-light: var(--gb-dark-soft);
  --background-light: var(--gb-dark-soft);
  /* AI chat surface ramp — frame darkest, panels lift above it. */
  --ai-frame: var(--gb-dark);
  --ai-surface: var(--gb-dark-soft);
  --ai-raised: var(--gb-dark1);
  /* Dark mode signals task state with a left accent rail, not a row fill: a small
     saturated bar carries the hue without touching the elevation ladder or cell grid.
     Fills are neutralised to the normal cell background; the rail tokens do the work. */
  --past-due-bg: var(--background-td);
  --task-highlight-bg: var(--background-td);
  --past-due-rail: oklch(0.60 0.17 358);        /* rose-pink — persistent "past due" */
  --task-highlight-rail: oklch(0.64 0.19 293);  /* violet — transient "recently changed" */

  /* Navigation */
  --background-nav-tab-active: var(--background-body);
  --background-subnav-tab-active: var(--gb-dark2);  /* modest one-step lift above the surface */

  /* Sidebar */
  --background-sidebar: var(--gb-dark1);
  --background-sidebar-hover: var(--gb-dark2);
  --background-sidebar-active: var(--gb-dark2);  /* match the hover fill; border + text mark "active" */

  /* Buttons */
  --button-primary-background: var(--gb-faded-aqua);
  --button-primary-color: var(--gb-light);
  --button-secondary-background: var(--background-section);
  --button-secondary-color: var(--gb-light4);
  --button-toolbar: var(--gb-light3);
  --btn-secondary-bg: var(--gb-dark2);
  --btn-success-bg: oklch(0.405 0.096 138);
  --btn-danger-bg: var(--red-900);

  /* Forms & Inputs — inset well effect (input bg distinct from container) */
  --input-border: var(--gb-dark4);
  --input-background: var(--gb-dark-soft);
  --input-placeholder: var(--gb-dark4);

  /* Borders & Dividers */
  --border-light: var(--gb-dark1);
  --border-medium: var(--gb-dark2);
  --border-medium-dark: var(--gb-dark3);
  --border-dark: var(--gb-dark4);

  /* Selection & Active States */
  --selected-background: var(--background-control);
  --selected-color: var(--gb-bright-purple);
  --selected-border: var(--gb-dark3);

  /* Status & Feedback */
  --urgent: var(--gb-bright-orange);
  --warning: var(--gb-bright-orange);
  --success: var(--gb-bright-green);
  --true: var(--gb-bright-green);
  --false: var(--urgent);
  --error: var(--urgent);
  --error-background: var(--red-950);
  --error-border: var(--urgent);

  /* Labels & Badges (mid-dark tints, readable under cream text) — still used as
     fills for text highlights in the case viewer (ai.css / highlights.css). */
  --label-gray: var(--gb-dark1);
  --label-green: var(--lime-950);
  --label-orange: var(--orange-950);
  --label-purple: var(--violet-900);
  --label-red: var(--red-950);
  --label-yellow: var(--yellow-950);
  /* Outline pill line colours — for badge/label chips the hue lives in the
     border + text instead of a fill (see badges.css). */
  --label-blue-line: var(--blue-400);
  --label-gray-line: var(--color-darker);
  --label-green-line: var(--green-400);
  --label-lime-line: var(--lime-400);
  --label-orange-line: var(--orange-400);
  --label-purple-line: var(--violet-400);
  --label-red-line: var(--red-400);
  --label-yellow-line: var(--yellow-400);

  /* Icons */
  --icon-default: var(--color-primary);
  --icon-muted: var(--color-muted);
  --accent-link: var(--link);
  --icon-violet: var(--gb-bright-purple);
  --icon-violet-muted: var(--violet-400);
  --icon-yellow: var(--gb-bright-orange);
  --add: var(--link);

  /* Row Highlights (dark tints) */
  --hl-gray: var(--gb-dark2);
  --hl-blue: var(--blue-950);
  --hl-slate: var(--gb-dark1);
  --hl-green: var(--lime-950);
  --hl-orange: var(--orange-950);
  --hl-violet: var(--violet-950);
  --hl-red: var(--red-950);
  --hl-yellow: oklch(0.31 0.075 92);  /* true-yellow hue so it reads mustard, not the red-brown of yellow-950 */
}