/* Self-contained: only Exo 2 (self-hosted below) is used. */

/* ============================================================
   MONKI MEDIA — Design Foundations
   Colors + Typography tokens
   Brand: black · white · orange · warm naturals
   Typeface: Exo 2 (variable) · IBM Plex Serif (editorial)
   ============================================================ */

/* ---- Fonts: Exo 2 (self-hosted) ----------------------------
   Variable fonts cover the full 100–900 range; the explicit
   static @font-face rules below wire every uploaded weight/
   style file individually so the brand-font set is fully
   recognised. Both layers point at the same family. */
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-VariableFont_wght.ttf") format("truetype-variations"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight:100 900; font-style:italic; font-display:swap; }

/* Static weights — upright */
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-Thin.ttf") format("truetype");        font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-ExtraLight.ttf") format("truetype");  font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-Light.ttf") format("truetype");       font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-Regular.ttf") format("truetype");     font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-Medium.ttf") format("truetype");      font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-SemiBold.ttf") format("truetype");    font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-Bold.ttf") format("truetype");        font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-ExtraBold.ttf") format("truetype");   font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-Black.ttf") format("truetype");       font-weight:900; font-style:normal; font-display:swap; }
/* Static weights — italic */
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-ThinItalic.ttf") format("truetype");        font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-ExtraLightItalic.ttf") format("truetype");  font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-LightItalic.ttf") format("truetype");       font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-Italic.ttf") format("truetype");            font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-MediumItalic.ttf") format("truetype");      font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-SemiBoldItalic.ttf") format("truetype");    font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-BoldItalic.ttf") format("truetype");        font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-ExtraBoldItalic.ttf") format("truetype");   font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:"Exo 2"; src:url("fonts/Exo2-BlackItalic.ttf") format("truetype");       font-weight:900; font-style:italic; font-display:swap; }

:root {
  /* ---- Brand core (sampled from the original logo) -------- */
  --orange:        #E07820;   /* primary accent — authentic logo orange */
  --orange-dark:   #BF6113;   /* hover / press */
  --orange-deep:   #A8530C;   /* pressed / text-on-light emphasis */
  --orange-tint:   #F8E3CC;   /* soft background wash */
  --orange-soft:   #FCF1E4;   /* faintest wash */
  --brown:         #814A1B;   /* logo brown — warm secondary accent */

  /* ---- Ink (warm blacks & browns) ------------------------- */
  --ink-900:       #17120D;   /* near-black — headlines, dark surfaces */
  --ink-800:       #241B14;   /* espresso — alt dark surface */
  --ink-700:       #3A2E24;   /* dark brown */
  --ink-500:       #6E5C49;   /* muted warm brown — secondary text */
  --ink-400:       #93826D;   /* tertiary / captions */

  /* ---- Paper & sand (warm neutrals) ----------------------- */
  --white:         #FFFFFF;
  --paper:         #FBF8F3;   /* default page background */
  --sand-100:      #F3ECE1;   /* raised surfaces / cards */
  --sand-200:      #E9DECE;   /* subtle fills */
  --sand-300:      #DBCBB4;   /* strong fills */
  --line:          #E2D7C6;   /* hairline borders on paper */
  --line-strong:   #CDBCA3;   /* emphasized borders */
  --line-dark:     #38302A;   /* borders on dark surfaces */

  /* ---- Semantic ------------------------------------------- */
  --bg:            var(--paper);
  --surface:       var(--white);
  --fg1:           var(--ink-900);   /* primary text */
  --fg2:           var(--ink-500);   /* secondary text */
  --fg3:           var(--ink-400);   /* tertiary text */
  --accent:        var(--orange);
  --accent-fg:     #FFFFFF;
  --on-dark-1:     #F6EFE6;          /* primary text on dark */
  --on-dark-2:     #BCAA95;          /* secondary text on dark */

  /* ---- Typography ----------------------------------------- */
  --font-display:  "Exo 2", system-ui, sans-serif;
  --font-body:     "Exo 2", system-ui, sans-serif;
  --font-serif:    "IBM Plex Serif", Georgia, "Times New Roman", serif;  /* leads, intros, editorial accents */

  /* Fluid display scale (editorial, tight tracking) */
  --fs-display:    clamp(3.4rem, 9vw, 8rem); /* @kind font */
  --fs-h1:         clamp(2.6rem, 6vw, 5rem);     /* @kind font */
  --fs-h2:         clamp(2rem, 4vw, 3.2rem);     /* @kind font */
  --fs-h3:         clamp(1.4rem, 2.2vw, 1.9rem); /* @kind font */
  --fs-lead:       clamp(1.15rem, 1.6vw, 1.45rem); /* @kind font */
  --fs-body:       1.0625rem; /* @kind font */
  --fs-small:      0.9375rem; /* @kind font */
  --fs-eyebrow:    0.8125rem; /* @kind font */

  --lh-tight:      1.02;  /* @kind font */
  --lh-snug:       1.15;  /* @kind font */
  --lh-body:       1.6;   /* @kind font */

  --tracking-display: -0.025em; /* @kind font */
  --tracking-tight:   -0.01em;  /* @kind font */
  --tracking-eyebrow: 0.22em;   /* @kind font */

  --w-light:    300; /* @kind font */
  --w-regular:  400; /* @kind font */
  --w-medium:   500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold:     700; /* @kind font */
  --w-black:    900; /* @kind font */

  /* ---- Spacing scale (8pt-based) -------------------------- */
  --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; --sp-11: 192px;

  /* ---- Radii ---------------------------------------------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  /* ---- Shadows (warm, low, restrained) -------------------- */
  --shadow-sm: 0 1px 2px rgba(33,21,12,.06), 0 2px 6px rgba(33,21,12,.05);
  --shadow-md: 0 6px 18px rgba(33,21,12,.08), 0 2px 6px rgba(33,21,12,.05);
  --shadow-lg: 0 24px 60px rgba(33,21,12,.14), 0 6px 16px rgba(33,21,12,.07);

  /* ---- Motion --------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.2,1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 260ms; /* @kind other */
  --dur-slow: 520ms; /* @kind other */

  /* ---- Layout --------------------------------------------- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px); /* @kind spacing */
}

/* ============================================================
   Semantic element styling (opt-in via .ds-prose or global)
   ============================================================ */
.ds-type-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg1);
}
.ds-type-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.ds-type-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
.ds-type-lead {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg2);
}
.ds-type-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}
.ds-type-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}