/* ============================================================
   BioRank — Foundations
   Type + Color tokens. Import this file globally.
   ============================================================ */

/* ---- Fonts -------------------------------------------------- */
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-ExtraLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/Ambit-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---- Type families ----------------------------------------- */
  --font-sans: 'Ambit', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* ---- Color: Slate (neutral — pale gray-blue → black) -------- */
  /* Minimalist-reductive. Cool, dry, unmistakably clinical. */
  --slate-50:  #F4F6F8;   /* page background, default */
  --slate-100: #ECEFF3;   /* subtle surface */
  --slate-200: #DDE2E8;   /* hairline / dividers */
  --slate-300: #C2C9D2;   /* disabled border */
  --slate-400: #8E97A2;   /* tertiary text, icon mute */
  --slate-500: #5C6470;   /* secondary text */
  --slate-600: #3D434C;   /* body text on light */
  --slate-700: #1F232A;   /* high-contrast text */
  --slate-800: #10131A;   /* near-black */
  --slate-900: #06080C;   /* ink */

  /* Bone aliases — retained so existing CSS keeps working. */
  --bone-50:  var(--slate-50);
  --bone-100: var(--slate-100);
  --bone-200: var(--slate-200);
  --bone-300: var(--slate-300);
  --bone-400: var(--slate-400);
  --bone-500: var(--slate-500);
  --bone-600: var(--slate-600);
  --bone-700: var(--slate-700);
  --bone-800: var(--slate-800);
  --bone-900: var(--slate-900);

  /* ---- Color: Oxblood (primary brand) ------------------------ */
  /* Deep, blood-dark red. Used for primary action, brand mark, accents.
     Single-color brand — used surgically, never as a wash. */
  --oxblood-50:  #F7ECEC;
  --oxblood-100: #ECCFCF;
  --oxblood-200: #D89898;
  --oxblood-300: #B96060;
  --oxblood-400: #94353A;
  --oxblood-500: #6B1F25;   /* PRIMARY brand color */
  --oxblood-600: #54181D;
  --oxblood-700: #3D1116;
  --oxblood-800: #260A0E;
  --oxblood-900: #160508;

  /* Moss aliases — retained, retargeted to oxblood so old CSS keeps working. */
  --moss-50:  var(--oxblood-50);
  --moss-100: var(--oxblood-100);
  --moss-200: var(--oxblood-200);
  --moss-300: var(--oxblood-300);
  --moss-400: var(--oxblood-400);
  --moss-500: var(--oxblood-500);
  --moss-600: var(--oxblood-600);
  --moss-700: var(--oxblood-700);
  --moss-800: var(--oxblood-800);
  --moss-900: var(--oxblood-900);

  /* No additional accent palettes. The system is intentionally reductive:
     slate + black + oxblood + a single neutral data tone. */
  --ion-400: var(--slate-700);     /* data axes / muted info — just dark slate */
  --ion-50:  var(--slate-100);
  --ion-100: var(--slate-200);
  --ion-600: var(--slate-800);

  --saffron-400: var(--slate-500); /* deprecated; folded into slate */
  --saffron-50:  var(--slate-100);
  --saffron-100: var(--slate-200);
  --saffron-200: var(--slate-300);

  /* ---- Color: Signal (semantic) ------------------------------ */
  --signal-success: var(--slate-700);    /* completed = ink, not green */
  --signal-warning: var(--oxblood-400);
  --signal-danger:  var(--oxblood-500);
  --signal-info:    var(--slate-500);

  /* ---- Foreground / Background semantic ---------------------- */
  --fg-1: var(--bone-900);     /* primary text on light */
  --fg-2: var(--bone-700);     /* body */
  --fg-3: var(--bone-500);     /* secondary, captions */
  --fg-4: var(--bone-400);     /* tertiary, placeholder */
  --fg-on-dark: var(--bone-50);
  --fg-on-moss: var(--bone-50);
  --fg-link:    var(--moss-500);

  --bg-page:    var(--bone-50);
  --bg-surface: #FFFFFF;
  --bg-sunken:  var(--bone-100);
  --bg-raised:  #FFFFFF;
  --bg-inverse: var(--bone-900);
  --bg-brand:   var(--moss-500);

  /* ---- Borders / Dividers ----------------------------------- */
  --border-hairline: var(--bone-200);
  --border-default:  var(--bone-300);
  --border-strong:   var(--bone-700);
  --border-brand:    var(--moss-500);
  --border-focus:    var(--moss-500);

  /* ---- Radii ------------------------------------------------ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ---- Spacing (4pt grid) ----------------------------------- */
  --space-0:  0;
  --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-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Shadows / Elevation ---------------------------------- */
  /* Restrained. Mostly hairlines + a single soft drop where needed. */
  --shadow-none: none;
  --shadow-hairline: inset 0 0 0 1px var(--border-hairline);
  --shadow-sm:  0 1px 2px rgba(15, 14, 12, 0.04), 0 0 0 1px rgba(15, 14, 12, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 14, 12, 0.06), 0 0 0 1px rgba(15, 14, 12, 0.04);
  --shadow-lg:  0 12px 32px rgba(15, 14, 12, 0.08), 0 0 0 1px rgba(15, 14, 12, 0.04);
  --shadow-focus: 0 0 0 3px rgba(52, 94, 45, 0.22);

  /* ---- Motion ----------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);  /* settle */
  --ease-emph:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-instant:   90ms;
  --dur-fast:      160ms;
  --dur-base:      240ms;
  --dur-slow:      420ms;

  /* ---- Type scale ------------------------------------------ */
  /* Display reserves lighter weight + tight tracking. */
  --fs-display-1: clamp(56px, 7vw, 104px);
  --fs-display-2: clamp(44px, 5.5vw, 72px);
  --fs-h1:        clamp(36px, 4vw, 56px);
  --fs-h2:        clamp(28px, 3vw, 40px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-eyebrow:   12px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.16em;
}

/* ============================================================
   BASE TYPE STYLES
   ============================================================ */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display-1, h1.display, .h-display-1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.display-2, .h-display-2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-3); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}

.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-feature-settings: 'ss01', 'cv01';
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--moss-700); }

::selection {
  background: var(--moss-500);
  color: var(--bone-50);
}

/* ============================================================
   UTILITY (so you can compose without a framework)
   ============================================================ */
.bg-page    { background: var(--bg-page); }
.bg-surface { background: var(--bg-surface); }
.bg-sunken  { background: var(--bg-sunken); }
.bg-inverse { background: var(--bg-inverse); color: var(--fg-on-dark); }
.bg-brand   { background: var(--bg-brand); color: var(--fg-on-moss); }

.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
.fg-brand { color: var(--moss-500); }

.hairline { border: 1px solid var(--border-hairline); }
.hairline-t { border-top: 1px solid var(--border-hairline); }
.hairline-b { border-bottom: 1px solid var(--border-hairline); }

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}