/* ============================================================
   Fydra Advisers — Foundations
   Colors + Type tokens. Import once at the root of any Fydra
   surface (decks, marketing site, internal tools).
   ============================================================ */

/* ---- Fonts -------------------------------------------------- */
@font-face {
  font-family: "Open Sauce One";
  src: url("fonts/OpenSauceOne-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sauce One";
  src: url("fonts/OpenSauceOne-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sauce One";
  src: url("fonts/OpenSauceOne-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sauce One";
  src: url("fonts/OpenSauceOne-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sauce One";
  src: url("fonts/OpenSauceOne-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sauce One";
  src: url("fonts/OpenSauceOne-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ---- Color: core palette ---------------------------------- */
  --ink:           #0B0B0C;
  --ink-soft:      #1B1D20;

  --slate-900:     #0E2841;
  --slate-700:     #243A53;
  --slate-500:     #4D5C6E;
  --slate-400:     #69747C;
  --slate-300:     #9AA3AB;
  --slate-200:     #C7CDD3;
  --slate-100:     #E4E7EA;

  --beacon-900:    #6B5E10;
  --beacon-700:    #C9B22F;
  --beacon-500:    #F1DB4B;
  --beacon-400:    #F4E373;
  --beacon-300:    #F8EA92;
  --beacon-100:    #FCF6D6;

  --sea-900:       #0E2A22;
  --sea-800:       #163A2E;
  --sea-700:       #1F5443;
  --sea-600:       #2C7058;
  --sea-500:       #4F9B7E;
  --sea-400:       #8AC0A9;
  --sea-200:       #C9E2D6;
  --sea-100:       #E6F1EB;

  --stone-50:      #FAFAF7;
  --stone-100:     #F4F2EC;
  --stone-200:     #E8E5DC;
  --stone-300:     #D6D2C5;
  --stone-700:     #6E6A60;

  /* Semantic surface tokens ---------------------------------- */
  --bg:            var(--stone-50);
  --bg-elev:       #FFFFFF;
  --bg-inverse:    var(--ink);
  --bg-brand:      var(--beacon-500);
  --bg-support:    var(--sea-700);
  --bg-accent:     var(--beacon-500);

  --fg:            var(--ink);
  --fg-1:          var(--ink);
  --fg-2:          var(--slate-700);
  --fg-3:          var(--slate-500);
  --fg-mute:       var(--slate-400);
  --fg-on-dark:    #F6F6F2;
  --fg-on-brand:   var(--ink);
  --fg-on-support: #F4FAF6;
  --fg-on-accent:  var(--ink);

  --border:        var(--stone-200);
  --border-strong: var(--slate-200);
  --rule:          var(--ink);

  /* ---- Typography ----------------------------------------- */
  --font-display:  "Open Sauce One", "Inter", system-ui, sans-serif;
  --font-body:     "Open Sauce Sans", "Inter", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-eyebrow:    11px;
  --fs-meta:       12px;
  --fs-small:      13px;
  --fs-body:       16px;
  --fs-lead:       19px;
  --fs-h6:         16px;
  --fs-h5:         18px;
  --fs-h4:         22px;
  --fs-h3:         clamp(24px, 2.4vw, 30px);
  --fs-h2:         clamp(32px, 4vw, 48px);
  --fs-h1:         clamp(40px, 6vw, 72px);
  --fs-display:    clamp(56px, 9vw, 120px);

  --tr-tight:      -0.02em;
  --tr-snug:       -0.01em;
  --tr-normal:     0;
  --tr-wide:       0.06em;
  --tr-extra:      0.18em;

  --lh-tight:      1.05;
  --lh-snug:       1.18;
  --lh-base:       1.5;
  --lh-loose:      1.65;

  /* ---- Spacing / radius / shadow -------------------------- */
  --space-0:       0;
  --space-1:       4px;
  --space-2:       8px;
  --space-3:       12px;
  --space-4:       16px;
  --space-5:       24px;
  --space-6:       32px;
  --space-7:       48px;
  --space-8:       64px;
  --space-9:       96px;
  --space-10:      128px;

  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     14px;
  --radius-xl:     22px;
  --radius-pill:   999px;

  --shadow-1:      0 1px 0 rgba(14,40,65,0.06), 0 1px 2px rgba(14,40,65,0.04);
  --shadow-2:      0 1px 0 rgba(14,40,65,0.06), 0 6px 18px -8px rgba(14,40,65,0.18);
  --shadow-3:      0 12px 40px -12px rgba(14,40,65,0.28);
  --ring-focus:    0 0 0 3px rgba(241,219,75,0.55);

  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      420ms;
}

/* ============================================================
   Base element styles
   ============================================================ */
html { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
}
.display    { font-size: var(--fs-display); }
h1          { font-size: var(--fs-h1); }
h2          { font-size: var(--fs-h2); letter-spacing: var(--tr-snug); }
h3          { font-size: var(--fs-h3); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }
h4          { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-snug); }
h5          { font-size: var(--fs-h5); font-weight: 600; line-height: var(--lh-snug); }
h6          { font-size: var(--fs-h6); font-weight: 600; }

p           { margin: 0 0 var(--space-4); }
.lead       { font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--fg-2); }
.small      { font-size: var(--fs-small); }
.meta       { font-size: var(--fs-meta); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-extra);
  text-transform: uppercase;
  color: var(--fg-3);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }
pre {
  background: var(--ink);
  color: var(--fg-on-dark);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow: auto;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--beacon-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--beacon-700); text-decoration-color: var(--ink); }

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

::selection { background: var(--beacon-500); color: var(--ink); }