/* Theme tokens — adapted from .fr-tools-ui-example/tracker/www/assets/css/tokens.css.
   Two themes (light, dark) + a follow-system mode (resolved by JS before paint).
   The rest of the stylesheet stays theme-agnostic. Hero/inset surfaces use the
   same pattern as the tracker: --surface-hero / --ink-hero for always-darker
   inverted panels, --surface-inset / --ink-inset for the light surface nested
   inside the hero.

   The bare :root selector aliases the default key (light) so first paint is
   never untokenized. Adding a theme: define every variable in this block,
   register it in inc/theme.php's allow-list. */

/* ─── Light (cool stone grey — DEFAULT) ─────────────────────────────── */
:root,
:root[data-theme="light"] {
  --bg:        #d8d7d2;
  --surface:   #e8e7e2;
  --surface-2: #c8c6c0;
  --surface-glass: #e8e7e28f;

  /* Form-field background pair: deactivated reads as slate grey, hover/focus
     pops to pure white. Old-school underline-style inputs. */
  --input-bg:        #c4c2bb;
  --input-bg-active: #ffffff;

  --ink:       #16181e;
  --ink-2:     #4a4d54;
  --ink-3:     #6e7178;
  --ink-disabled: #9b9d9f;

  --border:        #c1bfb8;
  --border-strong: #a09e98;

  --accent:        #5c3a55;
  --accent-strong: #482a42;
  --accent-soft:   rgba(92, 58, 85, 0.12);

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(92, 58, 85, 0.45);

  --status-active:    #5c3a55;
  --status-waiting:   #a17a30;
  --status-on-hold:   #6a7280;
  --status-complete:  #3d7fa0;
  --status-archived:  #8a8884;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.12);
  --warning:      #a17a30;
  --warning-soft: rgba(161, 122, 48, 0.12);

  --shadow: 0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero:  #1a1c22;
  --ink-hero:      #ece9e1;
  --surface-inset: #e8e7e2;
  --ink-inset:     #16181e;
}

/* ─── Dark (flat cool charcoal) ─────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:        #1a1d23;
  --surface:   #232730;
  --surface-2: #2c313b;
  --surface-glass: #2327308f;

  /* Form-field background pair: deactivated reads as the same slate
     mid-surface used elsewhere; hover/focus pops to a brighter step. */
  --input-bg:        #2c313b;
  --input-bg-active: #3a4150;

  --ink:       #ece9e1;
  --ink-2:     #b6b3aa;
  --ink-3:     #7e8088;
  --ink-disabled: #50535a;

  --border:        #353a45;
  --border-strong: #4d525d;

  --accent:        #b08aa6;
  --accent-strong: #c9a6c1;
  --accent-soft:   rgba(176, 138, 166, 0.16);

  --hover:    rgba(255, 255, 255, 0.04);
  --active:   rgba(255, 255, 255, 0.07);
  --focus:    rgba(176, 138, 166, 0.50);

  --status-active:    #b08aa6;
  --status-waiting:   #c9a44a;
  --status-on-hold:   #7c8f99;
  --status-complete:  #4a8fb5;
  --status-archived:  #4a5d66;

  --danger:       #d65a5a;
  --danger-soft:  rgba(214, 90, 90, 0.16);
  --warning:      #d4a93f;
  --warning-soft: rgba(212, 169, 63, 0.16);

  --shadow: 0 4px 12px rgba(0, 0, 0, 0.45);

  --color-scheme:  dark;
  --picker-invert: 0.6;

  --surface-hero:  #0c0e12;
  --ink-hero:      #ece9e1;
  --surface-inset: #2c313b;
  --ink-inset:     #ece9e1;
}

/* ─── Theme-agnostic tokens ─────────────────────────────────────────── */
:root {
  /* Typography — Andada Pro serif throughout (single family) */
  --font-serif: 'Andada Pro', Georgia, 'Times New Roman', serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs:     14px;
  --fs-md:  15px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;

  --lh-tight: 1.25;
  --lh:       1.45;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Old-school: zero rounded borders across the UI. The tokens stay
     defined for forward compatibility (a future surface could explicitly
     override) but every value is 0 today. */
  --r-none: 0;
  --r-sm:   0;
  --r:      0;
  --r-lg:   0;
  --r-xl:   0;

  --ink-on-strong: #ffffff;

  --t-fast: 120ms ease;
  --t:      180ms ease;

  --nav-h:       56px;
  --rail-w:      240px;
  --content-max: 2560px;
}