/* ==========================================================================
   Bigscreen Design System — Colors, Type, Spacing
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   --------------------------------------------------------------------------
   Display/UI/Body: Neue Haas Grotesk Display Pro (licensed). When the licensed
   files are not installed, the stack falls back to Inter Tight (Google Fonts)
   which is the closest free neo-grotesk match. Replace the @font-face URLs
   below with your local Neue Haas TTFs in fonts/ to switch over.

   Mono / numerals / eyebrows: Fragment Mono Regular (shipped locally).
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;700&display=swap');

@font-face {
  font-family: 'Fragment Mono';
  src: url('fonts/FragmentMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Neue Haas Grotesk Display Pro — licensed, self-hosted in fonts/.
   Names match the Figma usage. */
@font-face { font-family: 'Neue Haas Grotesk Display Pro'; font-weight: 300;
  src: url('fonts/NeueHaasDisplayLight.ttf') format('truetype'); font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Haas Grotesk Display Pro'; font-weight: 400;
  src: url('fonts/NeueHaasDisplayRoman.ttf') format('truetype'); font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Haas Grotesk Display Pro'; font-weight: 500;
  src: url('fonts/NeueHaasDisplayMediu.ttf') format('truetype'); font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Haas Grotesk Display Pro'; font-weight: 700;
  src: url('fonts/NeueHaasDisplayBold.ttf') format('truetype'); font-style: normal; font-display: swap; }

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ---------- Color: ink + paper ---------- */
  --ink:        #0D0D0D;
  --ink-soft:   #0E0F0F;
  --ink-2:      #222425;
  --paper:      #FFFFFF;
  --paper-warm: #FFFEFA;
  --paper-2:    #F4F3F3;

  /* ---------- Color: neutrals ---------- */
  --mute:       #787E81;
  --mute-2:     #5E6A6F;
  --mute-3:     #8F8F8F;
  --rule:       #DFDFDF;
  --rule-soft:  #E4E4E4;
  --rule-2:     #F4F3F3;

  /* ---------- Color: accent (the one Bigscreen color) ---------- */
  --accent:        #4D1EF7;
  --accent-deep:   #4000FF;
  --accent-12:     rgba(77, 30, 247, 0.12);
  --accent-08:     rgba(77, 30, 247, 0.08);
  --accent-04:     rgba(77, 30, 247, 0.04);

  /* ---------- Color: status (use sparingly) ---------- */
  --warn:    #FFAA00;
  --alert:   #FF5900;
  --alert-2: #E7711B;

  /* ---------- Foreground / background semantic ---------- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-soft);
  --fg-3: var(--mute);
  --fg-4: var(--mute-3);
  --bg-1: var(--paper);
  --bg-2: var(--paper-2);

  /* ---------- Type families ---------- */
  --font-sans: 'Neue Haas Grotesk Display Pro', 'Inter Tight', 'Inter',
               -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---------- Type ramp — desktop (size / line-height) ----------
     From the brand type system. Mobile values in @media block below. */
  --fs-jumbo:        96px;  --lh-jumbo:        110%;   /* "Beyond." */
  --fs-xlarge:       72px;  --lh-xlarge:       88px;   /* hero headline */
  --fs-large:        64px;  --lh-large:        72px;   /* "This is Beyond" */
  --fs-headline-md:  48px;  --lh-headline-md:  56px;   /* dense paragraph head */
  --fs-subhead:      32px;  --lh-subhead:      40px;   /* "Micro OLED displays" */
  --fs-body-lg:      24px;  --lh-body-lg:      32px;   /* lede */
  --fs-body-sm:      18px;  --lh-body-sm:      24px;   /* default body */
  --fs-detail:       16px;  --lh-detail:       20px;   /* meta */
  --fs-label-mono:   15px;  --lh-label-mono:   16px;   /* eyebrow / fragment mono */
  --fs-button:       15px;  --lh-button:       22px;   /* button / link */

  /* legacy aliases (still referenced by older components) */
  --fs-body:    var(--fs-body-sm);
  --fs-eyebrow: var(--fs-label-mono);
  --fs-caption: var(--fs-label-mono);
  --fs-h6:      var(--fs-detail);
  --fs-h5:      var(--fs-body-lg);
  --fs-h4:      var(--fs-subhead);
  --fs-h3:      var(--fs-headline-md);
  --fs-h2:      var(--fs-large);
  --fs-h1:      var(--fs-xlarge);
  --fs-display: var(--fs-jumbo);

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;

  --tr-tight:    -0.02em;
  --tr-snug:     -0.01em;
  --tr-loose:     0.08em;
  --tr-eyebrow:   0.12em;

  /* ---------- Spacing scale (Figma tokens) ---------- */
  --s-4:   4px;
  --s-8:   8px;
  --s-12:  12px;
  --s-16:  16px;
  --s-24:  24px;
  --s-32:  32px;
  --s-40:  40px;
  --s-48:  48px;
  --s-56:  56px;
  --s-80:  80px;
  --s-120: 120px;
  --s-160: 160px;
  --s-240: 240px;
  --s-320: 320px;

  /* ---------- Radii ---------- */
  --r-0:    0;
  --r-4:    4px;
  --r-8:    8px;
  --r-12:   12px;
  --r-pill: 999px;

  /* ---------- Borders ---------- */
  --hairline: 1px solid var(--rule);
  --hairline-soft: 1px solid var(--rule-2);

  /* ---------- Elevation ---------- */
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.08);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro:   120ms;
  --dur-std:     220ms;
  --dur-cinema:  420ms;

  /* ---------- Layout ---------- */
  --max-w: 1440px;
  --gutter-desktop: 80px;
  --gutter-mobile: 24px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-1);
  background: var(--bg-1);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  background: var(--bg-1);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Semantic type
   -------------------------------------------------------------------------- */

.h-display, h1.display {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-xlarge);
  line-height: var(--lh-xlarge);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-large);
  line-height: var(--lh-large);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-headline-md);
  line-height: var(--lh-headline-md);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-1);
  margin: 0;
}

h6, .h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-detail);
  line-height: var(--lh-detail);
  color: var(--fg-1);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-2);
}

.caption, .mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label-mono);
  line-height: var(--lh-label-mono);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label-mono);
  line-height: var(--lh-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Numerals as mono — drop into spec lists */
.num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

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

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-micro) var(--ease);
}

a:hover { opacity: 0.7; }

hr {
  border: 0;
  border-top: var(--hairline);
  margin: 0;
}

::selection { background: var(--accent-12); color: var(--ink); }

/* --------------------------------------------------------------------------
   Mobile type ramp — overrides the desktop size/line-height vars
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --fs-jumbo:        64px;  --lh-jumbo:        110%;
    --fs-xlarge:       42px;  --lh-xlarge:       48px;
    --fs-large:        36px;  --lh-large:        42px;
    --fs-headline-md:  32px;  --lh-headline-md:  40px;
    --fs-subhead:      26px;  --lh-subhead:      32px;
    --fs-body-lg:      22px;  --lh-body-lg:      30px;
    --fs-body-sm:      18px;  --lh-body-sm:      24px;
    --fs-detail:       16px;  --lh-detail:       20px;
    --fs-label-mono:   15px;  --lh-label-mono:   16px;
    --fs-button:       15px;  --lh-button:       22px;
  }
}