/* Antlywise design tokens -> CSS custom properties (design-plan.md).
 *
 * These variables are the single source of truth. The inline Tailwind config in
 * base.html maps utility names (bg-surface-primary, text-accent-primary, ...) to
 * these variables, so dark mode is just a `data-theme="dark"` swap and a future
 * CDN->compiled-CSS migration needs no template edits.
 */

:root {
  /* surfaces / neutrals */
  --surface-canvas: #F6F8F8;
  --surface-primary: #FFFFFF;
  --surface-secondary: #EEF2F1;
  --surface-elevated: #FFFFFF;
  --separator-hairline: #E2E8E6;
  --separator-strong: #CBD5D2;

  /* text */
  --text-primary: #0F1A18;
  --text-secondary: #46514F;
  --text-tertiary: #6C7672;
  --text-on-accent: #04140F;

  /* brand + semantic */
  --accent-primary: #0E8E6D;
  --accent-primary-pressed: #0B7559;
  --accent-primary-container: #D7F0E8;
  --accent-on-container: #0A5240;      /* text ON accent-primary-container (≥4.5:1) */
  --accent-button: #0C7E60;            /* primary BUTTON fill (white text passes AA) */
  --accent-button-pressed: #0A6B50;    /* primary button hover/pressed fill */
  --accent-button-text: #FFFFFF;       /* primary button label */

  --state-positive: #0E8E6D;
  --state-positive-container: #D7F0E8;
  --state-positive-text: #0B5C47;      /* accent/onPositive-text */

  --state-warning: #F4B740;
  --state-warning-text: #7A5400;
  --state-warning-container: #FBEBC9;

  --state-negative: #C0392B;
  --state-negative-text: #982619;
  --state-negative-container: #F8DAD5;

  --state-info: #2D6CDF;

  /* focus ring (state/info, 2px) */
  --focus-ring: #2D6CDF;

  /* categorical chart ramp (teal -> blue -> violet -> amber -> coral ...) */
  --chart-1: #0E8E6D;
  --chart-2: #2D6CDF;
  --chart-3: #7C5CD6;
  --chart-4: #F4B740;
  --chart-5: #C0392B;
  --chart-6: #14A0B8;
  --chart-7: #D6755C;
  --chart-8: #5A8C3B;

  /* elevation shadows (M3-ish) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .08);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, .12);

  color-scheme: light;
}

[data-theme="dark"] {
  --surface-canvas: #0E1413;
  --surface-primary: #161E1D;
  --surface-secondary: #1E2826;
  --surface-elevated: #22302D;
  --separator-hairline: rgba(255, 255, 255, .12);
  --separator-strong: rgba(255, 255, 255, .20);

  --text-primary: #F2F6F5;
  --text-secondary: #A9B4B1;
  --text-tertiary: #7C8784;
  --text-on-accent: #04140F;

  --accent-primary: #3FB89A;
  --accent-primary-pressed: #5AC7AC;
  --accent-primary-container: rgba(14, 142, 109, .16);
  --accent-on-container: #BFE9DB;      /* text ON accent-primary-container (≥4.5:1) */
  --accent-button: #0C7E60;            /* primary BUTTON fill (white text passes AA) */
  --accent-button-pressed: #0A6B50;    /* primary button hover/pressed fill */
  --accent-button-text: #FFFFFF;       /* primary button label */

  --state-positive: #3FB89A;
  --state-positive-container: #11352B;
  --state-positive-text: #BFE9DB;

  --state-warning: #F0C36B;
  --state-warning-text: #F0C36B;
  --state-warning-container: #3A2E0E;

  --state-negative: #F08A7E;
  --state-negative-text: #F08A7E;
  --state-negative-container: #3A1714;

  --state-info: #7FA8F0;
  --focus-ring: #7FA8F0;

  /* dark-adjusted chart ramp (lighter for AA on dark surfaces) */
  --chart-1: #3FB89A;
  --chart-2: #7FA8F0;
  --chart-3: #A99BEC;
  --chart-4: #F0C36B;
  --chart-5: #F08A7E;
  --chart-6: #57C2D6;
  --chart-7: #E89E89;
  --chart-8: #9CC470;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .5);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* honor system preference when the user hasn't explicitly chosen (no data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-canvas: #0E1413;
    --surface-primary: #161E1D;
    --surface-secondary: #1E2826;
    --surface-elevated: #22302D;
    --separator-hairline: rgba(255, 255, 255, .12);
    --separator-strong: rgba(255, 255, 255, .20);
    --text-primary: #F2F6F5;
    --text-secondary: #A9B4B1;
    --text-tertiary: #7C8784;
    --accent-primary: #3FB89A;
    --accent-primary-pressed: #5AC7AC;
    --accent-primary-container: rgba(14, 142, 109, .16);
    --accent-on-container: #BFE9DB;
    --accent-button: #0C7E60;
    --accent-button-pressed: #0A6B50;
    --accent-button-text: #FFFFFF;
    --state-positive: #3FB89A;
    --state-positive-container: #11352B;
    --state-positive-text: #BFE9DB;
    --state-warning: #F0C36B;
    --state-warning-text: #F0C36B;
    --state-warning-container: #3A2E0E;
    --state-negative: #F08A7E;
    --state-negative-text: #F08A7E;
    --state-negative-container: #3A1714;
    --state-info: #7FA8F0;
    --focus-ring: #7FA8F0;
    --chart-1: #3FB89A; --chart-2: #7FA8F0; --chart-3: #A99BEC; --chart-4: #F0C36B;
    --chart-5: #F08A7E; --chart-6: #57C2D6; --chart-7: #E89E89; --chart-8: #9CC470;
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- base layer --- */

html {
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body { background: var(--surface-canvas); color: var(--text-primary); }

/* tabular figures on every currency value */
.amount { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* visually-hidden but available to assistive tech */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* visible focus ring (state/info, 2px) */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* HTMX request indicator: show spinner only while a request is in flight */
.htmx-indicator { opacity: 0; transition: opacity 120ms ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
.htmx-request .hide-while-busy { opacity: .4; pointer-events: none; }

/* small inline spinner */
.spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* count-up / value-roll: cosmetic only (server value is the source of truth) */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  * { transition: none !important; animation-duration: .001ms !important; }
}

/* brief highlight flash used by cover-overspending on both affected rows */
@keyframes rowflash {
  0%   { background: var(--accent-primary-container); }
  100% { background: transparent; }
}
.row-flash { animation: rowflash 320ms ease-out; }
@media (prefers-reduced-motion: reduce) { .row-flash { animation: none; } }

/* --------------------------------------------------- branded polish layer ---
 * Token-driven refinements that ride on top of the existing Tailwind utilities
 * already used in templates. No hardcoded hex; everything resolves to the
 * variables above so light/dark both follow. These are additive — they only
 * enhance elements that already carry these utility classes.
 */

/* Primary accent buttons gain a confident pressed state + subtle lift.
   Targets the accent-fill BUTTON pattern (bg-accent-button) used across templates.
   Note: bg-accent-primary is left untouched here because it is also used for
   non-button brand fills (logo dot, icons, progress bars, hero cards). */
button.bg-accent-button,
a.bg-accent-button,
.bg-accent-button {
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
button.bg-accent-button:hover,
a.bg-accent-button:hover { background: var(--accent-button-pressed); }
button.bg-accent-button:active,
a.bg-accent-button:active { transform: translateY(0.5px); }

/* Card surfaces: hairline + soft shadow already applied via utilities; ensure a
   consistent, slightly stronger separation on hover for interactive cards. */
section.shadow-e1,
.card { transition: box-shadow 160ms ease, border-color 160ms ease; }

/* Inputs/selects driven by the token utilities get a calm branded focus ring
   (the global :focus-visible above covers keyboard; this adds the accent ring on
   direct focus for the inline editors and dialogs). */
input.border-separator-strong:focus,
select.border-separator-strong:focus,
input.border-separator-strong:focus-visible,
select.border-separator-strong:focus-visible {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--accent-primary-container);
}

/* Selects inherit surface/text tokens so the native control matches dark mode. */
select { color: var(--text-primary); background-color: var(--surface-primary); }
select option { color: var(--text-primary); background-color: var(--surface-elevated); }

/* Text-bearing native inputs/textarea inherit token colours so they never render
   dark-on-dark (or light-on-light). `color-scheme` already flips UA controls, but
   inputs that carry an explicit token bg (e.g. bg-surface-primary) need a matching
   token text colour or they'd show light bg + light text in dark mode. Excludes
   button-like and non-text inputs whose colour is supplied by utility classes. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]),
textarea {
  color: var(--text-primary);
  background-color: var(--surface-primary);
}
input::placeholder,
textarea::placeholder { color: var(--text-tertiary); opacity: 1; }

/* Underlined inline actions (Edit / Rename / links) get a gentle hover. */
a.text-state-info:hover,
button.text-state-info:hover { color: var(--accent-primary); }