/* ============================================================
   LYNRR — Colors & Type
   The single import for any LYNRR-branded surface.
   Pulls in the canonical token file and adds semantic type
   styles (h1, h2, p, code, eyebrow, etc.).
   ============================================================ */

@import url("./tokens/lynrr-tokens.css");

/* ── Webfonts ───────────────────────────────────────────────
   Inter (licensed binaries provided) is loaded via @font-face
   below using its three optical-size families:
     • Inter 18pt → "Inter Text"    (body, UI, captions)
     • Inter 24pt → "Inter Subhead" (h3 / h4 / lede)
     • Inter 28pt → "Inter Display" (h1 / h2 / hero)
   IBM Plex Mono is still pulled from Google Fonts — no licensed
   binaries were provided. FLAGGED for the user.            */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');

/* Inter 18pt — body / UI text */
@font-face { font-family: 'Inter Text'; font-style: normal; font-weight: 100; font-display: swap; src: url('./fonts/Inter_18pt-Thin.ttf')        format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: italic; font-weight: 100; font-display: swap; src: url('./fonts/Inter_18pt-ThinItalic.ttf')  format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: normal; font-weight: 200; font-display: swap; src: url('./fonts/Inter_18pt-ExtraLight.ttf')  format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: italic; font-weight: 200; font-display: swap; src: url('./fonts/Inter_18pt-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: normal; font-weight: 300; font-display: swap; src: url('./fonts/Inter_18pt-Light.ttf')       format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: italic; font-weight: 300; font-display: swap; src: url('./fonts/Inter_18pt-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/Inter_18pt-Regular.ttf')     format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: italic; font-weight: 400; font-display: swap; src: url('./fonts/Inter_18pt-Italic.ttf')      format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/Inter_18pt-Medium.ttf')      format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: italic; font-weight: 500; font-display: swap; src: url('./fonts/Inter_18pt-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/Inter_18pt-SemiBold.ttf')    format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: italic; font-weight: 600; font-display: swap; src: url('./fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/Inter_18pt-Bold.ttf')        format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: italic; font-weight: 700; font-display: swap; src: url('./fonts/Inter_18pt-BoldItalic.ttf')  format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/Inter_18pt-ExtraBold.ttf')   format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: italic; font-weight: 800; font-display: swap; src: url('./fonts/Inter_18pt-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: normal; font-weight: 900; font-display: swap; src: url('./fonts/Inter_18pt-Black.ttf')       format('truetype'); }
@font-face { font-family: 'Inter Text'; font-style: italic; font-weight: 900; font-display: swap; src: url('./fonts/Inter_18pt-BlackItalic.ttf') format('truetype'); }

/* Inter 24pt — subheads / lede */
@font-face { font-family: 'Inter Subhead'; font-style: normal; font-weight: 300; font-display: swap; src: url('./fonts/Inter_24pt-Light.ttf')    format('truetype'); }
@font-face { font-family: 'Inter Subhead'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/Inter_24pt-Regular.ttf')  format('truetype'); }
@font-face { font-family: 'Inter Subhead'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/Inter_24pt-Medium.ttf')   format('truetype'); }
@font-face { font-family: 'Inter Subhead'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/Inter_24pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Subhead'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/Inter_24pt-Bold.ttf')     format('truetype'); }
@font-face { font-family: 'Inter Subhead'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/Inter_24pt-ExtraBold.ttf') format('truetype'); }

/* Inter 28pt — display / hero */
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/Inter_28pt-Medium.ttf')   format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/Inter_28pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/Inter_28pt-Bold.ttf')     format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('./fonts/Inter_28pt-Black.ttf')    format('truetype'); }

/* Generic "Inter" alias — defaults to the body family.
   Use 'Inter Display' or 'Inter Subhead' on larger sizes. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/Inter_18pt-Regular.ttf')  format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('./fonts/Inter_18pt-Italic.ttf')   format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/Inter_18pt-Medium.ttf')   format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/Inter_18pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/Inter_28pt-Bold.ttf')     format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('./fonts/Inter_28pt-Black.ttf')    format('truetype'); }

/* ── Foreground / background semantic aliases ───────────────── */
:root {
  /* Brand palette aliases (short names for ergonomics) */
  --navy:        #0A1D2B;
  --navy-light:  #0D2234;
  --navy-alt:    #122838;
  --navy-surface:#1A3345;
  --platinum:    #F6F7F9;
  --mid-gray:    #88888A;
  --gold:        #B7A05A;
  --gold-light:  #BDA458;
  --white:       #FEFEFE;

  --teal:        #0E7B6C;   /* LYNForge */
  --blue:        #3B8FDB;   /* LYNCalc */
  --blue-deep:   #1565C0;
  --amber:       #D97A24;   /* LYNViewer */
  --amber-deep:  #A04F00;

  /* Foreground tiers (use against the active --bg-primary) */
  --fg1: var(--text-primary);     /* primary text */
  --fg2: var(--text-secondary);   /* body / supporting */
  --fg3: var(--text-muted);       /* metadata, labels */
  --fg-accent: var(--accent);     /* gold accent */

  /* Backgrounds */
  --bg1: var(--bg-primary);
  --bg2: var(--bg-surface);
  --bg3: var(--bg-elevated);

  /* Strokes */
  --stroke: var(--border);
  --stroke-strong: color-mix(in srgb, var(--border) 70%, var(--fg1));

  /* Status (semantic, derived) */
  --status-info:    var(--blue);
  --status-success: #2EAF7D;
  --status-warning: #E0A933;
  --status-danger:  #C24B3F;
}

/* Default to dark — per brand bible */
:root { color-scheme: dark; }
html:not([data-theme]) { --bg-primary: var(--lynrr-navy); --bg-surface: var(--lynrr-navy-alt); --bg-elevated: var(--lynrr-navy-surface); --text-primary: var(--lynrr-white); --text-secondary: var(--lynrr-platinum); --text-muted: var(--lynrr-mid-gray); --accent: var(--lynrr-gold); --border: var(--lynrr-navy-surface); }

/* ============================================================
   Type styles — semantic
   Inter for everything textual; IBM Plex Mono for data/code.
   No serifs anywhere in the system.
   ============================================================ */

.lynrr-display {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  color: var(--fg1);
}

.lynrr-h1, h1.lynrr {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--fg1);
}

.lynrr-h2, h2.lynrr {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--fg1);
}

.lynrr-h3, h3.lynrr {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--fg1);
}

.lynrr-h4, h4.lynrr {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--fg1);
}

.lynrr-eyebrow, .lynrr-overline {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg3);
}

.lynrr-lead, p.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg2);
  text-wrap: pretty;
}

.lynrr-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg2);
  text-wrap: pretty;
}

.lynrr-small, small {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg3);
}

.lynrr-caption {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--fg3);
}

.lynrr-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
}

.lynrr-mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg1);
}

.lynrr-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  color: var(--fg1);
}

/* Big-number / KPI specimen */
.lynrr-kpi {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-accent);
}
.lynrr-kpi-unit {
  font-family: var(--font-mono);
  font-size: 0.4em;
  color: var(--fg3);
  margin-left: 0.25em;
  letter-spacing: 0.04em;
}

/* Brand wordmark (CSS-only; never substitute for the real SVG). */
.lynrr-wordmark {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Quote */
blockquote, .lynrr-quote {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.35;
  color: var(--fg1);
  border-left: 2px solid var(--fg-accent);
  padding-left: 20px;
  margin: 0;
}

/* Link */
a, .lynrr-link {
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--fg-accent) 40%, transparent);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
a:hover, .lynrr-link:hover {
  color: color-mix(in srgb, var(--fg-accent) 80%, var(--white));
  border-bottom-color: var(--fg-accent);
}

/* Table base — financial / engineering data */
table.lynrr {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
table.lynrr th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg3);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke);
}
table.lynrr td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke);
  color: var(--fg2);
}
table.lynrr td.num { text-align: right; }