/* JeffsFlix product UI tokens, kit v1.1 (theleeorg/jeffsflix-branding, ui/README.md).
   Copy this file into a product unchanged and build on the names. The six brand colours are the
   guidelines' own; every other value here is derived from them for screens. Dark only: JeffsFlix
   screens sit on Void. */

:root {
  /* The brand's six colours (guidelines, page 03). Never changed. */
  --jf-signal: #7C5CFF;
  --jf-deep: #5B2EE5;
  --jf-void: #0E0B1E;
  --jf-ink: #17123A;
  --jf-ghost: #F4F2FF;
  --jf-slate: #9A94B8;

  /* Surfaces, from the back forward. */
  --jf-bg: var(--jf-void);
  --jf-surface: #161230;            /* cards */
  --jf-raised: #1E1940;             /* a pressed or chosen segment, a hovered row */

  /* Lines. --jf-line is decoration only; anything a person must see to use a control
     (a field's edge, a switch's track, a secondary button's edge) uses --jf-line-strong (3:1). */
  --jf-line: rgba(154, 148, 184, 0.22);
  --jf-line-strong: #6E6992;

  /* Text. */
  --jf-text: var(--jf-ghost);
  --jf-text-2: var(--jf-slate);     /* secondary: captions, metadata, the line under a title */
  --jf-violet-text: #A48BFF;        /* violet as TEXT: links, eyebrows, the focus ring. Signal Violet itself is 4.15:1 on a card, too low for words */

  /* Buttons. Words on violet are Ghost White on Deep Violet (6.40:1), never on Signal (3.93:1). */
  --jf-button: var(--jf-deep);
  --jf-button-hover: #4A22C9;
  --jf-on-button: var(--jf-ghost);
  --jf-focus: var(--jf-violet-text);

  /* State: up (ready, on JeffsFlix, done), down (failed, refused), wait (waiting, not sure).
     Each has an 18% tint for a pill's fill; the word sits on it in the full colour. */
  --jf-up: #3DD68C;
  --jf-down: #FF6B7A;
  --jf-wait: #F2B94B;
  --jf-up-tint: rgba(61, 214, 140, 0.18);
  --jf-down-tint: rgba(255, 107, 122, 0.18);
  --jf-wait-tint: rgba(242, 185, 75, 0.18);
  --jf-violet-tint: rgba(124, 92, 255, 0.18);
  --jf-neutral-tint: rgba(154, 148, 184, 0.18);

  /* The one gradient (guidelines, page 03), for shapes without words: a progress fill, a chart's
     bars. Never behind words; a violet card with words is solid Deep Violet. */
  --jf-gradient: linear-gradient(90deg, var(--jf-signal), var(--jf-deep));

  /* Space: these six and nothing between. */
  --jf-space-1: 4px;
  --jf-space-2: 8px;
  --jf-space-3: 12px;
  --jf-space-4: 16px;
  --jf-space-5: 24px;
  --jf-space-6: 32px;
  --jf-gutter: 16px;                /* a phone's side margin; 24px from 834px */

  /* Type: Helvetica, then Inter, Arial or the system's sans-serif (guidelines, page 04). */
  --jf-font: Helvetica, "Helvetica Neue", Inter, Arial, system-ui, sans-serif;
  --jf-text-xs: 13px;               /* eyebrows, pills, card heads */
  --jf-text-sm: 14px;               /* secondary lines */
  --jf-text-md: 16px;               /* body; never smaller for a field's text (iOS zooms below 16) */
  --jf-text-lg: 22px;               /* a state's big line */
  --jf-text-xl: 28px;               /* page title on a phone */
  --jf-text-2xl: 34px;              /* page title from 834px */
  --jf-text-hero: 72px;             /* one number, once a page at most */
  --jf-line-height: 1.45;
  --jf-tracking-caps: 0.05em;       /* the guidelines' +5% for capitals */

  /* Corners. */
  --jf-radius-sm: 8px;              /* posters, small tiles */
  --jf-radius-md: 10px;             /* buttons, fields */
  --jf-radius-lg: 14px;             /* cards */
  --jf-radius-pill: 999px;

  /* Touch. */
  --jf-hit: 44px;                   /* the smallest thing a finger presses, in both directions */

  color-scheme: dark;
}