/* ==========================================================================
   GEXTON DESIGN SYSTEM  ·  theme.css
   Shared tokens, reset, typography and base components.
   Load this BEFORE style.css (public) or admin.css (admin).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Brand — "Ember" orange. Action, identity and state live here. */
  --ember-50:#FFF4EC;
  --ember-100:#FFE5D4;
  --ember-200:#FFC7A4;
  --ember-300:#FFA470;
  --ember-400:#FB8139;
  --ember-500:#F26A21;   /* primary */
  --ember-600:#D9520C;   /* hover / press */
  --ember-700:#B03F08;
  --ember-800:#8A3309;

  /* Warm neutrals — espresso, not blue-grey, so orange sits naturally. */
  --char-900:#171310;
  --char-800:#221A15;
  --char-700:#33271F;
  --char-600:#4A3A30;

  --ink:#1E1712;
  --ink-2:#5C4E46;
  --ink-3:#8B7B71;
  --ink-4:#B6A79E;

  --sand:#F8F5F2;        /* page background */
  --sand-2:#F2EDE8;
  --surface:#FFFFFF;
  --line:#EBE3DC;
  --line-2:#F4EFEA;

  /* Semantic */
  --ok:#0E9C6B;      --ok-bg:#E7F7F0;
  --warn:#B87309;    --warn-bg:#FDF3E0;
  --risk:#D14343;    --risk-bg:#FCEDED;
  --info:#2F6BE4;    --info-bg:#EBF1FE;

  /* Shape */
  --r-xs:6px; --r-sm:9px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* Elevation — warm shadows, never pure black */
  --sh-1:0 1px 2px rgba(23,19,16,.05);
  --sh-2:0 2px 4px rgba(23,19,16,.04), 0 8px 20px -10px rgba(23,19,16,.14);
  --sh-3:0 4px 8px rgba(23,19,16,.05), 0 24px 48px -20px rgba(23,19,16,.22);
  --sh-ember:0 8px 24px -10px rgba(242,106,33,.55);

  /* Type */
  --font:"Plus Jakarta Sans","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Rhythm */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:30px; --sp-7:40px; --sp-8:56px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;line-height:1.22;letter-spacing:-.02em;font-weight:800}
p{margin:0}
a{color:var(--ember-600)}

::selection{background:var(--ember-200);color:var(--char-900)}

:focus-visible{
  outline:3px solid var(--ember-300);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* Data — IDs, dates, counts — is set in mono so it scans in a queue. */
.mono{font-family:var(--mono);font-variant-ligatures:none}

.eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ember-600);
}

.muted{color:var(--ink-3)}
.mt{margin-top:var(--sp-4)}
.center{text-align:center}
.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;
}

/* ---------- 3. Brand mark ------------------------------------------------ */
.gx-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}

.gx-mark{
  width:38px;height:38px;flex:none;
  border-radius:11px;
  background:linear-gradient(150deg,var(--ember-400),var(--ember-600));
  color:#fff;
  display:grid;place-items:center;
  font-weight:800;font-size:17px;letter-spacing:-.04em;
  box-shadow:var(--sh-ember);
}

.gx-word{font-weight:800;font-size:17px;letter-spacing:.16em;line-height:1}
.gx-tag{
  display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;color:var(--ink-3);margin-top:4px;text-transform:uppercase;
}

/* ---------- 4. Buttons --------------------------------------------------- */
.btn{
  --btn-bg:var(--ember-500);
  --btn-fg:#fff;
  --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--r-sm);
  padding:12px 20px;
  font:inherit;font-weight:700;font-size:14px;
  letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
  box-shadow:var(--sh-ember);
}
.btn:hover{--btn-bg:var(--ember-600);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-ghost{--btn-bg:var(--surface);--btn-fg:var(--ink);--btn-bd:var(--line);box-shadow:var(--sh-1)}
.btn-ghost:hover{--btn-bg:var(--sand);--btn-bd:var(--ember-200)}

.btn-quiet{--btn-bg:transparent;--btn-fg:var(--ink-2);--btn-bd:transparent;box-shadow:none}
.btn-quiet:hover{--btn-bg:var(--sand-2);--btn-fg:var(--ink);transform:none}

.btn-dark{--btn-bg:var(--char-900);--btn-fg:#fff;box-shadow:var(--sh-2)}
.btn-dark:hover{--btn-bg:var(--char-700)}

.btn-sm{padding:8px 13px;font-size:13px;border-radius:var(--r-xs)}
.btn-lg{padding:15px 26px;font-size:15.5px;border-radius:var(--r)}
.btn-full{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ---------- 5. Form controls --------------------------------------------- */
label{display:block;font-weight:650;font-size:13.5px;color:var(--ink);margin-bottom:7px}
label small{font-weight:500;color:var(--ink-3)}
.req{color:var(--ember-600);font-weight:800}

input[type=text],input[type=password],input[type=tel],input[type=email],
input:not([type]),select,textarea{
  width:100%;
  padding:12px 14px;
  font:inherit;font-size:14.5px;
  color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
  appearance:none;
}
textarea{min-height:118px;resize:vertical;line-height:1.6}

input::placeholder,textarea::placeholder{color:var(--ink-4)}

input:hover,select:hover,textarea:hover{border-color:var(--ember-200)}

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--ember-500);
  box-shadow:0 0 0 4px var(--ember-50);
}

select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B7B71' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
  cursor:pointer;
}

/* Fields flagged invalid only after a submit attempt — never while typing. */
.was-validated :invalid{border-color:var(--risk);background:var(--risk-bg)}

.field{margin-bottom:var(--sp-4)}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}

/* Honeypot: real people never see it, bots fill it. */
.nectar{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}

/* ---------- 6. Choice chips (radio / checkbox) --------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}

.chip{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 15px 10px 13px;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  cursor:pointer;
  transition:all .15s var(--ease);
  margin:0;
}
.chip:hover{border-color:var(--ember-300);color:var(--ink);background:var(--ember-50)}

.chip input{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;flex:none;margin:0;
  border:1.5px solid var(--ink-4);
  border-radius:50%;
  background:var(--surface);
  transition:all .15s var(--ease);
  cursor:pointer;
}
.chip input[type=checkbox]{border-radius:5px}

.chip input:checked{
  border-color:var(--ember-500);
  background:var(--ember-500);
  box-shadow:inset 0 0 0 3px var(--surface);
}
.chip input[type=checkbox]:checked{
  box-shadow:none;
  background:var(--ember-500) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

.chip:has(input:checked),
.chip.is-checked{
  border-color:var(--ember-500);
  background:var(--ember-50);
  color:var(--char-900);
  box-shadow:0 0 0 3px var(--ember-50);
}
.chip:has(input:focus-visible){outline:3px solid var(--ember-300);outline-offset:2px}

/* ---------- 7. Badges ---------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  font-size:11px;font-weight:700;letter-spacing:.02em;
  background:var(--sand-2);color:var(--ink-2);
  white-space:nowrap;
}
.badge::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none;
}
.badge.plain::before{display:none}

.badge.new{background:var(--info-bg);color:var(--info)}
.badge.in-review{background:var(--warn-bg);color:var(--warn)}
.badge.resolved{background:var(--ok-bg);color:var(--ok)}
.badge.closed{background:var(--sand-2);color:var(--ink-3)}

.badge.low{background:var(--sand-2);color:var(--ink-2)}
.badge.medium{background:var(--info-bg);color:var(--info)}
.badge.high{background:var(--warn-bg);color:var(--warn)}
.badge.urgent{background:var(--risk-bg);color:var(--risk)}

.badge.complaint{background:var(--ember-50);color:var(--ember-700)}
.badge.evaluation{background:var(--info-bg);color:var(--info)}

/* ---------- 8. Alerts ---------------------------------------------------- */
.alert{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;
  border-radius:var(--r-sm);
  font-size:13.5px;font-weight:550;line-height:1.5;
  border:1px solid transparent;
}
.alert svg{flex:none;margin-top:1px}
.alert-error{background:var(--risk-bg);color:#9B2C2C;border-color:#F5D0D0}
.alert-ok{background:var(--ok-bg);color:#08654A;border-color:#BFE8D8}
.alert-info{background:var(--ember-50);color:var(--ember-800);border-color:var(--ember-100)}

/* ---------- 9. Motion & print -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

@media print{
  body{background:#fff}
  .no-print{display:none!important}
}