/* ==========================================================================
   Eazy Signage - design tokens
   Single source of truth. Import ONCE, before any other stylesheet.
   Masters: Violet #5B2FD6 | Near Black #191D20 | White #FFFFFF
   Components read ROLE tokens (--bg, --ink, --accent). Never a raw hex.
   ========================================================================== */

:root{
  /* ---- brand masters ---- */
  --ez-violet:#5B2FD6;
  --ez-black:#191D20;
  --ez-white:#FFFFFF;

  /* ---- violet ramp (fixed, identical in both themes) ---- */
  --v-700:#442593;
  --v-600:#4E2AAF;
  --v-500:#5B2FD6;   /* brand master */
  --v-400:#8C6DE2;
  --v-300:#AD97EB;
  --v-200:#DED5F7;
  --v-100:#EFEAFB;

  /* ---- neutral ramp (cool bias, derived from #191D20) ---- */
  --n-950:#191D20;   /* brand master */
  --n-900:#23282C;
  --n-800:#2F353A;
  --n-700:#454C52;
  --n-600:#5C646B;   /* lightest grey that passes AA on white */
  --n-500:#767E85;   /* placeholder / disabled only - FAILS AA as body text */
  --n-400:#9AA1A7;
  --n-300:#BCC2C6;
  --n-200:#D8DCDE;
  --n-100:#EBEEEF;
  --n-50:#F6F8F8;

  /* ---- radius ---- */
  --r-badge:6px;
  --r-control:10px;
  --r-card:14px;
  --r-tile:16px;
  --r-pill:999px;

  /* ================= ROLES - LIGHT ================= */
  --bg:var(--n-50);
  --surface:#FFFFFF;
  --surface-2:#EFF2F3;
  --ink:var(--n-950);
  --ink-2:var(--n-600);
  --ink-3:var(--n-500);
  --line:var(--n-200);
  --line-soft:var(--n-100);
  --accent:var(--v-500);
  --accent-hover:var(--v-600);
  --accent-press:var(--v-700);
  --accent-wash:var(--v-100);
  --accent-ink:var(--v-700);
  --on-accent:#FFFFFF;
  --focus:var(--v-500);
  --ok:#0C7A53;   --ok-bg:#E7F6F0;
  --warn:#B45309; --warn-bg:#FEF3E2;
  --bad:#C42B2B;  --bad-bg:#FCEBEB;
  --shadow-sm:0 1px 2px rgba(25,29,32,.06);
  --shadow-md:0 8px 24px -12px rgba(25,29,32,.18);
}

/* ================= ROLES - DARK =================
   Only roles change. Ramps never change.
   Declared twice on purpose: the media query covers the default "system"
   state (no data-theme stamped), the attribute block lets a manual toggle
   win in both directions.
   ================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141719;
    --surface:var(--n-950);
    --surface-2:var(--n-900);
    --ink:#E6E9EA;
    --ink-2:#A2AAB0;
    --ink-3:#8B9399;
    --line:#333A40;
    --line-soft:#262C31;
    --accent:var(--v-300);        /* #5B2FD6 is only 2.28:1 on near black */
    --accent-hover:var(--v-400);
    --accent-press:var(--v-500);
    --accent-wash:#241C3D;
    --accent-ink:var(--v-200);
    --on-accent:#FFFFFF;
    --focus:var(--v-300);
    --ok:#4FC79B;   --ok-bg:#122E25;
    --warn:#E8A55C; --warn-bg:#33230F;
    --bad:#F08585;  --bad-bg:#341717;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#141719;
  --surface:var(--n-950);
  --surface-2:var(--n-900);
  --ink:#E6E9EA;
  --ink-2:#A2AAB0;
  --ink-3:#8B9399;
  --line:#333A40;
  --line-soft:#262C31;
  --accent:var(--v-300);
  --accent-hover:var(--v-400);
  --accent-press:var(--v-500);
  --accent-wash:#241C3D;
  --accent-ink:var(--v-200);
  --on-accent:#FFFFFF;
  --focus:var(--v-300);
  --ok:#4FC79B;   --ok-bg:#122E25;
  --warn:#E8A55C; --warn-bg:#33230F;
  --bad:#F08585;  --bad-bg:#341717;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px -12px rgba(0,0,0,.7);
}

/* ---- base ---- */
html{ color-scheme:light dark; }
body{ background:var(--bg); color:var(--ink); }

/* ---- reference component recipes ----
   NOTE: a FILLED violet surface keeps --v-500 in both themes
   (white on #5B2FD6 = 7.44:1 either way).
   Violet as TEXT or ICON uses --accent, which flips in dark mode.
------------------------------------------------------------------ */
.btn-primary{
  background:var(--v-500); color:#FFFFFF;
  border:1px solid transparent; border-radius:var(--r-control);
  padding:11px 20px; font-weight:600; cursor:pointer;
}
.btn-primary:hover{ background:var(--v-600); }
.btn-primary:active{ background:var(--v-700); }
.btn-primary:disabled{ background:var(--n-300); cursor:not-allowed; }

.btn-secondary{
  background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-control);
  padding:11px 20px; font-weight:600; cursor:pointer;
}
.btn-secondary:hover{ border-color:var(--ink-3); }
.btn-secondary:active{ background:var(--accent-wash); border-color:var(--accent); }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); }
.card:hover{ box-shadow:var(--shadow-md); }

.input{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-control); padding:10px 12px;
}
.input::placeholder{ color:var(--ink-3); }
.input:hover{ border-color:var(--n-400); }
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); outline:none; }
.input[aria-invalid="true"]{ border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg); }

a{ color:var(--accent); }
a:hover{ color:var(--accent-press); }

/* focus ring is non-negotiable, both themes, every interactive element */
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.badge{ border-radius:var(--r-badge); padding:5px 10px; font-size:.72rem;
        font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.badge--ok{   background:var(--ok-bg);   color:var(--ok); }
.badge--warn{ background:var(--warn-bg); color:var(--warn); }
.badge--bad{  background:var(--bad-bg);  color:var(--bad); }
.badge--acc{  background:var(--accent-wash); color:var(--accent-ink); }