/* ═══════════════════════════════════════════════════════════════════
   MATERIALS: one set of tokens for every surface, light and motion
   ═══════════════════════════════════════════════════════════════════

   Linked before every page's own stylesheet, so a page can use these
   and the shared scripts (lunara-shell.js, lunara-engine.js,
   lunara-intro.js, lunara-os.js) all draw from the same values.

   Seven materials, and what each is for:
     obsidian         the ground: near-black, faintly warm, never #000
     brushed titanium structure: hairlines, rails, secondary text
     champagne gold   the institution: the seal, primary actions, focus
     smoked glass     anything that floats: navigation, panels, dialogs
     crystal          verification: a check that has passed, a signature
     ceramic          paper: documents, certificates, printable records
     light            not a colour but a behaviour: the specular sheen
                      and edge light that follow the pointer

   Motion has three speeds and three curves. A reader who asks for
   reduced motion gets none of the durations (see the end of the file).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* obsidian */
  --m-obsidian:#07080A;
  --m-obsidian-2:#0B0C10;
  --m-obsidian-3:#111319;
  /* brushed titanium */
  --m-titanium:#8E949D;
  --m-titanium-hi:#C9CED6;
  --m-titanium-lo:#4A4F58;
  --m-brush:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
  /* champagne gold */
  --m-gold:#C6A15B;
  --m-gold-hi:#F0D99B;
  --m-gold-lo:#8C6A2E;
  --m-gold-foil:linear-gradient(100deg,#8C6A2E 0%,#C6A15B 24%,#F0D99B 46%,#FFF6DE 52%,#F0D99B 60%,#C6A15B 80%,#8C6A2E 100%);
  /* smoked glass */
  --m-glass:rgba(14,16,21,.66);
  --m-glass-hi:rgba(26,29,36,.72);
  --m-glass-edge:rgba(255,255,255,.075);
  --m-glass-blur:14px;
  /* crystal: verified, passed, signed */
  --m-crystal:#9FE3C4;
  --m-crystal-glow:rgba(127,224,176,.28);
  /* ceramic: paper */
  --m-ceramic:#ECE7DD;
  --m-ceramic-ink:#1B1A17;
  /* text on obsidian */
  --m-ink:#F1ECE2;
  --m-ink-2:#B8B2A6;
  --m-ink-3:#8D877C;
  /* states, kept apart from the gold so a warning never looks like a brand mark */
  --m-ok:#58C79A;
  --m-warn:#D9A64F;
  --m-bad:#E26D73;

  /* light */
  --m-sheen:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(255,240,205,.10),rgba(240,217,155,.035) 32%,transparent 60%);
  --m-edge:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(240,217,155,.55),rgba(240,217,155,0) 70%);
  /* elevation: one key light, from above */
  --m-e1:0 1px 0 rgba(255,255,255,.04) inset,0 6px 16px -10px rgba(0,0,0,.8);
  --m-e2:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -22px rgba(0,0,0,.9);
  --m-e3:0 1px 0 rgba(255,255,255,.06) inset,0 34px 80px -36px rgba(0,0,0,.95),0 0 0 1px rgba(240,217,155,.06);
  /* radius */
  --m-r1:6px;--m-r2:12px;--m-r3:20px;--m-pill:999px;
  /* focus: one ring everywhere, visible on every material */
  --m-focus:0 0 0 2px var(--m-obsidian),0 0 0 4px rgba(240,217,155,.85);

  /* motion */
  --t-fast:160ms;--t-base:280ms;--t-slow:560ms;--t-cine:1200ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-press:cubic-bezier(.3,.7,.4,1);

  /* the pointer field (lunara-field.js): eased, -0.5..0.5 across the viewport */
  --px:0;--py:0;
}

/* ── selection, focus, scrollbars: the same on every page ────────── */
::selection{background:rgba(198,161,91,.38);color:#FFFDF7}
:where(a,button,input,select,textarea,summary,[tabindex],[role=button]):focus-visible{
  outline:2px solid var(--m-gold-hi);outline-offset:3px;border-radius:var(--m-r1)}
:where(input,select,textarea):focus-visible{outline-offset:1px}
html{scrollbar-color:#2A2D35 var(--m-obsidian)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--m-obsidian)}
::-webkit-scrollbar-thumb{background:#262930;border:3px solid var(--m-obsidian);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#3A3E48}

/* ── the seal: always round. The artwork is a coin, so a glow or a
   shadow given to the image must follow the coin, never its square box */
img[src*="lunara_emblem"]{border-radius:50%}

/* ── press: anything that acts gives a little under the finger ───── */
:where(button,.btn,.door,.lxn-cta,.lxn-apply,[role=button]):not(:disabled):active{scale:.975;transition:scale var(--t-fast) var(--ease-press)}

/* ── material classes, for anything new ──────────────────────────── */
.m-obsidian{background:var(--m-obsidian-2);color:var(--m-ink)}
.m-glass{background:var(--m-glass);border:1px solid var(--m-glass-edge);box-shadow:var(--m-e2);
  -webkit-backdrop-filter:blur(var(--m-glass-blur)) saturate(1.2);backdrop-filter:blur(var(--m-glass-blur)) saturate(1.2)}
.m-titanium{background:linear-gradient(180deg,#1A1D23,#121419),var(--m-brush);border:1px solid rgba(201,206,214,.10)}
.m-ceramic{background:var(--m-ceramic);color:var(--m-ceramic-ink)}
.m-gold-text{background:var(--m-gold-foil);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.m-hair{height:1px;border:0;background:linear-gradient(90deg,transparent,rgba(240,217,155,.45),transparent)}
.m-crystal{color:var(--m-crystal);text-shadow:0 0 18px var(--m-crystal-glow)}

/* a real wait: shown only while a request is in flight, never as decoration */
.m-loading{position:relative;overflow:hidden;color:transparent!important;background:var(--m-obsidian-3);border-radius:var(--m-r1)}
.m-loading::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(201,206,214,.07),transparent);animation:mLoad 1.4s var(--ease-in-out) infinite}
@keyframes mLoad{to{transform:translateX(100%)}}
.m-error{color:var(--m-bad);border-color:rgba(226,109,115,.45)!important}

@media (prefers-reduced-motion:reduce){
  :root{--t-fast:0ms;--t-base:0ms;--t-slow:0ms;--t-cine:0ms}
  .m-loading::after{animation:none}
}