/* ===========================================================
   Unkuff / EMBER brand tokens.
   Chosen from the brand-world board (explore/index.html, world 01).
   The ONLY palette for the home page candidates.
   Do NOT import shared/tokens.css, that is the old flat palette.
   =========================================================== */

:root {
  /* Ground. Never pure #000. */
  --ground:      #120D0A;
  --ground-deep: #0B0806;
  --raised:      #1B1310;

  /* Fire ramp, cool to hot */
  --deep:    #7A2408;
  --burn:    #C93C10;
  --accent:  #FF8636;   /* THE accent. One accent for the whole page. */
  --glow:    #FFC06C;
  --flare:   #FFE3B8;

  /* Text */
  --text:  #FFF7EF;
  --body:  #E4CFC0;
  --muted: #A28E82;

  /* Hairlines. Warm, never neutral grey. */
  --line:        rgba(255,180,120,0.14);
  --line-strong: rgba(255,180,120,0.28);

  /* Shape. ONE radius system: pill for interactive, 14px for surfaces. */
  --r-pill: 999px;
  --r-surface: 14px;

  /* Type. Bricolage Grotesque display. Mono for code/ids/logs ONLY. */
  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

/* Page-level grain. Fixed + pointer-events:none so it never repaints on scroll. */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: 0.15;
  mix-blend-mode: overlay;
}

/* The one primary CTA. #2B0D02 on #FF9E47 passes AA. */
.btn {
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 14px 26px; border-radius: var(--r-pill);
  border: 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  background: linear-gradient(180deg, #221713, #14100D);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,220,180,0.14),
    0 0 0 1px rgba(255,150,80,0.30),
    0 6px 26px -6px rgba(255,134,54,0.55),
    0 0 44px -10px rgba(255,134,54,0.45);
  transition: transform 140ms var(--ease), box-shadow 240ms var(--ease);
}
.btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,220,180,0.2),
    0 0 0 1px rgba(255,170,100,0.45),
    0 8px 32px -6px rgba(255,134,54,0.7),
    0 0 62px -8px rgba(255,134,54,0.6);
}
.btn:active { transform: translateY(1px) scale(0.985); }

.btn-quiet {
  background: rgba(255,247,239,0.04);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,220,180,0.1), 0 0 0 1px rgba(255,180,120,0.18);
}
.btn-quiet:hover { box-shadow: inset 0 1px 0 rgba(255,220,180,0.14), 0 0 0 1px rgba(255,180,120,0.34); }

/* ONE glass surface: every button and the nav pill on the one-minute page (home/cosmo).
   Single layer, CSS only. The rim is a masked ring rather than a border-box background:
   under a translucent fill a border-box gradient would show through the middle and
   hide the backdrop. `.btn` above is left for the older candidate pages. */
/* browser surfaces carry the palette too */
::selection { background: rgba(255,134,54,0.38); color: var(--text); }
html { caret-color: var(--accent); scrollbar-color: #4A3226 var(--ground-deep); accent-color: var(--accent); }

.glass {
  --glass-fill: rgba(18,12,9,0.55);
  position: relative; isolation: isolate;
  border: 0; border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,247,239,0.07), rgba(255,247,239,0) 60%), var(--glass-fill);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,247,239,0.24),
    inset 0 -10px 18px -10px rgba(255,134,54,0.42),
    0 14px 30px -14px rgba(255,120,40,0.6);
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, #FFE3B8, #FF8636 35%, rgba(255,247,239,0.1) 60%, #FFC06C);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* :where keeps this at one-class specificity so a page can size a button with one class */
.glass:where(a, button) {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--text); text-decoration: none; cursor: pointer; padding: 14px 28px;
  transition: transform 220ms var(--ease), box-shadow 320ms var(--ease);
}
.glass:where(a, button):hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,247,239,0.36),
    inset 0 -10px 18px -10px rgba(255,134,54,0.55),
    0 18px 34px -14px rgba(255,120,40,0.75);
}
.glass:where(a, button):active { transform: translateY(0) scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass { -webkit-backdrop-filter: none; backdrop-filter: none; --glass-fill: var(--raised); }
}