/* BEJÚ Creative — Glass & Gold design tokens + shared primitives.
   The system is documented in /DESIGN.md. Page stylesheets use these tokens only. */

:root{
  color-scheme:dark;

  /* canvas & surfaces */
  --canvas:#090B07;
  --canvas-2:#0D1009;
  --surface:#12150E;
  --surface-2:#181C13;
  --hairline:rgba(255,255,255,.08);
  --hairline-strong:rgba(255,255,255,.14);

  /* text ladder */
  --ink:#F5F5F7;
  --body:#C5C8BD;
  --muted:#9A9E91;
  --dim:#868A7E;

  /* New component materials follow the original olive-and-gold palette. */
  --media-black:#000;
  --silver-text:linear-gradient(180deg,#FFFFFF 0%,#EDEDEF 52%,#BDBEB8 100%);
  --device-metal:linear-gradient(145deg,#34362F 0%,#16170F 38%,#0B0C08 60%,#26271F 100%);
  --nav-fill:rgba(16,19,12,.42);
  --sheet-fill:rgba(9,11,7,.78);
  --media-glass:rgba(12,14,10,.65);
  --stage-light:radial-gradient(ellipse at 50% 44%,rgba(58,70,22,.14),transparent 65%);
  /* hero device: side buttons, a warm rim catching the gold light, glass glare, warm stage glow */
  --device-button:linear-gradient(90deg,#15160F 0%,#3A3B33 50%,#15160F 100%);
  --device-rim:inset -1px 0 0 rgba(244,227,175,.3),inset 1px 0 0 rgba(255,255,255,.07);
  --screen-glare:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.2) 45%,rgba(255,255,255,.05) 52%,transparent 62%);
  --stage-warm:radial-gradient(40% 32% at 52% 60%,rgba(199,162,75,.11),transparent 72%);
  --device-edge:#2B2C25;
  --fan-glow:radial-gradient(closest-side,rgba(199,162,75,.15),rgba(58,70,22,.08) 55%,transparent);
  --glass-bar:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.012) 55%),rgba(16,19,12,.68);
  --glass-bar-edge:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.2);

  /* gold material */
  --gold-bronze:#8A6424;
  --gold-deep:#A9823A;
  --gold:#C7A24B;
  --gold-bright:#E2C676;
  --gold-champagne:#F4E3AF;
  --gold-solid:#D8B865;           /* small text & icons */
  --on-gold:#1F1708;
  --gold-metal:
    radial-gradient(120% 140% at 28% -10%, rgba(255,248,226,.35) 0%, rgba(255,248,226,0) 46%),
    linear-gradient(180deg, #F4E3AF 0%, #E2C676 20%, #C7A24B 48%, #A9823A 74%, #A9823A 100%);
  --gold-metal-pressed:
    linear-gradient(180deg, #D9BC6A 0%, #C29C45 40%, #A07A33 75%, #7E5B20 100%);
  --gold-text:linear-gradient(180deg, #F7EAC0 0%, #E6CB7C 34%, #C7A24B 66%, #B58F40 100%);
  --gold-ring:linear-gradient(135deg, rgba(244,227,175,.85), rgba(138,100,36,.45) 38%, rgba(244,227,175,.18) 64%, rgba(199,162,75,.75));
  --gold-edge:
    inset 0 1px 0 rgba(255,246,214,.85),
    inset 0 -1px 0 rgba(90,62,18,.55),
    inset 0 0 0 1px rgba(122,88,32,.5);
  --gold-drop:0 1px 1px rgba(0,0,0,.35), 0 12px 28px -14px rgba(199,162,75,.55);

  /* semantic — never gold */
  --success:#4FD18B;
  --warning:#F59E0B;
  --error:#FF5F57;
  --info:#5AC8FA;

  /* glass */
  --glass-fill:rgba(24,28,19,.58);
  --glass-fill-strong:rgba(16,19,12,.78);
  --glass-blur:saturate(165%) blur(22px);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-float:0 1px 0 rgba(0,0,0,.25), 0 24px 60px -28px rgba(0,0,0,.8);

  /* type */
  --font:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-hero:clamp(3.2rem,8.2vw,6.6rem);
  --t-h2:clamp(2.2rem,4.6vw,3.7rem);
  --t-h3:1.2rem;
  --t-lead:clamp(1.12rem,1.5vw,1.32rem);
  --t-body:1.0625rem;
  --t-caption:.875rem;
  --t-label:.75rem;

  /* space & shape */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;
  /* section rhythm: one scale, three steps (desktop 96 / 128 / 160 · phone 64 / 80) */
  --sec-s:clamp(4rem,7.5vw,6rem);
  --sec-m:clamp(5rem,10vw,8rem);
  --sec-l:clamp(5rem,12.5vw,10rem);
  --pad:clamp(1.25rem,5vw,5rem);            /* page gutter */
  --container:74rem;                          /* every section snaps to this */
  --gutter:clamp(1rem,2vw,1.5rem);            /* 12-column grid gap */
  /* radius grammar: 8 · 18 · pill (+ 28 for feature panels and the phone) */
  --r-sm:8px;--r-lg:18px;--r-xl:28px;--r-pill:999px;

  /* motion — everything eases out, nothing bounces */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-1:180ms;   /* micro: hover, press, colour */
  --dur-2:400ms;   /* UI: menus, accordions, toggles */
  --dur-3:800ms;   /* reveals, the gold sweep */
}

/* ── base ─────────────────────────────────────────────────── */
html{background:var(--canvas);-webkit-text-size-adjust:100%}
/* controls don't inherit type by default — they rendered in Arial */
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
body{
  font-family:var(--font);font-size:var(--t-body);line-height:1.6;letter-spacing:-.01em;
  color:var(--body);background:var(--canvas);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* Ambient light for the glass to refract. Fixed, soft, never animated. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 760px at 8% -8%, rgba(58,70,22,.32), transparent 62%),
    radial-gradient(900px 640px at 94% 6%, rgba(199,162,75,.055), transparent 60%),
    radial-gradient(1200px 900px at 50% 110%, rgba(30,36,12,.42), transparent 64%);
}
::selection{background:rgba(199,162,75,.35);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-champagne);outline-offset:3px;border-radius:var(--r-sm)}
.tnum{font-variant-numeric:tabular-nums}
/* desktop scrollbar: a thin dark track, warm thumb */
@media (hover:hover) and (pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:rgba(199,162,75,.35) var(--canvas)}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--canvas)}
  ::-webkit-scrollbar-thumb{background:rgba(199,162,75,.28);border-radius:var(--r-pill);border:3px solid var(--canvas)}
  ::-webkit-scrollbar-thumb:hover{background:rgba(199,162,75,.45)}
}

/* ── glass ────────────────────────────────────────────────── */
.glass{
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--hairline);
  box-shadow:var(--glass-highlight), var(--shadow-float);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass{background:var(--surface)}
}

/* Static glass: same fill, edge light and depth, no live blur. Over the calm canvas it
   reads identically, and a page of blurred cards is what made scrolling lag before. */
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 60%),var(--glass-fill);
  border:1px solid var(--hairline);
  box-shadow:var(--glass-highlight), var(--shadow-float);
}

/* 1px gold hairline for selected/featured panels (works over glass) */
.gold-ring{position:relative}
.gold-ring::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--gold-ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* large gold type only (prices, stats, one hero word) */
.gold-text{
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}

/* ── buttons ──────────────────────────────────────────────── */
.btn-gold,.btn-glass{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.8rem 1.6rem;border-radius:var(--r-pill);
  font:600 .95rem/1 var(--font);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),
             box-shadow var(--dur-1) var(--ease-out),filter var(--dur-1) var(--ease-out),scale var(--dur-1) var(--ease-out);
}
/* gold metal */
.btn-gold{
  color:var(--on-gold);background:var(--gold-metal);border:0;
  box-shadow:var(--gold-edge), var(--gold-drop);
  text-shadow:0 1px 0 rgba(255,244,210,.45);
}
.btn-gold::after{ /* one reflective sweep on hover/focus */
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,252,238,.0) 36%,rgba(255,252,238,.85) 47%,rgba(255,252,238,.25) 55%,transparent 64%);
  mix-blend-mode:soft-light;
  transform:translateX(-120%);
}
.btn-gold:hover{filter:brightness(1.05) saturate(1.04)}
.btn-gold:hover::after,.btn-gold:focus-visible::after{transform:translateX(120%);transition:transform var(--dur-3) var(--ease-in-out)}
.btn-gold:active{scale:.97;background:var(--gold-metal-pressed);
  box-shadow:inset 0 2px 6px rgba(70,48,12,.45),inset 0 0 0 1px rgba(122,88,32,.6),0 1px 1px rgba(0,0,0,.3)}
/* glass secondary */
.btn-glass{
  color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--hairline-strong);
  box-shadow:var(--glass-highlight);
}
.btn-glass:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.btn-glass:active{scale:.97;background:rgba(255,255,255,.05)}
/* disabled & loading */
.btn-gold:disabled,.btn-glass:disabled,.btn-gold[aria-disabled="true"],.btn-glass[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;filter:none;scale:1}
.btn-gold:disabled::after,.btn-gold[aria-disabled="true"]::after{display:none}
.btn-gold[aria-busy="true"],.btn-glass[aria-busy="true"]{color:transparent;text-shadow:none;pointer-events:none}
.btn-gold[aria-busy="true"]::before,.btn-glass[aria-busy="true"]::before{
  content:'';position:absolute;left:50%;top:50%;width:1.1rem;height:1.1rem;margin:-.55rem 0 0 -.55rem;
  border-radius:50%;border:2px solid currentColor;border-color:var(--on-gold) transparent var(--on-gold) var(--on-gold);
  animation:bj-spin .8s linear infinite}
.btn-glass[aria-busy="true"]::before{border-color:var(--ink) transparent var(--ink) var(--ink)}
@keyframes bj-spin{to{transform:rotate(360deg)}}

/* small label */
.label{font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-solid)}

/* ── motion preferences ───────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .btn-gold,.btn-glass{transition:none}
  .btn-gold::after{display:none}
  .btn-gold:active,.btn-glass:active{scale:1}
}