/* Reel.et design tokens, written from design/tokens.json. An edit here is overwritten. */

:root {
  --bg: #0b0a0a; /* Page background of every screen; the ground under posters and the player. */
  --surface-1: #161414; /* List rows, feed cards, the tab bar and top bar when solid. */
  --surface-2: #201d1d; /* Bottom sheets, coin-pack tiles, inputs, the floating Continue bar. */
  --surface-3: #2b2727; /* Episode-grid cells, pressed rows, secondary buttons, skeleton blocks. */
  --line: #332e2e; /* Hairline dividers between rows and around cards. Decorative only: never the sole cue for a control. */
  --line-strong: #7a716f; /* Control borders (text fields, unselected plan cards, radio rings): 3.5:1 on surface-2, 4.2:1 on bg. */
  --ink: #f6f3f2; /* Primary text and icons on bg, surface-1/2/3, red-soft and gold-soft (13:1 or better). */
  --ink-muted: #b5acaa; /* Secondary text: cast, synopsis, metadata, inactive tab labels. On bg and every surface (6.6:1 or better). */
  --ink-subtle: #9a918f; /* Tertiary text: timestamps, fine print, placeholders, 'All content loaded'. On bg and every surface (4.8:1 or better). */
  --red: #d91f36; /* Brand red as a FILL: primary buttons, the selected plan's edge, active chip, toggles on, the Hot badge. Text on it is on-red (5.0:1). */
  --red-pressed: #b8182c; /* Pressed state of a red fill. */
  --on-red: #ffffff; /* Text and icons on a red fill. */
  --red-bright: #ff5a6b; /* Red as TEXT or ICON on dark grounds: active tab underline, ranking captions ('No.1 Trending'), liked heart, prices owed, destructive rows. 4.9:1 on surface-3, 6.5:1 on bg. */
  --red-soft: #3a1519; /* Tinted ground behind red-bright text: the active chip's quiet form, the insufficient-coins note, the top glow of Rewards and VIP screens. */
  --gold: #f2c46d; /* Subscription (VIP) only: plan price buttons, VIP card, crown icon, access-pass badges. Text on it is on-gold. As text on dark grounds 9:1 or better. */
  --gold-deep: #a8854a; /* Second stop of the VIP fill (gold to gold-deep), and the gold card's hairline. */
  --on-gold: #1e1609; /* Text and icons on gold and gold-deep fills (11:1 on gold). */
  --gold-soft: #2b2214; /* Tinted ground behind gold text: VIP perks rows, the 'Included in your pass' cell state. */
  --coin: #ffb547; /* Coins only: coin glyph, coin amounts, reward '+100' labels. As text on dark grounds 8.4:1 or better; text on a coin fill is on-gold. */
  --coin-deep: #c47a12; /* Inner ring of the coin glyph. */
  --success: #3fd0ae; /* Credited, claimed, subscription active, episode completed. Always paired with a check icon or a word. */
  --success-soft: #11302a; /* Ground behind success text. */
  --warning: #ff9447; /* Payment issue (in grace, on hold), coins expiring soon. Always paired with an alert icon or a word. */
  --warning-soft: #35200f; /* Ground behind warning text. */
  --info: #6f9bff; /* The New badge, 'Dubbed', informational notes, links inside fine print. As text on dark grounds 5.4:1 or better; text on an info fill is bg. */
  --info-soft: #16213a; /* Ground behind info text. */
  --scrim: #000000b8; /* Behind bottom sheets and dialogs. */
  --scrim-video: #00000080; /* Top and bottom fades over video so player text stays legible. */
  --glass: #201d1deb; /* Floating elements over content: Continue bar, notice cards, the tab bar over the player. */
  --focus: #ffffff; /* Keyboard / switch-control focus ring (see shadow focus-ring). 3:1 or better on every surface and on red. */
  --link: var(--info); /* Inline links in fine print and legal copy; an alias of info. */

  --space-half: 2px; /* Badge padding block, icon-to-count gap on the player rail. */
  --space-1: 4px; /* Icon-to-label gap, poster-title to caption. */
  --space-2: 8px; /* Poster grid gap, chip gap, inside compact rows. */
  --space-3: 12px; /* Between related rows, list-row padding block, poster-to-text in rows. */
  --space-4: 16px; /* Screen gutter, card and sheet padding. */
  --space-5: 20px; /* Sheet padding on the paywall, large card padding. */
  --space-6: 24px; /* Between feed sections. */
  --space-8: 32px; /* Empty-state spacing, above a sheet's primary action. */
  --space-10: 40px; /* Top spacing on onboarding and sign-in screens. */

  --radius-xs: 4px; /* Badges, the progress bar. */
  --radius-sm: 8px; /* Posters, episode cells, coin-pack tiles, text fields. */
  --radius-md: 12px; /* Cards, plan cards, list groups, the Continue bar, notice cards. */
  --radius-lg: 20px; /* Top corners of bottom sheets; dialogs. */
  --radius-full: 9999px; /* Buttons, chips, toggles, avatars, the search field. */

  --tap-min: 44px; /* Minimum touch target for every control. */
  --button-lg: 52px; /* Height of a sheet's or paywall's primary action. */
  --button-md: 44px; /* Default button height. */
  --button-sm: 32px; /* Inline row actions (Go, Continue, Remind). */
  --topbar-h: 52px; /* Top bar height, below the status bar. */
  --tabbar-h: 64px; /* Bottom tab bar height, above the home indicator. */
  --poster-row-w: 96px; /* Poster width inside list rows (Rankings, New, Search results). */
  --episode-cell: 56px; /* Episode-grid cell height. */
  --column-w: 430px; /* Width of the app's phone column; on a wider window it is centred with the page background on both sides. */

  --shadow-float: 0 8px 24px #000000b3; /* Continue bar, notice cards, toasts. */
  --shadow-sheet: 0 -12px 40px #000000cc; /* Bottom sheets and dialogs. */
  --shadow-red: 0 6px 20px #d91f3659; /* Primary button on paywall-type screens only (one per screen). */
  --focus-ring: 0 0 0 2px #0b0a0a, 0 0 0 4px #ffffff; /* Keyboard focus: 2px bg gap then 2px solid white; follows the element radius. */

  --font-sans: "Figtree", "Noto Sans Ethiopic", system-ui, -apple-system, sans-serif;
  --font-ethiopic: "Noto Sans Ethiopic", "Figtree", system-ui, sans-serif;
}

.display {
  font-size: 28px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.title-lg {
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}
.title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}
.subtitle {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.body {
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}
.body-strong {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}
.caption {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.micro {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.balance {
  font-size: 34px;
  line-height: 40px;
  font-weight: 800;
}
.price {
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
}
.rank {
  font-size: 36px;
  line-height: 36px;
  font-weight: 800;
  font-style: italic;
}

.balance,
.price,
.rank {
  font-variant-numeric: tabular-nums;
}