/* ───────────────────────────────────────────────────────────────
   TWS Bit Design System — Colors & Type
   Based on Radix Themes / Radix Colors.
   Indigo accent · Slate neutrals · SF Pro (substituted: Inter) · Menlo (substituted: JetBrains Mono)
   ─────────────────────────────────────────────────────────────── */

/* ─── Web fonts — Open Sans (UI sans) + manolo-mono (mono) ───
   Loaded from local files in fonts/. Replaces the Inter / JetBrains Mono
   Google substitutes that the SF Pro / Menlo design originally specified. */

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

/* SF Pro Display — Apple display sans, brand-uploaded OTF files.
   Italics: only italic weights were provided (no upright 400/500/700 italics),
   so italic falls back across the closest upright weights instead. */
@font-face { font-family: "SF Pro Display"; font-weight: 100; font-style: italic;
             src: url("fonts/SFPRODISPLAYULTRALIGHTITALIC.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 200; font-style: italic;
             src: url("fonts/SFPRODISPLAYTHINITALIC.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 300; font-style: normal;
             src: url("fonts/SFPRODISPLAYLIGHTITALIC.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 400; font-style: normal;
             src: url("fonts/SFPRODISPLAYREGULAR.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 500; font-style: normal;
             src: url("fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 600; font-style: italic;
             src: url("fonts/SFPRODISPLAYSEMIBOLDITALIC.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 700; font-style: normal;
             src: url("fonts/SFPRODISPLAYBOLD.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 800; font-style: italic;
             src: url("fonts/SFPRODISPLAYHEAVYITALIC.OTF") format("opentype"); font-display: swap; }
@font-face { font-family: "SF Pro Display"; font-weight: 900; font-style: italic;
             src: url("fonts/SFPRODISPLAYBLACKITALIC.OTF") format("opentype"); font-display: swap; }

/* Condensed sibling family — for tight metadata, breadcrumbs, table headers */
@font-face { font-family: "Open Sans Condensed"; font-weight: 400; font-style: normal;
             src: url("fonts/OpenSans_Condensed-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Open Sans Condensed"; font-weight: 500; font-style: normal;
             src: url("fonts/OpenSans_Condensed-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Open Sans Condensed"; font-weight: 600; font-style: normal;
             src: url("fonts/OpenSans_Condensed-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Open Sans Condensed"; font-weight: 700; font-style: normal;
             src: url("fonts/OpenSans_Condensed-Bold.ttf") format("truetype"); font-display: swap; }

/* Mono — manolo-mono replaces Menlo / JetBrains Mono substitute */
@font-face { font-family: "Manolo Mono"; font-weight: 400; font-style: normal;
             src: url("fonts/manolo-mono.ttf") format("truetype"); font-display: swap; }

:root {
  /* ───────────────────────── COLOR SCALES ───────────────────────── */

  /* Accent — Indigo (Radix). Step 9 = brand color. */
  --indigo-1:  #fdfdfe;
  --indigo-2:  #f7f9ff;
  --indigo-3:  #edf2fe;
  --indigo-4:  #dfe9ff;
  --indigo-5:  #d0dfff;
  --indigo-6:  #bdd1ff;
  --indigo-7:  #a6bff9;
  --indigo-8:  #87a5ef;
  --indigo-9:  #3e63dd;
  --indigo-10: #3358d4;
  --indigo-11: #3a5bc7;
  --indigo-12: #1f2d5c;
  /* Indigo alpha */
  --indigo-a-1:  rgba(0, 0,128, 0.012);
  --indigo-a-2:  rgba(0, 64,255, 0.031);
  --indigo-a-3:  rgba(0, 60,229, 0.071);
  --indigo-a-4:  rgba(0, 73,255, 0.125);
  --indigo-a-5:  rgba(0, 70,255, 0.184);
  --indigo-a-6:  rgba(0, 67,255, 0.259);
  --indigo-a-7:  rgba(0, 56,237, 0.349);
  --indigo-a-8:  rgba(0, 56,224, 0.471);
  --indigo-a-9:  rgba(0, 48,217, 0.757);
  --indigo-a-10: rgba(0, 44,212, 0.800);
  --indigo-a-11: rgba(0, 39,164, 0.773);
  --indigo-a-12: rgba(0, 16, 71, 0.878);

  /* Neutral — Slate (Radix). */
  --slate-1:  #fcfcfd;
  --slate-2:  #f9f9fb;
  --slate-3:  #f0f0f3;
  --slate-4:  #e8e8ec;
  --slate-5:  #e0e1e6;
  --slate-6:  #d9d9e0;
  --slate-7:  #cdced6;
  --slate-8:  #b9bbc6;
  --slate-9:  #8b8d98;
  --slate-10: #80828d;
  --slate-11: #60646c;
  --slate-12: #1c2024;
  /* Slate alpha */
  --slate-a-1:  rgba(0, 0, 64, 0.012);
  --slate-a-2:  rgba(0, 0, 64, 0.024);
  --slate-a-3:  rgba(0, 0, 51, 0.059);
  --slate-a-4:  rgba(0, 0, 32, 0.090);
  --slate-a-5:  rgba(0, 8, 50, 0.122);
  --slate-a-6:  rgba(0, 0, 47, 0.149);
  --slate-a-7:  rgba(0, 4, 44, 0.196);
  --slate-a-8:  rgba(0, 8, 51, 0.275);
  --slate-a-9:  rgba(0, 7, 27, 0.455);
  --slate-a-10: rgba(0, 7, 22, 0.498);
  --slate-a-11: rgba(0, 7, 17, 0.624);
  --slate-a-12: rgba(0, 6, 11, 0.890);

  /* Semantic — Success (Grass). */
  --success-1:  #fbfefb;
  --success-2:  #f3fcf3;
  --success-3:  #ebf9eb;
  --success-4:  #dff3df;
  --success-5:  #ceebcf;
  --success-6:  #b7dfba;
  --success-7:  #97cf9c;
  --success-8:  #65ba74;
  --success-9:  #46a758;
  --success-10: #3e9b4f;
  --success-11: #2a7e3b;
  --success-12: #203c25;

  /* Semantic — Warning (Amber). */
  --warning-1:  #fefdfb;
  --warning-2:  #fefbe9;
  --warning-3:  #fff7c2;
  --warning-4:  #ffee9c;
  --warning-5:  #fbe577;
  --warning-6:  #f3d673;
  --warning-7:  #e9c162;
  --warning-8:  #e2a336;
  --warning-9:  #ffc53d;
  --warning-10: #ffba18;
  --warning-11: #ab6400;
  --warning-12: #4f3422;

  /* Semantic — Error (Red — Radix). matches Figma `rgb(210,0,5)` for solid 9 */
  --error-1:  #fffcfc;
  --error-2:  #fff7f7;
  --error-3:  #feebec;
  --error-4:  #ffdbdc;
  --error-5:  #ffcdce;
  --error-6:  #fdbdbe;
  --error-7:  #f4a9aa;
  --error-8:  #eb8e90;
  --error-9:  #e5484d;
  --error-10: #dc3e42;
  --error-11: #ce2c31;
  --error-12: #641723;

  /* Semantic — Info (Blue). distinct from accent. */
  --info-1:  #fbfdff;
  --info-2:  #f4faff;
  --info-3:  #e6f4fe;
  --info-4:  #d5efff;
  --info-5:  #c2e5ff;
  --info-6:  #acd8fc;
  --info-7:  #8ec8f6;
  --info-8:  #5eb1ef;
  --info-9:  #0090ff;
  --info-10: #0588f0;
  --info-11: #0d74ce;
  --info-12: #113264;

  /* ─────────────────────── SEMANTIC TOKENS ─────────────────────── */
  /* These map the raw scales to roles. Theme by overriding these. */

  --color-accent-1:  var(--indigo-1);
  --color-accent-2:  var(--indigo-2);
  --color-accent-3:  var(--indigo-3);
  --color-accent-4:  var(--indigo-4);
  --color-accent-5:  var(--indigo-5);
  --color-accent-6:  var(--indigo-6);
  --color-accent-7:  var(--indigo-7);
  --color-accent-8:  var(--indigo-8);
  --color-accent-9:  var(--indigo-9);
  --color-accent-10: var(--indigo-10);
  --color-accent-11: var(--indigo-11);
  --color-accent-12: var(--indigo-12);
  --color-accent-a-3:  var(--indigo-a-3);
  --color-accent-a-7:  var(--indigo-a-7);
  --color-accent-a-9:  var(--indigo-a-9);

  --color-gray-1:  var(--slate-1);
  --color-gray-2:  var(--slate-2);
  --color-gray-3:  var(--slate-3);
  --color-gray-4:  var(--slate-4);
  --color-gray-5:  var(--slate-5);
  --color-gray-6:  var(--slate-6);
  --color-gray-7:  var(--slate-7);
  --color-gray-8:  var(--slate-8);
  --color-gray-9:  var(--slate-9);
  --color-gray-10: var(--slate-10);
  --color-gray-11: var(--slate-11);
  --color-gray-12: var(--slate-12);
  --color-gray-a-3: var(--slate-a-3);
  --color-gray-a-6: var(--slate-a-6);

  /* Page + panel */
  --color-background:        #ffffff;          /* page bg */
  --color-panel-solid:       #ffffff;          /* default panel */
  --color-panel-translucent: rgba(255, 255, 255, 0.80);
  --color-panel:             var(--color-panel-solid);
  --color-overlay:           rgba(0, 0, 0, 0.40);

  /* Foreground (text) */
  --color-fg-1:           var(--slate-12); /* primary text */
  --color-fg-2:           var(--slate-11); /* secondary */
  --color-fg-3:           var(--slate-10); /* tertiary / placeholder */
  --color-fg-on-solid:    #ffffff;         /* text on solid-9 accents */
  --color-fg-on-accent:   #ffffff;
  --color-fg-accent:      var(--indigo-11); /* accent links / accent text */

  /* Borders */
  --color-border:         var(--slate-6); /* universal 1px border */
  --color-border-strong:  var(--slate-7);
  --color-border-accent:  var(--indigo-a-7);

  /* Focus ring */
  --color-focus-ring:     var(--indigo-a-7);

  /* ─────────────────────────── TYPE ─────────────────────────── */

  /* Family — SF Pro Display (display headings), Open Sans (UI sans / body),
              Manolo Mono (mono), Open Sans Condensed for tight metadata */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Manolo Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-condensed: "Open Sans Condensed", "Open Sans", sans-serif;
  --font-serif: "Times New Roman", "Iowan Old Style", "Apple Garamond", Georgia, serif; /* blockquotes only */
  --font-default: var(--font-sans);

  /* 9-step type scale: font-size / line-height / letter-spacing */
  --font-size-1: 12px;   --line-height-1: 16px;   --letter-spacing-1:  0.0025em;
  --font-size-2: 14px;   --line-height-2: 20px;   --letter-spacing-2:  0em;
  --font-size-3: 16px;   --line-height-3: 24px;   --letter-spacing-3:  0em;
  --font-size-4: 18px;   --line-height-4: 26px;   --letter-spacing-4: -0.0025em;
  --font-size-5: 20px;   --line-height-5: 28px;   --letter-spacing-5: -0.005em;
  --font-size-6: 24px;   --line-height-6: 30px;   --letter-spacing-6: -0.00625em;
  --font-size-7: 28px;   --line-height-7: 36px;   --letter-spacing-7: -0.0075em;
  --font-size-8: 35px;   --line-height-8: 40px;   --letter-spacing-8: -0.01em;
  --font-size-9: 60px;   --line-height-9: 60px;   --letter-spacing-9: -0.025em;

  /* Weights */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;

  /* ─────────────────────── SPACING (9-step) ─────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  /* ────────────────────────── RADIUS (6-step) ───────────────────── */
  --radius-1: 3px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 12px;
  --radius-6: 16px;
  /* -max variants (allow pill at appropriate sizes) */
  --radius-1-max: 3px;
  --radius-2-max: 4px;
  --radius-3-max: 9999px; /* Buttons go pill */
  --radius-4-max: 9999px;
  --radius-5-max: 9999px;
  --radius-6-max: 9999px;

  /* ───────────────────── SHADOWS (navy-tinted) ─────────────────── */
  --shadow-1: inset 0 0 0 1px var(--slate-a-7);
  --shadow-2: 0 1px 1px rgba(0,0,0,0.05), 0 1px 3px rgba(1,6,45,0.07);
  --shadow-3: 0 2px 3px -1px rgba(1,6,45,0.10), 0 1px 5px -2px rgba(1,6,45,0.05);
  --shadow-4: 0 8px 16px -4px rgba(1,6,45,0.12), 0 4px 8px -2px rgba(1,6,45,0.06);
  --shadow-5: 0 12px 32px -4px rgba(1,6,45,0.16), 0 6px 12px -2px rgba(1,6,45,0.08);
  --shadow-6: 0 16px 64px 0 rgba(1,6,45,0.173), 0 16px 36px -20px rgba(1,6,45,0.173);

  /* ────────────────────────── MOTION ──────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-mid:  150ms;
  --duration-slow: 240ms;
}

/* ───────────────────────── SEMANTIC TYPE STYLES ─────────────────── */

html, body { font-family: var(--font-default); color: var(--color-fg-1); background: var(--color-background); }

/* Headings — mapped to Radix `Heading` sizes */
h1, .rt-h1 { font: var(--font-weight-bold) var(--font-size-8)/var(--line-height-8) var(--font-display); letter-spacing: var(--letter-spacing-8); margin: 0; color: var(--color-fg-1); }
h2, .rt-h2 { font: var(--font-weight-bold) var(--font-size-7)/var(--line-height-7) var(--font-display); letter-spacing: var(--letter-spacing-7); margin: 0; color: var(--color-fg-1); }
h3, .rt-h3 { font: var(--font-weight-bold) var(--font-size-6)/var(--line-height-6) var(--font-display); letter-spacing: var(--letter-spacing-6); margin: 0; color: var(--color-fg-1); }
h4, .rt-h4 { font: var(--font-weight-bold) var(--font-size-5)/var(--line-height-5) var(--font-display); letter-spacing: var(--letter-spacing-5); margin: 0; color: var(--color-fg-1); }
h5, .rt-h5 { font: var(--font-weight-bold) var(--font-size-4)/var(--line-height-4) var(--font-display); letter-spacing: var(--letter-spacing-4); margin: 0; color: var(--color-fg-1); }
h6, .rt-h6 { font: var(--font-weight-bold) var(--font-size-3)/var(--line-height-3) var(--font-display); margin: 0; color: var(--color-fg-1); }

/* Body */
p, .rt-Text { font: var(--font-weight-regular) var(--font-size-3)/var(--line-height-3) var(--font-sans); color: var(--color-fg-1); margin: 0; }
.rt-Text-sm { font-size: var(--font-size-2); line-height: var(--line-height-2); }
.rt-Text-xs { font-size: var(--font-size-1); line-height: var(--line-height-1); letter-spacing: var(--letter-spacing-1); }
.rt-muted { color: var(--color-fg-2); }
.rt-subtle { color: var(--color-fg-3); }

/* Inline code, Kbd */
code, .rt-Code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-accent-a-3);
  color: var(--color-fg-accent);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-1);
  font-weight: var(--font-weight-medium);
}
.rt-Kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-panel-solid);
  color: var(--color-fg-1);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-2);
  padding: 0.1em 0.45em;
  box-shadow: inset 0 -1px 0 var(--slate-a-3);
}

/* Blockquote */
blockquote, .rt-Blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-4);
  line-height: var(--line-height-4);
  color: var(--color-fg-1);
  border-left: 2px solid var(--color-accent-a-7);
  padding: 0 var(--space-4);
  margin: 0;
}

/* Link */
a, .rt-Link {
  color: var(--color-fg-accent);
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent-a-7);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover, .rt-Link:hover { text-decoration-color: currentColor; }

/* Selection */
::selection { background: var(--color-accent-a-3); color: var(--color-fg-1); }