/* ============================================================
   YourPlayables - Colors & Type
   Brand: creator videos you can play.
   ============================================================ */

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand color tokens ---------- */
  /* Primary: clean creator-platform black, built for sticker-bright accents. */
  --moja-ink:        #050505;
  --moja-ink-2:      #101014;
  --moja-ink-3:      #191922;

  /* Accent: the logo's hot pink Y, used for primary action. */
  --moja-flame:      #FF2FB3;
  --moja-flame-2:    #FF5FC5;   /* hover */
  --moja-flame-soft: #FFE0F4;   /* tinted bg */

  /* Secondary accents from the YP controller mark. */
  --moja-tano:       #FFD21A;   /* punch yellow */
  --moja-tatu:       #1FDD72;   /* controller success green */
  --moja-saba:       #00AEEF;   /* electric cyan */
  --moja-nane:       #8B5CFF;   /* bright purple */

  /* ---------- Neutrals (light mode foreground / dark mode background) ---------- */
  --moja-paper:      #FFFFFF;
  --moja-fog-50:     #FAFAFA;
  --moja-fog-100:    #F2F2F2;
  --moja-fog-200:    #E6E6E6;
  --moja-fog-300:    #D1D1D1;
  --moja-fog-400:    #A8A8A8;
  --moja-fog-500:    #6E6E6E;
  --moja-fog-600:    #4A4A4A;
  --moja-fog-700:    #2C2C2C;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1:   var(--moja-ink);          /* primary text */
  --fg-2:   var(--moja-fog-600);      /* secondary text */
  --fg-3:   var(--moja-fog-500);      /* tertiary / meta */
  --fg-on-dark:    var(--moja-paper);
  --fg-on-flame:   var(--moja-paper);

  --bg-1:   var(--moja-paper);        /* primary surface (light) */
  --bg-2:   var(--moja-fog-50);       /* subtle surface */
  --bg-3:   var(--moja-fog-100);      /* hover row */
  --bg-inverse: var(--moja-ink);      /* the streaming-app default */

  --border-1: var(--moja-fog-200);
  --border-2: var(--moja-fog-300);
  --border-strong: var(--moja-ink);

  /* ---------- Semantic state ---------- */
  --state-success: var(--moja-tatu);
  --state-warning: var(--moja-tano);
  --state-info:    var(--moja-saba);
  --state-danger:  var(--moja-flame);

  /* ---------- Type — Quicksand, 100% of the system ---------- */
  --font-display: 'Quicksand', ui-rounded, system-ui, sans-serif;
  --font-body:    'Quicksand', ui-rounded, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale — chunky-friendly, slightly tighter line-heights for the
     rounded geometry. Display sizes lean BOLD because the brand wordmark does. */
  --t-display-xl: 88px;   --lh-display-xl: 0.95;  --tr-display-xl: -0.03em;
  --t-display-l:  64px;   --lh-display-l:  0.98;  --tr-display-l:  -0.025em;
  --t-display-m:  48px;   --lh-display-m:  1.02;  --tr-display-m:  -0.02em;
  --t-h1:         36px;   --lh-h1:         1.1;   --tr-h1:         -0.015em;
  --t-h2:         28px;   --lh-h2:         1.15;  --tr-h2:         -0.01em;
  --t-h3:         22px;   --lh-h3:         1.2;   --tr-h3:         -0.005em;
  --t-h4:         18px;   --lh-h4:         1.3;   --tr-h4:          0;
  --t-body-l:     17px;   --lh-body-l:     1.55;  --tr-body-l:      0;
  --t-body:       15px;   --lh-body:       1.55;  --tr-body:        0;
  --t-body-s:     13px;   --lh-body-s:     1.5;   --tr-body-s:      0.005em;
  --t-caption:    12px;   --lh-caption:    1.4;   --tr-caption:     0.02em;
  --t-overline:   11px;   --lh-overline:   1.3;   --tr-overline:    0.14em;

  /* ---------- Spacing — 4-point grid ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ---------- Radii — generous, matches Quicksand's rounded terminals ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* ---------- Shadows — soft, neutral, not too colored ---------- */
  --shadow-1: 0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04);
  --shadow-2: 0 4px 12px rgba(10,10,10,0.08), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-3: 0 12px 28px rgba(10,10,10,0.12), 0 4px 8px rgba(10,10,10,0.06);
  --shadow-4: 0 24px 60px rgba(10,10,10,0.18), 0 8px 16px rgba(10,10,10,0.08);
  --shadow-flame: 0 8px 24px rgba(255, 47, 179, 0.35);

  /* ---------- Motion — bouncy and confident, never sterile ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);  /* the "press X" overshoot */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 500ms;

  /* ---------- Component tokens ---------- */
  --hit-target: 44px;
}

/* ============================================================
   Semantic element styles — drop these on the matching tag
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display-xl, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--tr-display-xl);
}
.t-display-l {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-display-l);
  line-height: var(--lh-display-l);
  letter-spacing: var(--tr-display-l);
}
.t-display-m {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-display-m);
  line-height: var(--lh-display-m);
  letter-spacing: var(--tr-display-m);
}
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  margin: 0;
}
h4, .t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h4);
  line-height: var(--lh-h4);
  margin: 0;
}
p, .t-body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  margin: 0;
}
.t-body-l {
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  font-weight: var(--fw-regular);
}
.t-body-s, small {
  font-size: var(--t-body-s);
  line-height: var(--lh-body-s);
  font-weight: var(--fw-regular);
}
.t-caption {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--fg-3);
}
.t-overline {
  font-size: var(--t-overline);
  line-height: var(--lh-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}
code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}