/* ==========================================================================
   MUHIIM — DESIGN TOKENS
   Brand: Muhiim Teal #02534D + Muhiim Orange #FF9A02, set in GC Gatuzo.
   Signature: the chevron bands of the Muhiim mark and its straight, cut corners.
   ========================================================================== */

/* ---------- Brand typeface: GC Gatuzo ---------- */
@font-face { font-family: 'Gatuzo'; src: url('../fonts/gatuzo/gatuzo-100.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gatuzo'; src: url('../fonts/gatuzo/gatuzo-200.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gatuzo'; src: url('../fonts/gatuzo/gatuzo-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gatuzo'; src: url('../fonts/gatuzo/gatuzo-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gatuzo'; src: url('../fonts/gatuzo/gatuzo-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gatuzo'; src: url('../fonts/gatuzo/gatuzo-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gatuzo'; src: url('../fonts/gatuzo/gatuzo-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gatuzo'; src: url('../fonts/gatuzo/gatuzo-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- Companion face: supplies the numerals & punctuation the Gatuzo demo file omits ---------- */
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree/figtree-300.woff2') format('woff2'); font-weight: 100 300; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree/figtree-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree/figtree-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree/figtree-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree/figtree-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree/figtree-800.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }

:root {
  /* Brand core */
  --teal-950: #01241F;
  --teal-900: #013B37;
  --teal-800: #02534D;   /* Muhiim Teal — wordmark */
  --teal-700: #0B645D;
  --teal-600: #1C6E66;
  --teal-300: #7FB8B0;
  --teal-100: #D9EAE6;
  --teal-50:  #EEF5F3;

  --orange-700: #9E5A00;  /* orange for small text on light surfaces (AA) */
  --orange-600: #E68A00;
  --orange-500: #FF9A02;  /* Muhiim Orange — mark */
  --orange-300: #FFC266;
  --orange-100: #FFF0D6;

  /* Neutrals (cool, teal-leaning) */
  --ink:        #0F2B28;
  --ink-2:      #455F5B;
  --ink-3:      #637a76;
  --line:       #D6E3E0;
  --line-strong:#B8CDC9;
  --white:      #FFFFFF;

  /* Semantic surfaces */
  --bg-page: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-tint: var(--teal-50);
  --header-bg: rgba(255, 255, 255, 0.97);

  /* Legacy aliases so older references still resolve to brand values */
  --brand-navy-900: var(--ink);
  --brand-navy-600: var(--teal-800);
  --brand-navy-400: var(--teal-600);
  --brand-gold-500: var(--orange-500);
  --brand-gold-600: var(--orange-700);
  --brand-gold-100: var(--orange-100);
  --color-primary: var(--teal-800);
  --color-accent: var(--orange-500);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --border-color: var(--line);

  /* Type */
  --font-brand: 'Gatuzo', 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-brand);
  --font-body: var(--font-brand);

  --fs-xs: 0.8125rem;    /* 13 */
  --fs-sm: 0.9375rem;    /* 15 */
  --fs-base: 1.0625rem;  /* 17 */
  --fs-md: 1.25rem;      /* 20 */
  --fs-lg: 1.5rem;       /* 24 */
  --fs-xl: clamp(1.95rem, 3.3vw, 2.85rem);
  --fs-2xl: clamp(2.4rem, 4.8vw, 4rem);
  --fs-hero: clamp(2.7rem, 5.6vw, 4.9rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(4.5rem, 9vw, 7.5rem);

  /* Shape — the mark is built from straight cuts, so corners are cut, not rounded */
  --cut-sm: 10px;
  --cut-md: 18px;
  --cut-lg: 34px;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-full: 9999px;

  --shadow-float: 0 22px 40px -20px rgba(1, 36, 31, 0.55);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 150ms var(--ease);
  --transition-normal: 250ms var(--ease);

  --container-max: 1240px;
  --header-height: 78px;
}

/* ---------- Dark theme (pages that include the theme toggle) ---------- */
[data-theme="dark"] {
  --ink: #E8F2F0;
  --ink-2: #A7C0BB;
  --ink-3: #8DA7A2;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --bg-page: #04201D;
  --bg-surface: #072925;
  --bg-tint: #0A302B;
  --header-bg: rgba(4, 32, 29, 0.97);
  --teal-50: #0C332E;
  --teal-100: #12403A;
  --orange-700: var(--orange-300);
  color-scheme: dark;
}