/* ============================================================
   Fredeveloper — Design Tokens
   Tri-color brand: emerald green / golden yellow / coral red
   Dark slate ink. White/light surface (modern digital, not warm cream).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600;1,700;1,800&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,600;1,700;1,800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: brand ---------- */
  /* Primary green sampled from the F mark */
  --green:          #14A85F;
  --green-600:      #0E9152;
  --green-700:      #097A43;
  --green-100:      #C9F0DC;
  --green-50:       #E8F8EE;

  /* Yellow secondary */
  --yellow:         #F2C12E;
  --yellow-600:     #D9A91F;
  --yellow-100:    #FCEFC0;
  --yellow-50:     #FEF7DF;

  /* Coral red accent */
  --red:            #E94E2C;
  --red-600:        #CE3D1F;
  --red-100:        #FBD9CF;
  --red-50:         #FDEAE2;

  /* ---------- Color: ink (text) ---------- */
  --ink:            #1F2226;   /* primary text — dark slate */
  --ink-2:          #4A4F57;   /* secondary text */
  --ink-3:          #777E8A;   /* tertiary / placeholder */
  --ink-4:          #A9AEB8;   /* disabled */

  /* ---------- Color: surface ---------- */
  --bg:             #FFFFFF;   /* page background */
  --bg-2:           #F6F7F9;   /* alt section bg */
  --white:          #FFFFFF;
  --border:         #E5E7EB;   /* hairline */
  --border-soft:    #EEF0F3;   /* lighter hairline */
  --border-strong:  #D1D5DB;   /* heavier hairline */

  /* Legacy aliases — keep so existing kits don't break */
  --cream:          var(--bg);
  --cream-2:        var(--bg-2);
  --border-warm:    var(--border);
  --emerald:        var(--green);
  --emerald-600:    var(--green-600);
  --emerald-700:    var(--green-700);
  --emerald-100:    var(--green-100);
  --emerald-50:     var(--green-50);
  --amber:          var(--yellow);
  --amber-600:      var(--yellow-600);
  --amber-100:      var(--yellow-100);
  --amber-50:       var(--yellow-50);

  /* ---------- Color: semantic ---------- */
  --success:        var(--green);
  --success-bg:     var(--green-50);
  --warning:        var(--yellow);
  --warning-bg:     var(--yellow-50);
  --danger:         var(--red);
  --danger-bg:      var(--red-50);
  --info:           #1849A9;
  --info-bg:        #EFF4FF;

  /* ---------- Type: families ---------- */
  /* Mona Sans handles the bold-italic display feel of the wordmark.
     Inter handles body and UI. Italic bold reserved for display. */
  --font-display:   'Mona Sans', 'Inter', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type: scale ---------- */
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-22: 22px;
  --text-28: 28px;
  --text-36: 36px;
  --text-48: 48px;
  --text-64: 64px;
  --text-80: 80px;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-20: 80px;
  --space-30: 120px;

  /* ---------- Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-1: 0 1px 2px rgba(31,34,38,0.05), 0 1px 1px rgba(31,34,38,0.03);
  --shadow-2: 0 4px 14px rgba(31,34,38,0.07), 0 2px 4px rgba(31,34,38,0.04);
  --shadow-3: 0 24px 48px rgba(31,34,38,0.12), 0 8px 16px rgba(31,34,38,0.06);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--green);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* @kind other */
  --dur-micro: 120ms; /* @kind other */
  --dur-fast: 200ms; /* @kind other */
  --dur-default: 280ms; /* @kind other */
  --dur-slow: 450ms; /* @kind other */
  --dur-progress: 600ms; /* @kind other */
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-16);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic type styles
   Display uses italic-bold (matches wordmark vibe)
   ============================================================ */

.h-display, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: var(--text-64);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: var(--text-48);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-36);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-28);
  line-height: 1.2;
  letter-spacing: -0.016em;
  color: var(--ink);
  margin: 0;
}

.h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-22);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}

.h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-18);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.body-lg, p.lead {
  font-size: var(--text-18);
  line-height: 1.55;
  color: var(--ink-2);
}

.body, p {
  font-size: var(--text-16);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

.body-sm, small {
  font-size: var(--text-14);
  line-height: 1.5;
  color: var(--ink-2);
}

.caption {
  font-size: var(--text-12);
  line-height: 1.4;
  color: var(--ink-3);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-12);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
}

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

/* ============================================================
   Utility
   ============================================================ */

.muted { color: var(--ink-3); }
.ink   { color: var(--ink); }
.green-text  { color: var(--green); }
.yellow-text { color: var(--yellow-600); }
.red-text    { color: var(--red); }

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
a:hover { border-bottom-color: var(--ink); }
a.link-green { color: var(--green-700); }
a.link-green:hover { border-bottom-color: var(--green); }
a.link-emerald { color: var(--green-700); }
a.link-emerald:hover { border-bottom-color: var(--green); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ============================================================
   Brand gradient — the F's tri-color, reusable as accent
   ============================================================ */
.brand-gradient {
  background: linear-gradient(120deg, var(--green) 0%, var(--green) 40%, var(--yellow) 55%, var(--red) 100%);
}
.brand-gradient-text {
  background: linear-gradient(120deg, var(--green) 0%, var(--yellow) 60%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}