/* =========================================================
   Metis Advisory Group — Foundations
   colors_and_type.css
   ---------------------------------------------------------
   Single source of truth for color + type tokens.
   Import this file once at the root of any page.
   ========================================================= */

/* Libre Franklin — local files (uploaded by brand) */
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/LibreFranklin-Thin.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/LibreFranklin-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/LibreFranklin-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/LibreFranklin-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/LibreFranklin-Light.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/LibreFranklin-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/LibreFranklin-Regular.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/LibreFranklin-Italic.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/LibreFranklin-Medium.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/LibreFranklin-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/LibreFranklin-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/LibreFranklin-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/LibreFranklin-Bold.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/LibreFranklin-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/LibreFranklin-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/LibreFranklin-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/LibreFranklin-Black.ttf") format("truetype"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/LibreFranklin-BlackItalic.ttf") format("truetype"); }

/* Libre Caslon Text — optional editorial serif. Still loaded from Google Fonts
   pending a confirmed brand decision; if dropped, body uses Libre Franklin fallback. */
@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  /* -------------------------------------------------------
     COLOR — CORE PALETTE
     60% neutrals · 30% indigo · 10% plum
     ------------------------------------------------------- */
  --metis-deep-indigo:  #1C1E3F;   /* Primary  · depth, night-intelligence */
  --metis-charred-plum: #4C2E45;   /* Secondary · introspection, refinement */
  --metis-soft-bone:    #F6F4F2;   /* Accent 1 · neutral clarity */
  --metis-slate-gray:   #6A6F7D;   /* Accent 2 · balance, professionalism */

  /* COLOR — EXTENDED SCALE
     Tints + shades derived from the core four; use sparingly.
     Each step is a perceptual ~10–15% adjustment. */
  --indigo-950: #0E0F22;
  --indigo-900: #14162E;
  --indigo-800: #1C1E3F;   /* = Deep Indigo */
  --indigo-700: #2A2D55;
  --indigo-600: #3A3E6E;
  --indigo-500: #545991;
  --indigo-400: #8085B3;
  --indigo-300: #ADB1D0;
  --indigo-200: #D3D5E5;
  --indigo-100: #E8E9F1;
  --indigo-050: #F3F3F8;

  --plum-900:   #2E1B29;
  --plum-800:   #3D2438;
  --plum-700:   #4C2E45;   /* = Charred Plum */
  --plum-600:   #623A58;
  --plum-500:   #7C4C6F;
  --plum-400:   #9E7390;
  --plum-300:   #C0A4B5;
  --plum-200:   #DECCD5;
  --plum-100:   #ECDFE6;

  --slate-900:  #2A2D34;
  --slate-800:  #3D414A;
  --slate-700:  #4F535D;
  --slate-600:  #6A6F7D;   /* = Slate Gray */
  --slate-500:  #868B98;
  --slate-400:  #A6AAB3;
  --slate-300:  #C5C7CE;
  --slate-200:  #DDDFE3;
  --slate-100:  #EBECEF;

  --bone-100:   #FBFAF8;
  --bone-200:   #F6F4F2;   /* = Soft Bone */
  --bone-300:   #EFECE7;
  --bone-400:   #E5E1DB;
  --bone-500:   #D7D2CA;

  /* COLOR — SEMANTIC TOKENS (light mode default) */
  --bg:           var(--bone-200);
  --bg-elevated:  var(--bone-100);
  --bg-sunken:    var(--bone-300);
  --bg-inverse:   var(--metis-deep-indigo);

  --fg-1:         var(--metis-deep-indigo);   /* primary text */
  --fg-2:         var(--slate-700);            /* secondary text */
  --fg-3:         var(--slate-600);            /* tertiary / captions */
  --fg-muted:     var(--slate-500);
  --fg-on-dark:   var(--bone-200);
  --fg-accent:    var(--metis-charred-plum);

  --border-soft:   rgba(28, 30, 63, 0.08);
  --border:        rgba(28, 30, 63, 0.14);
  --border-strong: rgba(28, 30, 63, 0.24);

  --accent:        var(--metis-charred-plum);
  --accent-hover:  var(--plum-600);
  --accent-press:  var(--plum-800);

  /* Status tokens — derived to stay in the muted, "low hum" palette */
  --success:  #4F6B5C;
  --warning:  #9A7846;
  --danger:   #8B3A3A;
  --info:     var(--indigo-500);

  /* -------------------------------------------------------
     TYPE — FAMILIES
     ------------------------------------------------------- */
  --font-sans:    "Libre Franklin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Libre Caslon Text", "Libre Franklin", Georgia, serif; /* optional serif for pull quotes / editorial display */
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* TYPE — WEIGHTS (Libre Franklin variable) */
  --w-thin:      100;   /* @kind font */
  --w-extralt:   200;   /* @kind font */
  --w-light:     300;   /* @kind font */ /* body */
  --w-regular:   400;   /* @kind font */
  --w-medium:    500;   /* @kind font */ /* subheads */
  --w-semibold:  600;   /* @kind font */
  --w-bold:      700;   /* @kind font */ /* headings */

  /* TYPE — SCALE (rem) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  /* TYPE — LEADING + TRACKING */
  --lh-tight:   1.15;    /* @kind font */
  --lh-snug:    1.3;     /* @kind font */
  --lh-normal:  1.5;     /* @kind font */
  --lh-relaxed: 1.65;    /* @kind font */

  --tr-tight:   -0.02em; /* @kind font */
  --tr-snug:    -0.01em; /* @kind font */
  --tr-normal:  0;       /* @kind font */
  --tr-wide:    0.02em;  /* @kind font */
  --tr-eyebrow: 0.18em;  /* @kind font */ /* small uppercase labels */

  /* -------------------------------------------------------
     SPACING (8pt grid with 4pt half-steps)
     ------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* RADII — restrained, never pill-by-default */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ELEVATION — soft, indigo-tinted shadows (not pure black) */
  --shadow-xs: 0 1px 2px rgba(28, 30, 63, 0.06);
  --shadow-sm: 0 2px 6px rgba(28, 30, 63, 0.07), 0 1px 2px rgba(28, 30, 63, 0.05);
  --shadow-md: 0 8px 20px rgba(28, 30, 63, 0.08), 0 2px 6px rgba(28, 30, 63, 0.05);
  --shadow-lg: 0 18px 40px rgba(28, 30, 63, 0.10), 0 4px 12px rgba(28, 30, 63, 0.06);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(28, 30, 63, 0.04);

  /* MOTION */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);    /* @kind other */
  --ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);       /* @kind other */
  --dur-quick:   120ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
}

/* =========================================================
   DARK MODE — opt-in by setting [data-theme="dark"] on <html>
   The indigo is already deep, so dark uses indigo-950 ground.
   ========================================================= */
[data-theme="dark"] {
  --bg:           var(--indigo-950);
  --bg-elevated:  var(--indigo-900);
  --bg-sunken:    #0A0B1A;
  --bg-inverse:   var(--bone-200);

  --fg-1:         var(--bone-200);
  --fg-2:         var(--slate-300);
  --fg-3:         var(--slate-400);
  --fg-muted:     var(--slate-500);
  --fg-on-dark:   var(--bone-200);
  --fg-accent:    var(--plum-400);

  --border-soft:   rgba(246, 244, 242, 0.06);
  --border:        rgba(246, 244, 242, 0.12);
  --border-strong: rgba(246, 244, 242, 0.22);
}

/* =========================================================
   ELEMENT DEFAULTS — semantic, opinionated, easy to override
   ========================================================= */
html {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: 16px;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  line-height: var(--lh-normal);
  font-size: var(--fs-16);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  color: var(--fg-1);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-snug);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 4vw + 0.5rem, 4rem);   line-height: var(--lh-tight); }
h2 { font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-24); }
h4 { font-size: var(--fs-20); font-weight: var(--w-medium); }
h5 { font-size: var(--fs-18); font-weight: var(--w-medium); letter-spacing: var(--tr-normal); }
h6 {
  font-size: var(--fs-13);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

p {
  margin: 0 0 1em;
  max-width: 65ch;
  text-wrap: pretty;
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-quick) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

small, .caption {
  font-size: var(--fs-13);
  font-weight: var(--w-extralt);
  color: var(--fg-3);
  letter-spacing: var(--tr-wide);
}

blockquote, .pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 1px solid var(--border-strong);
  padding-left: var(--s-5);
  margin: var(--s-6) 0;
  max-width: 40ch;
}

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

/* Eyebrow label — used above headlines */
.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Focus ring — accessible + on-brand */
:where(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--metis-charred-plum);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}