/* ============================================================
   COAS Design System — Colors & Typography
   ============================================================
   Hard, monochromatic, editorial. No gradients of color, no
   pastels — just deep black, paper white, and a dial of grays
   plus one warning-red accent reserved for "RATED" / stamp
   moments. Typography is Futura Cyrillic across the board:
   Light/Book for body and serene editorial copy, Demi/Bold
   for product-grade callouts, Heavy/ExtraBold for the
   stencil-headline shouts that define the brand.
   ============================================================ */

/* ----- Webfonts ------------------------------------------- */
@font-face {
  font-family: "Futura Cyrillic";
  src: url("./fonts/FuturaCyrillicLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura Cyrillic";
  src: url("./fonts/FuturaCyrillicBook.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura Cyrillic";
  src: url("./fonts/FuturaCyrillicMedium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura Cyrillic";
  src: url("./fonts/FuturaCyrillicDemi.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura Cyrillic";
  src: url("./fonts/FuturaCyrillicBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura Cyrillic";
  src: url("./fonts/FuturaCyrillicExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura Cyrillic";
  src: url("./fonts/FuturaCyrillicHeavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Base palette ------------------------------------- */
  --coas-black:      #000000;   /* paper-printed black */
  --coas-ink:        #0A0A0A;   /* near-black for large fills */
  --coas-graphite:   #1A1A1A;
  --coas-charcoal:   #2A2A2A;
  --coas-iron:       #4A4A4A;
  --coas-steel:      #6B6B6B;
  --coas-ash:        #9A9A9A;
  --coas-fog:        #C7C7C7;
  --coas-bone:       #E5E5E5;
  --coas-paper:      #F2F2EE;   /* slightly warm paper white */
  --coas-white:      #FFFFFF;

  /* ----- Accent (used sparingly: stamps, errors, "RATED") -- */
  --coas-red:        #E60012;   /* registered-mark red */
  --coas-red-deep:   #A8000D;

  /* ----- Semantic foreground/background ------------------- */
  --bg:        var(--coas-black);
  --bg-elev:   var(--coas-graphite);
  --bg-paper:  var(--coas-paper);
  --bg-invert: var(--coas-white);

  --fg:        var(--coas-white);
  --fg-2:      var(--coas-fog);     /* secondary text on dark */
  --fg-3:      var(--coas-ash);     /* tertiary / metadata    */
  --fg-mute:   var(--coas-steel);
  --fg-invert: var(--coas-black);

  --border:        rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.32);
  --border-paper:  rgba(0,0,0,0.18);

  --stamp:    var(--coas-red);

  /* ----- Type stack -------------------------------------- */
  --font-sans:    "Futura Cyrillic", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Futura Cyrillic", "Futura", "Avenir Next", Arial, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* ----- Type scale (1920-leaning, scales down) ---------- */
  --fs-mega:     clamp(72px, 12vw, 200px);  /* manifesto shouts        */
  --fs-display:  clamp(48px, 7vw, 112px);   /* slide titles            */
  --fs-h1:       clamp(40px, 5vw, 72px);
  --fs-h2:       clamp(28px, 3.4vw, 48px);
  --fs-h3:       clamp(22px, 2.2vw, 32px);
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-body-lg:  18px;
  --fs-small:    14px;
  --fs-micro:    11px;
  --fs-stamp:    10px;     /* set in caps + tracked, for badges    */

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-stamp:  0.18em;   /* "APPROVED", "RATED CONTENT"      */

  /* ----- Spacing (8pt-ish, with extra editorial steps) --- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ----- Radii — almost everything is squared ----------- */
  --radius-0: 0px;          /* default: hard-edge            */
  --radius-1: 2px;          /* faint softening on inputs     */
  --radius-2: 4px;
  --radius-pill: 999px;     /* used for capsule controls only*/

  /* ----- Borders ---------------------------------------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-stamp: 4px;          /* the chunky outline on badges   */

  /* ----- Shadows (rare) — flat brand, used only on lifted
            cards over paper backgrounds) -------------------- */
  --shadow-paper: 0 1px 0 rgba(0,0,0,0.08), 0 18px 32px -16px rgba(0,0,0,0.18);
  --shadow-press: inset 0 0 0 1px rgba(0,0,0,0.12);

  /* ----- Motion ---------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   Semantic typography classes
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.coas-paper { background: var(--bg-paper); color: var(--fg-invert); }

.coas-mega {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-mega);
  line-height: 0.92;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.coas-display {
  font-family: var(--font-display);
  font-weight: 300;                   /* the deck title style: thin caps */
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.coas-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.coas-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.coas-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.coas-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
}

.coas-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

.coas-body-lg {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
}

.coas-quote {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.coas-small  { font-size: var(--fs-small);  line-height: 1.4; color: var(--fg-2); }
.coas-micro  { font-size: var(--fs-micro);  line-height: 1.3; color: var(--fg-3); }

.coas-stamp {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-stamp);
  line-height: 1;
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
}

.coas-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Element-level defaults for prose blocks */
.coas-prose h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.coas-prose h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); }
.coas-prose h3 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-h3); }
.coas-prose p  { font-size: var(--fs-body); line-height: var(--lh-normal); margin: 0 0 var(--sp-4); }
.coas-prose code { font-family: var(--font-mono); font-size: 0.92em; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: var(--radius-1); }