/* Oliizoi Brand Tokens
   ──────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=Hanken+Grotesk:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:ital,wght@0,400..700;1,400..700&family=Outfit:wght@200..800&family=Manrope:wght@300..700&family=Bricolage+Grotesque:opsz,wght@12..96,300..700&display=swap');

:root {
  /* ── Anchors ───────────────────────── */
  --loam-900: #1f1810;
  --loam-800: #2b2218;
  --loam-700: #3d2f1f;   /* primary anchor — Deep Loam */
  --loam-600: #5c4628;
  --loam-500: #7a5d35;
  --loam-400: #9b7e4f;
  --loam-300: #bda079;
  --loam-200: #d9c4a4;
  --loam-100: #ece0c8;
  --loam-50:  #f4ecdb;

  --moss-900: #1d2418;
  --moss-800: #2f3a26;
  --moss-700: #4f5a37;
  --moss-600: #6b7548;   /* Moss */
  --moss-500: #87914f;
  --moss-400: #a3ac75;
  --moss-300: #becba0;
  --moss-200: #d6dec0;
  --moss-100: #e8ecd6;

  --ochre-900: #4a3a14;
  --ochre-800: #6e561f;
  --ochre-700: #97772c;
  --ochre-600: #b89248;
  --ochre-500: #c29a4e;   /* Ochre Sand */
  --ochre-400: #d3b070;
  --ochre-300: #e0c794;
  --ochre-200: #ecdab9;
  --ochre-100: #f4e9d4;

  --linen-50:  #faf8f5;   /* matches the reference 'Linen' exactly */
  --linen-100: #f4edde;
  --linen-200: #ece2cb;
  --linen-300: #ddd0b3;

  --char-900: #16181a;
  --char-800: #1f221d;
  --char-700: #2b2e26;
  --char-600: #3a3d33;
  --char-500: #4d5145;
  --char-400: #6d7164;
  --char-300: #9da294;
  --char-200: #c4c8bd;

  /* ── Accents (warm + cool) ─────────────────────────
     Two accents bring the earth palette to life.
     Used sparingly; Rust ~10% of any surface, Reef <5%. */
  --rust-900: #5a2716;
  --rust-800: #7e3a22;
  --rust-700: #9d4a2c;
  --rust-600: #c4613a;    /* Rust — primary CTA, emphasis */
  --rust-500: #d68059;
  --rust-400: #e3a081;
  --rust-300: #efc4ad;
  --rust-200: #f6dccb;
  --rust-100: #fbeee2;

  --reef-900: #0b3f3b;
  --reef-800: #155f5a;
  --reef-700: #1b8a83;
  --reef-600: #25bab0;    /* Reef — vitality, ecological */
  --reef-500: #4fc9c0;
  --reef-400: #7ad6cf;
  --reef-300: #a8e2dc;
  --reef-200: #ccede9;
  --reef-100: #e6f6f4;

  /* ── Semantic ─────────────────────────────────────── */
  --ok:    #5a7a3d;       /* growth/success — moss-derived */
  --warn:  #b8862f;       /* warning — deep ochre */
  --alert: #9d4a2c;       /* alert — rust-700 (was clay red) */
  --info:  #1b8a83;       /* info — reef-700 (was sedge water) */

  /* ── Type ───────────────────────────── */
  --ff-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --ff-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Geometry ─────────────────────── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --hair: 1px;
}

/* Reset within artboards */
.ab, .ab * { box-sizing: border-box; }
.ab { font-family: var(--ff-sans); color: var(--char-700); }

/* Utility */
.mono { font-family: var(--ff-mono); letter-spacing: 0.02em; }
.serif { font-family: var(--ff-display); }
.sans { font-family: var(--ff-sans); }
.tracked { letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; font-weight: 500; }
.hair { border: 0; border-top: 1px solid currentColor; opacity: 0.18; }

/* Eyebrow used across artboards */
.eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--char-500);
}