/* ============================================================
   MIMREN — Colors & Type
   AI strategy. Implementation. Impact.
   ============================================================
   Fonts (Google Fonts substitutions — see README → Fonts):
     Outfit             — display / wordmark idiom (200–600)
     Manrope            — body / UI                (300–700)
     Cormorant Garamond — editorial serif accents  (400–500, italic)
     JetBrains Mono     — code / tabular           (400, 500)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── CORE PALETTE ───────────────────────────────────── */
  /* Primary — Midnight Navy (sampled #0C1924 from brand sheet). */
  --navy-900: #060f1a;
  --navy-800: #0a1520;
  --navy-700: #0c1924;        /* PRIMARY — wordmark plate */
  --navy-600: #122130;
  --navy-500: #1a2b3d;

  /* Secondary — Slate (sampled #364146). */
  --slate-800: #1f272b;
  --slate-700: #2a3439;
  --slate-600: #364146;       /* SECONDARY */
  --slate-500: #4a565c;
  --slate-400: #6b7780;
  --slate-300: #8e98a1;
  --slate-200: #b8bfc6;
  --slate-100: #d9dde2;
  --slate-50:  #f1f3f5;

  /* Accent — Champagne / Brushed Gold (sampled #AF9E7A). */
  --gold-700: #7a6b4e;
  --gold-600: #8f7e5d;
  --gold-500: #af9e7a;        /* ACCENT */
  --gold-400: #c3b693;
  --gold-300: #d6ccaf;
  --gold-200: #e6dec9;
  --gold-100: #f3eee2;

  /* Paper — warm off-white for light surfaces. */
  --paper-50:  #faf8f4;
  --paper-100: #f5f2eb;
  --paper-200: #ebe6da;

  /* Semantic — muted, never neon. */
  --success: #6b8e6e;
  --warning: #c89a4a;
  --danger:  #a85a4d;
  --info:    #5d7a92;

  /* ─── SURFACE / FOREGROUND TOKENS ────────────────────── */
  /* Default (dark — brand-primary surface) */
  --bg:           var(--navy-700);
  --bg-raised:    var(--navy-600);
  --bg-sunken:    var(--navy-900);
  --bg-paper:     var(--paper-50);

  --fg:           #ffffff;
  --fg-muted:     rgba(255,255,255,.66);
  --fg-faint:     rgba(255,255,255,.42);
  --fg-on-paper:  var(--navy-700);
  --fg-on-paper-muted: var(--slate-500);

  --accent:       var(--gold-500);
  --accent-soft:  var(--gold-300);

  --rule:         rgba(255,255,255,.12);
  --rule-strong:  rgba(255,255,255,.26);
  --rule-paper:   rgba(12,25,36,.10);

  /* ─── TYPE FAMILIES ──────────────────────────────────── */
  --font-display: 'Outfit', 'Montserrat', system-ui, sans-serif;
  --font-body:    'Manrope', 'Inter', system-ui, sans-serif;
  --font-serif:   'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ─── TYPE SCALE ─────────────────────────────────────── */
  --fs-display:  clamp(56px, 7vw, 104px);
  --fs-h1:       clamp(40px, 4.5vw, 64px);
  --fs-h2:       clamp(30px, 3.2vw, 44px);
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-lead:     19px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-micro:    12px;
  --fs-eyebrow:  11px;

  --lh-display:  1.04;
  --lh-heading:  1.15;
  --lh-body:     1.6;
  --lh-tight:    1.3;

  /* Tracking — the brand's signature is wide letterspacing on uppercase. */
  --tr-display:  0.18em;
  --tr-eyebrow:  0.32em;
  --tr-button:   0.22em;
  --tr-tight:   -0.01em;

  /* ─── SPACING & RADII ───────────────────────────────── */
  --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;

  --radius-0:   0px;       /* default — Mimren is squared */
  --radius-1:   2px;
  --radius-2:   4px;
  --radius-3:   8px;
  --radius-pill: 999px;

  /* ─── ELEVATION ─────────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 4px 16px rgba(6,15,26,.10), 0 1px 2px rgba(6,15,26,.06);
  --shadow-3: 0 18px 40px rgba(6,15,26,.18), 0 2px 8px rgba(6,15,26,.10);
  --shadow-inset-hairline: inset 0 0 0 1px var(--rule);
  --shadow-gold: 0 0 0 1px var(--gold-500), 0 12px 32px rgba(175,158,122,.18);

  /* ─── MOTION ────────────────────────────────────────── */
  --ease-standard: cubic-bezier(.4, .0, .2, 1);
  --ease-out-soft: cubic-bezier(.16, .8, .24, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
}

/* ─── BASE ELEMENT STYLES ─────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — used for hero wordmarks. Thin + wide tracking + uppercase.
   This mirrors the wordmark idiom of the Mimren logo. */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-display);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
}

h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.005em;
  margin: 0;
}
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin: 0;
}
h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  margin: 0;
}

p   { margin: 0 0 var(--sp-4); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg-muted); }
small, .small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }

/* Eyebrow / kicker — the Mimren signature small-cap label */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Editorial serif italic — used sparingly for pull-quotes / accents */
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color      var(--dur-fast) var(--ease-standard);
}
a:hover  { border-bottom-color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-6) 0;
}

/* Light surfaces invert the foreground tokens */
.surface-paper {
  background: var(--bg-paper);
  color: var(--fg-on-paper);
}
.surface-paper .eyebrow { color: var(--slate-500); }
.surface-paper a { color: var(--gold-700); }
.surface-paper a:hover { border-bottom-color: var(--gold-700); }

/* The "gold hairline" — Mimren's structural divider device */
.hairline-gold {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold-500);
}