/* Multic Design System — Type & Color Foundations
 * Pulled directly from apps/mobile (constants/mobile-theme.ts + global.css).
 * Mobile is the consumer surface (Multiplayer Comics) — these dark-first tokens
 * are the canonical brand foundation. Light theme included as a paired set.
 */

/* Fonts —————————————————————————————————————————————————————————————————— */

/*
  Self-hosted woff2 only. Inter ships as a single variable font (weight axis
  100–900) split into 7 unicode-range subsets so non-latin scripts only get
  fetched when they're actually rendered. NHD/Space Mono are converted from
  the original .ttf masters with `fontTools.ttLib.woff2.compress`.

  font-display: swap pairs with the metric-matched fallback @font-face rules
  below, so the swap from system-ui/Helvetica Neue to NHD/Inter does not
  reflow the layout — only the glyph shapes change.

  Maximum-speed alternative (option 7 in the FOUT analysis, not implemented):
  inline each woff2 as base64 inside the HTML's <style> so paint can complete
  with the real font on the very first frame. The standalone designer export
  uses this approach. Trade-off: ~80–150 KB added to every HTML response,
  fonts can no longer be browser-cached separately. Worth the bloat only if
  the post-swap "shape change" reads as a regression even with metric
  matching — preload + woff2 + the fallback rules below already eliminate
  ~95 % of the visible flash.
*/

@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayBlack.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
  Inter (variable, weight axis 100–900). The 7 subsets mirror Google Fonts'
  Inter family on css2 — the latin block is preloaded in Layout.astro, the
  others are fetched lazily by the browser when the page renders any
  character in their unicode-range.
*/
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-cyrillic-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-greek-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-greek.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-vietnamese.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/Inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  Metric-matched fallback families. While the real font is downloading,
  text renders in these (which are just the system fallback re-declared
  with size-adjust + ascent/descent overrides so it occupies the *same*
  box dimensions as the real font). When NHD/Inter swap in, glyph shapes
  change but no characters reflow. Numbers come from the actual NHD Black
  / Inter Variable head & hhea tables (computed once with fontTools).
*/
@font-face {
  font-family: "Neue Haas Display Fallback";
  src:
    local("Helvetica Neue Bold"), local("Helvetica Neue"), local("Arial Bold"),
    local("Arial");
  size-adjust: 104.3%;
  ascent-override: 81.8%;
  descent-override: 18.2%;
  line-gap-override: 20%;
}

@font-face {
  font-family: "Inter Fallback";
  src:
    local("system-ui"), local("BlinkMacSystemFont"), local("Segoe UI"),
    local("Helvetica Neue"), local("Arial");
  size-adjust: 109.4%;
  ascent-override: 96.88%;
  descent-override: 24.12%;
  line-gap-override: 0%;
}

:root {
  /* Type ———————————————————————————————————————————————————————————————— */
  --font-display:
    "Neue Haas Display", "Neue Haas Display Fallback", "Helvetica Neue",
    system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", "SF Mono", Menlo, monospace;

  /* Wordmark — used for MULTIC lockup, big numbers, primary nav labels */
  --wordmark-size: 20px;
  --wordmark-line: 24px;
  --wordmark-tracking: -0.5px;

  /* Display — uppercase, tight tracking, used for screen titles & section starters */
  --display-xl-size: 34px;
  --display-xl-line: 38px;
  --display-xl-tracking: -0.9px;
  --display-lg-size: 30px;
  --display-lg-line: 34px;
  --display-lg-tracking: -0.7px;
  --display-md-size: 24px;
  --display-md-line: 28px;
  --display-md-tracking: -0.5px;

  /* Section label — wide tracking caps, used for "Continue Playing", "New Episodes for you" */
  --section-label-size: 12px;
  --section-label-line: 16px;
  --section-label-tracking: 1.6px;

  /* Action — CTA buttons, "ALL", "SCI-FI" chips, tab labels */
  --action-size: 11px;
  --action-line: 14px;
  --action-tracking: 0.5px;

  /* Body */
  --body-size: 14px;
  --body-line: 22px;
  --body-small-size: 13px;
  --body-small-line: 18px;
  --tab-label-size: 10px;
  --tab-label-line: 12px;
  --tab-label-tracking: 0.4px;

  /* ─── Color — Dark (canonical / brand-default) ─────────── */
  --bg: #0a0a0a; /* near-black canvas */
  --surface: #161616; /* cards, search pill, secondary buttons */
  --surface-alt: #222222; /* selected / popovers */
  --row-surface: #161616;

  --fg: #ffffff; /* primary text */
  --fg-strong: #ffffff;
  --fg-soft: #ffffff;
  --fg-muted: #888880; /* metadata, captions */
  --fg-inactive: #444440; /* inactive tabs, placeholders */
  --fg-placeholder: rgba(255, 255, 255, 0.3);

  --accent: #fedd00; /* signature Multic yellow (dark) */
  --accent-text: #0a0a0a;

  --border: #444440;
  --border-strong: #444440;
  --border-subtle: rgba(255, 255, 255, 0.18);
  --separator: #222222;

  --glass: rgba(255, 255, 255, 0.18);
  --glass-strong: rgba(255, 255, 255, 0.16);
  --glass-soft: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.1);

  --overlay: rgba(10, 10, 10, 0.84);
  --overlay-soft: rgba(10, 10, 10, 0.58);
  --scrim: rgba(10, 10, 10, 0.34);
  --scrim-heavy: rgba(10, 10, 10, 0.52);

  --tab-bar-bg: rgba(10, 10, 10, 0.98);

  --success: #0d9488;
  --warning: #fedd00;
  --danger: #c1121f;

  /* ─── Spacing / radii / shadows ────────────────────────── */
  --radius-sm: 6px; /* buttons, primary CTA (8 in mobile, but 6 for web parity) */
  --radius-md: 10px; /* cards (Tailwind --radius=0.625rem) */
  --radius-lg: 16px; /* hero panels */
  --radius-xl: 28px; /* glass auth sheets */
  --radius-pill: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px; /* canonical screen horizontal padding (px-5) */
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Shadows — Multic is largely flat. Use blur+overlay rather than drop shadows. */
  --shadow-none: 0 0 0 0 transparent;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-poster: 0 12px 28px rgba(0, 0, 0, 0.55);

  /* Hero / cover aspect */
  --aspect-poster: 2 / 3;

  /* ─── Semantic Type Recipes ────────────────────────────── */
}

/* Light theme — secondary, used inside settings & some auth chrome. */
:root[data-theme="light"] {
  --bg: #f5f2e8;
  --surface: #edeae0;
  --surface-alt: #e4e1d6;
  --row-surface: #edeae0;

  --fg: #1a1a1a;
  --fg-strong: #1a1a1a;
  --fg-soft: #1a1a1a;
  --fg-muted: #4a4740;
  --fg-inactive: #9a8866;
  --fg-placeholder: rgba(26, 26, 26, 0.35);

  --accent: #f0b800; /* slightly deeper yellow on cream */
  --accent-text: #1a1a1a;

  --border: #9a8866;
  --border-strong: #9a8866;
  --border-subtle: rgba(26, 26, 26, 0.18);
  --separator: #e4e1d6;

  --glass: rgba(26, 26, 26, 0.08);
  --glass-strong: rgba(26, 26, 26, 0.06);
  --glass-soft: rgba(26, 26, 26, 0.04);
  --glass-border: rgba(26, 26, 26, 0.1);

  --overlay: rgba(245, 242, 232, 0.92);
  --overlay-soft: rgba(245, 242, 232, 0.82);
  --scrim: rgba(26, 26, 26, 0.18);
  --scrim-heavy: rgba(26, 26, 26, 0.16);

  --tab-bar-bg: rgba(245, 242, 232, 0.98);
}

/* ─── Semantic recipes ─────────────────────────────────────
 * Use these on real content. Apply via class names so Multic's uppercase /
 * tracking discipline is enforced — not just font-size.
 */

.t-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--wordmark-size);
  line-height: var(--wordmark-line);
  letter-spacing: var(--wordmark-tracking);
  color: var(--fg-strong);
}

.t-display-xl,
.t-display-lg,
.t-display-md,
h1.multic,
h2.multic,
h3.multic {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--fg-strong);
}
.t-display-xl {
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-line);
  letter-spacing: var(--display-xl-tracking);
}
.t-display-lg {
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-line);
  letter-spacing: var(--display-lg-tracking);
}
.t-display-md {
  font-size: var(--display-md-size);
  line-height: var(--display-md-line);
  letter-spacing: var(--display-md-tracking);
}

.t-section-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--section-label-size);
  line-height: var(--section-label-line);
  letter-spacing: var(--section-label-tracking);
  text-transform: uppercase;
  color: var(--fg-strong);
}

.t-action {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--action-size);
  line-height: var(--action-line);
  letter-spacing: var(--action-tracking);
  text-transform: uppercase;
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--fg);
}

.t-body-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-small-size);
  line-height: var(--body-small-line);
  color: var(--fg-muted);
}

.t-tab-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
}