/* ============================================================
   YEETUZ-X — shared design tokens. One source of truth for every
   page (index + writeups + 404). Page stylesheets build on these.
   ============================================================ */
:root {
  color-scheme: dark;

  --ground:    #0a0b0e;
  --ground-2:  #0c0e12;
  --surface:   #121419;
  --surface-2: #191c23;
  --line:      #22262e;   /* decorative rules only */
  --line-soft: #171a20;
  --line-ui:   #5c6067;   /* 3.1:1 on ground — boundaries of interactive controls */

  --text:   #eceef1;
  --muted:  #9aa0ab;
  --faint:  #8a919c;

  --accent:        #e6a84c;
  --accent-bright: #f4c579;
  --accent-deep:   #b9822f;
  --accent-glow:   rgba(230, 168, 76, 0.16);
  --accent-ember:  #c9702a;                 /* deep rust-amber — far end of the one signature sweep */
  --grad-signature: linear-gradient(103deg, var(--accent-bright) 0%, var(--accent) 45%, var(--accent-ember) 100%);

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 88px);

  --f-display: "Bricolage Grotesque", "Georgia", serif;
  --f-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
  --step-3:  clamp(2.3rem, 1.7rem + 3vw, 4rem);
  --step-4:  clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* height of the dismissible preview banner; 0 when dismissed or JS-less */
  --announce-h: 0px;
}
:root.announce-on { --announce-h: 34px; }

html { color-scheme: dark; }

::selection { background: var(--accent); color: #0a0b0e; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 2px;
}