/* ==========================================================================
   tokens.css: SHARED design tokens (Group C)
   Owners: ayceofspace.com (PR) · reused by NewXEra (Skool).
   Contents: 1) palette + type + spacing tokens  2) black-trim frame
             3) black footer rail  4) three-diamond mark  5) motion guards
   Rules: no site-specific layout here. Change a token, not a selector.
   Frame: #0B0B0B 6→14px, cream mat, gold hairline (black-trim 2026-10-05).
   ========================================================================== */
:root{
  /* ink (frame, footer, dark sections) */
  --ink:#0B0B0B; --ink-2:#131210; --ink-3:#1C1A16;
  /* gold: #FFD700 is Ayce's accent. Use --gold-text for text on cream (AA). */
  --gold:#FFD700; --gold-soft:#F3DA86; --gold-warm:#E9C25A;
  --gold-text:#6E5300;           /* 6.8:1 on --cream, 6.2:1 on --cream-2 */
  --gold-line:rgba(255,215,0,.6); --gold-line-soft:rgba(255,215,0,.22);
  --gold-glow:rgba(255,215,0,.14);
  /* paper */
  --cream:#FBF7EC; --cream-2:#F3EDDC; --paper:#FFFDF8;
  /* text */
  --text:#1B1A17; --text-mute:#58534A;          /* 7.1:1 on --cream */
  --on-ink:#F4EFE4; --on-ink-mute:#BDB5A3;      /* 9.7:1 on --ink */
  --rule:rgba(11,11,11,.14); --rule-ink:rgba(255,215,0,.18);
  /* type */
  --serif:"Cormorant Garamond",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* layout */
  --pad:clamp(20px,5vw,72px); --max:1200px; --radius:2px;
  --ease:cubic-bezier(.2,.7,.1,1);
  /* black trim frame */
  --trim-ink:var(--ink);
  --trim-w:clamp(6px,1.1vw,14px);
  --trim-gap:clamp(2px,.35vw,4px);
  --trim-mat:var(--cream);
  --trim-hair:var(--gold-line);
  --trim-inset:calc(var(--trim-w) + var(--trim-gap) + 1px);
  /* diamond mark */
  --dm-stroke:var(--gold); --dm-split:rgba(255,215,0,.55); --dm-dim:rgba(255,215,0,.22);
  --dm-dot:var(--gold);
  --header-h:64px;
}

/* ---- 2) black-trim frame: add class="trim-frame" to <body> ---- */
html{background:var(--trim-ink)}
body.trim-frame{
  padding:var(--trim-inset);
  padding-left:max(var(--trim-inset),env(safe-area-inset-left));
  padding-right:max(var(--trim-inset),env(safe-area-inset-right));
  padding-bottom:max(var(--trim-inset),env(safe-area-inset-bottom));
  min-height:100vh;
}
body.trim-frame::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;
  box-shadow:inset 0 0 0 var(--trim-w) var(--trim-ink),
             inset 0 0 0 calc(var(--trim-w) + var(--trim-gap)) var(--trim-mat);
}
body.trim-frame::after{
  content:"";position:fixed;inset:calc(var(--trim-w) + var(--trim-gap));
  border:1px solid var(--trim-hair);border-radius:2px;pointer-events:none;z-index:90;
}
@media (forced-colors:active){
  body.trim-frame::before{box-shadow:none;border:var(--trim-w) solid CanvasText}
  body.trim-frame::after{border-color:CanvasText}
}
@media print{
  html{background:#fff} body.trim-frame{padding:0}
  body.trim-frame::before,body.trim-frame::after{display:none}
}

/* ---- 3) black footer rail: <footer class="trim-footer"> ---- */
.trim-footer{background:var(--ink);color:var(--on-ink);border-top:1px solid var(--trim-hair)}
.trim-footer a{color:var(--gold);text-decoration:none}
.trim-footer a:hover,.trim-footer a:focus-visible{color:#FFEA7A;text-decoration:underline;text-underline-offset:3px}
.trim-footer .muted{color:var(--on-ink-mute)}

/* ---- 4) three-diamond mark (cube of three rhombi; each = two triangles back to back) ----
   SVG classes: .dm-face (rhombus edge) .dm-fill .dm-split (triangle seam) .dm-dim (inactive) .dm-dot .dm-ring */
.diamond-mark{display:block;overflow:visible}
.diamond-mark .dm-face{fill:none;stroke:var(--dm-stroke);stroke-width:1.4;stroke-linejoin:round}
.diamond-mark .dm-split{fill:none;stroke:var(--dm-split);stroke-width:.8;stroke-dasharray:2 3}
.diamond-mark .dm-dim{fill:none;stroke:var(--dm-dim);stroke-width:1}
.diamond-mark .dm-dot{fill:var(--dm-dot)}
.diamond-mark .dm-ring{fill:none;stroke:var(--dm-stroke);stroke-width:.8;opacity:.7}
.diamond-mark .dm-ring-2{fill:none;stroke:var(--dm-stroke);stroke-width:.4;opacity:.25}
.dm-bullet{display:inline-block;width:.5em;height:.5em;border:1px solid currentColor;transform:rotate(45deg);flex:none}

/* ---- 5) motion guard: every animation must sit under no-preference ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}