/* Design tokens — Breq Studio, 2026-10-12 brand pass.
   Source of truth for colour + type: the breq brand book
   (~/Documents/Website Business/breq-brand-deck/README.md "Brand constants"):
   Ink #0A0A0A · Paper #FFFFFF · Ember #EA3903 · Flame #FA520A · Saffron #FBAC18 · Sun #FDE135.
   Heat gradient runs diagonally, sun lower-left to ember upper-right, always with grain.
   Type: Plus Jakarta Sans (display 800, tracking -4.5% to -6%; body 400) + JetBrains Mono for specs.
   Both fonts are OFL and copied from the deck's assets/fonts. Variable names are kept from the
   earlier token set so the case pages (karya/*.html) and manifesto.html pick the brand up too. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-latin-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand colour */
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --ember: #EA3903;
  --flame: #FA520A;
  --saffron: #FBAC18;
  --sun: #FDE135;
  --heat: linear-gradient(32deg, var(--sun) 0%, var(--saffron) 24%, var(--flame) 62%, var(--ember) 100%);
  /* film grain laid over every heat field (brand rule: the gradient never ships clean) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* roles */
  --panel: #161616;
  --text: #FFFFFF;
  --muted: #9A9A9A;
  --muted-on-paper: #5E5E5E;
  --accent: var(--flame);
  --accent-rgb: 250, 82, 10;
  --field: var(--flame);
  --divider: rgba(255, 255, 255, .12);
  --divider-on-paper: rgba(10, 10, 10, .14);
  --menu-border: #2A2A2A;

  /* space */
  --nav-height: 64px;
  --edge: 16px;
  --radius: 14px; /* the one rounded radius: work panels + image frames (Datalands-style) */

  /* z-index scale */
  --z-index-preview: 40;
  --z-nav: 50;
  --z-cursor-ring: 60;
  --z-menu-backdrop: 90;
  --z-menu-panel: 91;
  --z-boot-cover: 9998;
  --z-boot-canvas: 9999;

  /* fonts — two families only */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-copy: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* type scale — brand book: display 800, tracking -4.5% to -6% */
  --text-base: clamp(1rem, .95rem + .2vw, 1.0625rem);
  --text-h2: clamp(2.6rem, 1rem + 5vw, 6rem);
  --text-display: clamp(2.8rem, .8rem + 6.6vw, 8.5rem);
  --display-weight: 800;
  --display-stretch: 100%;
  --display-tracking: -.05em;

  /* motion */
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --animation-default: .75s cubic-bezier(.65,.05,0,1);
}
@media (min-width: 768px) { :root { --edge: 2rem; } }