/* ============================================================================
   Compass Console — shared design tokens (v2 · 2026-09-03 — v1 retired: immutable cache, values changed)
   One light theme. Navy is the ink and the one primary button. Flat cards wear a
   hairline ring (--shadow-sm). Status = ink · slate · green · red. Charts carry the
   brand gradient. Every name below is read by the app, the login page, the legal
   pages or Clerk's appearance API — rename nothing. Values are static on purpose
   (Clerk feeds them into its own color math; color-mix() strings would break it).
   Versioned filename: /assets/* is cached immutable for a year — bump on change.
   ============================================================================ */
:root{
  color-scheme:light;

  /* canvas + surfaces */
  --bg:#F6F7FA; --card:#FFFFFF; --band:#F0F3F8; --rail:#FFFFFF; --pop:#FFFFFF;
  --line:rgba(4,19,44,.10); --card-line:#E3E8F0; --line-soft:rgba(4,19,44,.06);
  --hbg:#F0F3F8; --hfg:#5B6B85; --hline:#E3E8F0; --sbg:#F0F3F8; --sfg:#0B1A33;

  /* ink */
  --fg:#0B1A33; --navy:#04132C; --muted:#5B6B85; --muted2:#8A98B0; --muted-2:#8A98B0;

  /* the accent IS the ink: one primary button, no signal color */
  --accent:#04132C; --accent-2:#04132C; --accent-h:#0E2A5C; --accent-emph:#04132C;
  --accent-fg:#FFFFFF; --accent-glow:transparent;
  --cta-bg:#04132C; --cta-fg:#FFFFFF;
  --btn-bg:#FFFFFF; --btn-fg:#0B1A33; --btn-line:#E3E8F0; --input-bg:#FFFFFF;
  --sel:rgba(4,19,44,.07); --ring:rgba(4,19,44,.30); --row-hover:rgba(4,19,44,.03);
  --hoverwash:rgba(4,19,44,.03); --tour-dim:rgba(4,19,44,.55); --dot:rgba(4,19,44,.14);
  --ink-bg:rgba(4,19,44,.06); --ink-bd:rgba(4,19,44,.24); --slate-bd:rgba(4,19,44,.14);

  /* status — no amber anywhere: pending/attention = ink */
  --ok:#158A5A; --ok-bg:rgba(21,138,90,.10); --ok-bd:rgba(21,138,90,.35);
  --warn:#04132C; --warn-bg:rgba(4,19,44,.06); --warn-bd:rgba(4,19,44,.24);
  --danger:#C93A3A; --danger-bg:rgba(201,58,58,.10); --danger-bd:rgba(201,58,58,.35); --err:#C93A3A;
  --pin-bg:rgba(21,138,90,.10); --pin-fg:#158A5A;                              /* in stock · accepted */
  --pord-bg:rgba(4,19,44,.06); --pord-fg:#04132C; --pord-bd:rgba(4,19,44,.24);  /* ordered · pending */
  --pna-bg:rgba(4,19,44,.04); --pna-fg:#5B6B85;                                 /* not available */

  /* brand gradient (Oscar's strip): steel → blue → sky → sand → deep navy */
  --brand-steel:#4A5F86; --brand-blue:#5B7DB1; --brand-sky:#A9C4E8; --brand-sand:#CDBFA3; --brand-navy:#1C2438;
  --brand-grad:linear-gradient(90deg,#4A5F86,#5B7DB1 45%,#A9C4E8);
  --series-1:#5B7DB1; --series-0:#04132C; --series-fill:rgba(91,125,177,.14); --grid:rgba(4,19,44,.08);

  /* elevation: flat cards = hairline ring; real shadow only on popovers/dialogs */
  --shadow-sm:0 0 0 1px #E3E8F0;
  --shadow-md:0 0 0 1px #E3E8F0,0 8px 24px rgba(4,19,44,.08);
  --shadow-lg:0 12px 40px rgba(4,19,44,.14),0 2px 8px rgba(4,19,44,.06);
  --paper-shadow:0 24px 60px rgba(4,19,44,.14),0 2px 6px rgba(4,19,44,.08);

  /* type */
  --font-sans:'PP Neue Montreal','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'PP Neue Montreal','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* geometry + motion (one easing family) */
  --radius:10px; --radius-sm:8px; --radius-card:10px; --radius-btn:8px; --radius-input:8px; --radius-pill:999px;
  --t-fast:.15s; --t-med:.25s; --t-slow:.45s;
  --e-out:cubic-bezier(.2,.8,.2,1); --e-exit:cubic-bezier(.2,.8,.2,1); --e-pop:cubic-bezier(.2,.8,.2,1);
  --rail-w:232px; --rail-min:64px; --top-h:56px;
  /* family shell: rail ground, lifted (current) row, brand tile */
  --side:#F7F8FA; --raise:#FFFFFF; --tile:#04132C; --on-tile:#FFFFFF;

  /* login + legal vocabulary (aliases; Clerk reads --accent --ink --muted --panel --cell --cell-bd) */
  --paper:#F6F7FA; --panel:#FFFFFF; --ink:#04132C; --text:#0B1A33;
  --cell:#FFFFFF; --cell-bd:#E3E8F0; --wm:rgba(4,19,44,.045);
}

/* Shared primitives used verbatim by more than one page. */
.cqe-eb{font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cqe-eb::before{content:"<"}.cqe-eb::after{content:">"}
/* pale haze: the brand gradient's own tones, blurred, drifting slowly. Hero surfaces only. */
.cqe-haze{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(160deg,#FFFFFF,#F1F4F8)}
.cqe-haze::before,.cqe-haze::after{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;filter:blur(28px);animation:cqeDrift 40s linear infinite;
  background:radial-gradient(38% 42% at 22% 30%,rgba(205,191,163,.55),transparent 70%),radial-gradient(30% 36% at 78% 26%,rgba(169,196,232,.9),transparent 70%),radial-gradient(26% 30% at 62% 86%,rgba(91,125,177,.26),transparent 70%),radial-gradient(34% 40% at 12% 90%,rgba(74,95,134,.16),transparent 70%)}
.cqe-haze::after{opacity:.7;animation-direction:reverse;animation-duration:52s;background:radial-gradient(30% 34% at 70% 60%,rgba(91,125,177,.22),transparent 70%),radial-gradient(28% 30% at 30% 70%,rgba(255,255,255,.9),transparent 70%)}
.cqe-haze>*{position:relative;z-index:1}
@keyframes cqeDrift{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(4%,-3%) rotate(6deg)}100%{transform:translate(0,0) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.cqe-haze::before,.cqe-haze::after{animation:none}}
@media print{.cqe-haze::before,.cqe-haze::after{display:none}}