/* ============================================================================
   Design tokens - COPIED VERBATIM from portal/styles.css, which in turn lifted them
   from the TV app's style.css.

   Not re-typed and not 'interpreted'. The whole point of the marketing site matching
   the product is that a visitor who installs the app finds the same colours, radii and
   type they were just looking at - and the only way to guarantee that is for the values
   to be the same values. If the portal retints, re-copy this block; do not edit it here.
   ========================================================================== */
:root {
  /* Tells the browser this page is dark, so every piece of native UI it draws for us -
     the document scrollbar, form control internals, the text caret - is rendered from the
     dark set instead of the light one. Without it the page keeps a light scrollbar down a
     #0b0f14 page, which is the same mismatch the language popup had. The portal is dark
     only, deliberately: it is a remote control for a television, and the TV app has no
     light theme to match. */
  color-scheme: dark;

  --bg:        #0b0f14;   /* app: html/body background */
  --bg-panel:  #101722;   /* app: .card / .preview / .type-btn */
  --bg-row:    #0f1620;   /* app: .list-item */
  --bg-btn:    #141c26;   /* app: .actions button */
  --line:      #243243;   /* app: .card / .actions button border */
  --line-row:  #1f2a38;   /* app: .list-item border */
  --line-soft: #1a2432;   /* app: .info-row divider */
  --line-input:#2c3a4c;   /* app: .form input border */
  --hairline:  rgba(255,255,255,0.14);  /* app: .glass-panel border */
  --text:      #e9edf2;   /* app: body colour */
  --text-dim:  #9aa6b2;   /* app: .info-label / labels */
  --text-mute: #7f8b98;   /* app: .pl-ping-hint */
  /* COLOUR MEANS SOMETHING - the same three-way split the TV app uses:
       blue  = general selection / focus / primary action   (app: #3aa0ff focus ring)
       red   = server-login sources, plus destructive and error states
       green = M3U
     The portal originally had ONE --accent and it was the source-type red, so red landed on
     tabs, primary buttons and the plan badge - none of which are about a source type. That made
     red the dominant colour and drained it of its meaning. --accent stays as the red for
     the rules that are genuinely about a source type or destructive. */
  --sel:       #3aa0ff;   /* app: focus accent */
  --sel-dk:    #2b7fd0;
  --sel-tx:    #dbecff;
  --accent:    #ff5a5a;   /* app: source-type red - source type + danger ONLY */
  --accent-dk: #c93b3b;
  --accent-tx: #ffd6d6;   /* app: the login-source chip text */
  --ok:        #50d282;   /* app: M3U green */
  --ok-tx:     #d6f7e4;   /* app: .pl-active-chip.type-m3u text */
  --warn:      #f0b23c;
  --radius:    16px;      /* app: --radius */
  --radius-sm: 10px;      /* app: .list-item / .type-btn / .form input */
  --pill:      999px;     /* app: .pl-active-chip */
  --tap:       48px;      /* minimum comfortable touch target */
}