/* AU ONE STUDIO · variables.css — design tokens + light/dark themes
   ============================================================================
   THE DESIGN SYSTEM CONTRACT
   Every color, radius, shadow, duration and easing in the app resolves to a
   token defined here. Component files never invent ad-hoc values for these —
   change a token, and the whole product moves together.

   Simplicity-First rebrand: olive green + cream (light) / olive green + dark
   grey (dark), replacing the earlier indigo identity. Per-entity card
   coloring (entity-settings.js's COLOR_CHOICES) is a separate, deliberately
   preserved wayfinding palette — not touched here.

   Contrast pass (closing audit): --brand2, --muted, --accent-star and the
   status colors (--warn/--bad/--info) were computed against the NEW cream/
   dark-grey backgrounds using WCAG relative luminance and found to fail
   AA (4.5:1 text / 3:1 large-or-UI) in several real, reachable spots —
   white text on the lighter corner of the brand gradient, plain links,
   required-field asterisks, star ratings, and status text in light mode.
   Dark mode was largely fine as-is (dark backgrounds carry saturated color
   well), so fixes are mostly light-mode-only overrides layered on top of
   values that already worked. A new --link token was added because --brand
   itself has to serve two conflicting jobs (vivid enough as a button
   surface, dark enough as body text) that no single value can satisfy. */
:root{
  /* ---- surfaces (cream, light mode) ---- */
  --bg:#faf7ef; --bg2:#f2ede0;
  --glass:rgba(255,253,247,.78); --glass2:rgba(255,253,247,.55);
  --glass-solid:#fffef9;
  --stroke:rgba(50,46,30,.10); --stroke2:rgba(50,46,30,.06);

  /* ---- ink (warm neutrals, not blue-tinted) ---- */
  --ink:#2a2a22; --ink2:#4a4a3c;
  /* darkened from #726f5c — the original failed AA (4.34:1) against --bg2,
     the darker half of body.css's --bg→--bg2 gradient */
  --muted:#605e4e; --muted2:#a6a28c;

  /* ---- brand (olive green) + semantics ---- */
  --brand:#6b7c3c;
  /* darkened from #8a9b5c — white .btn.primary/.nav button.on text on the
     original was 3.03:1, well under AA; #677445 clears 4.5:1 (5.05:1) */
  --brand2:#677445; --brandS:#eef0df;
  --brand-ink:#4a5629;
  /* --link: body-text use of the brand hue (a{} in base.css). --brand
     itself stays lighter for button/pill surfaces, where WHITE sits on it —
     a single token can't be both "vivid enough as a surface" and "dark
     enough as 4.5:1 text", so this is a deliberate second token, not a
     duplicate. #556330 clears 4.5:1 against both --bg and --bg2. */
  --link:#556330;
  --ok:#059669; --okS:#eafaf3;
  /* --warn/--bad/--info below are darkened for LIGHT MODE ONLY (dark-mode
     override further down restores the original, already-AA-safe values —
     these are rendered as light text-on-tint chips in dark mode, where the
     brighter originals are correct, not a mistake to "fix" there too) */
  --warn:#a25904; --warnS:#fef7e8;
  --bad:#d12424; --badS:#feefef; --info:#0170a9; --infoS:#ecf6fe;
  /* star-rating fill, a decorative accent, not a status color — kept
     visually distinct from --warn (same hue family). Darkened for light
     mode only (see dark-mode override): the original #f59e0b was 2.01:1
     against the new cream --bg, well under even the 3:1 non-text minimum */
  --accent-star:#9f6607;
  --scrim:rgba(20,18,10,.44);
  /* derived from --brand's real hex (107,124,60) — the body background
     washes (base.css) trace back to this token, not an ad-hoc rgb() */
  --wash-brand:rgba(107,124,60,.16);
  --wash-info:rgba(2,132,199,.12);

  /* ---- elevation (ambient + key light, scales together; warm dark tint,
     not the old cool blue-grey, to match the cream/olive identity) ---- */
  --shadow-xs:0 1px 2px rgba(42,38,26,.05);
  --shadow2:0 1px 3px rgba(42,38,26,.06),0 4px 14px rgba(42,38,26,.06);
  --shadow:0 2px 6px rgba(42,38,26,.05),0 12px 34px rgba(42,38,26,.10);
  --shadow-lg:0 4px 10px rgba(42,38,26,.06),0 24px 60px rgba(42,38,26,.16);
  --glow-brand:0 6px 20px rgba(107,124,60,.32);
  --glow-ok:0 6px 20px rgba(5,150,105,.3);
  --glow-bad:0 6px 20px rgba(220,38,38,.28);

  /* ---- focus ring ---- */
  --ring:0 0 0 3px rgba(107,124,60,.18);
  --ring-bad:0 0 0 3px rgba(220,38,38,.14);

  /* ---- shape ---- */
  --r:16px; --r2:12px; --r3:9px; --r-pill:999px;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);          /* standard decel */
  --ease-spring:cubic-bezier(.32,1.25,.5,1);   /* playful overshoot */
  --dur-1:.14s; --dur-2:.22s; --dur-3:.34s;

  /* ---- spacing scale (Phase 4: new chrome only — not retrofitted app-wide) ---- */
  --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px;
  --space-5:16px; --space-6:20px; --space-7:28px; --space-8:36px;

  /* ---- typography scale (Phase 4: new chrome only) ---- */
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  --fw-regular:400; --fw-medium:600; --fw-bold:800;

  /* ---- select-arrow chevron (data-URI can't reference CSS vars, so this is
     a hardcoded neutral tone chosen to read reasonably against both cream
     and dark-grey backgrounds) ---- */
  --chevron-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M2 4l4 4 4-4' stroke='%238a8874' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* ---- surfaces (dark grey, dark mode) ---- */
    --bg:#1c1c1b; --bg2:#242422;
    --glass:rgba(38,38,35,.78); --glass2:rgba(42,42,38,.52);
    --glass-solid:#2a2a27;
    --stroke:rgba(220,220,205,.10); --stroke2:rgba(220,220,205,.06);
    --ink:#efeee4; --ink2:#c7c5b4; --muted:#9c9a88; --muted2:#6b6a5c;
    /* darkened from #9caf6b for the same white-text-on-brand2 reason as
       light mode — dark mode's original was brightened for legibility
       against the dark bg and ended up WORSE for white button text (2.40:1)
       as a direct result; #6d7a4a clears 4.5:1 (4.63:1) */
    --brand2:#6d7a4a; --brandS:#2e3320; --brand-ink:#b8c68f;
    /* dark mode's own link color: --brand-ink's dark value already clears
       AA by a wide margin (9.35:1 vs --bg) — reuse it rather than invent a
       third hex for the same job */
    --link:#b8c68f;
    /* restore the original, already-AA-safe status colors for dark mode —
     the :root darkening above is light-mode-only (these render as light
     text on a DARK tint chip in dark mode, e.g. --warnS here is #2f2408,
     so the brighter original is correct here, not a bug to also darken) */
    --warn:#d97706; --bad:#dc2626; --info:#0284c7;
    --accent-star:#f59e0b;
    --okS:#07302a; --warnS:#2f2408; --badS:#3a0f0f; --infoS:#0b2540;
    --shadow-xs:0 1px 2px rgba(0,0,0,.3);
    --shadow2:0 1px 3px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.32);
    --shadow:0 2px 6px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.45);
    --shadow-lg:0 4px 10px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.55);
    --glow-brand:0 6px 22px rgba(156,175,107,.42);
    --ring:0 0 0 3px rgba(156,175,107,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#1c1c1b; --bg2:#242422;
  --glass:rgba(38,38,35,.78); --glass2:rgba(42,42,38,.52);
  --glass-solid:#2a2a27;
  --stroke:rgba(220,220,205,.10); --stroke2:rgba(220,220,205,.06);
  --ink:#efeee4; --ink2:#c7c5b4; --muted:#9c9a88; --muted2:#6b6a5c;
  --brand2:#6d7a4a; --brandS:#2e3320; --brand-ink:#b8c68f;
  --link:#b8c68f;
  --warn:#d97706; --bad:#dc2626; --info:#0284c7;
  --accent-star:#f59e0b;
  --okS:#07302a; --warnS:#2f2408; --badS:#3a0f0f; --infoS:#0b2540;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow2:0 1px 3px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.32);
  --shadow:0 2px 6px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.45);
  --shadow-lg:0 4px 10px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.55);
  --glow-brand:0 6px 22px rgba(156,175,107,.42);
  --ring:0 0 0 3px rgba(156,175,107,.28);
}
html{transition:none}
body,.side,.topbar,.card,.btn,.inp,.modal{transition:background-color .25s ease,border-color .25s ease,color .2s ease}
/* users who prefer reduced motion get instant state changes, no exceptions */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}