/* The one place FlipVideo's colours and type are defined.
 *
 * Before this file the same palette block was pasted into six pages
 * (about, refunds, terms, privacy, registration, account) — flat #000/#fff —
 * while pricing.css carried a different and more considered one, and
 * billing.css and paddle-checkout.js referenced THAT one through var()
 * fallbacks. So the account page and the pricing page it links to were visibly
 * two different products, and a colour could be changed in one without the
 * other ever hearing about it.
 *
 * The pricing palette won: it is the newest, it is the one the shared chrome
 * already falls back to, and it is the one a customer sees while deciding to
 * pay. Everything else now uses it.
 *
 * Load this BEFORE a page's own <style>, so a page can still override a token
 * for itself (the text pages narrow --site-content-max, for instance) simply by
 * setting it again.
 *
 * Cache-busting: pages link this with ?v={{.AssetVersion}} like every other
 * asset (CLAUDE.md).
 */

:root {
  color-scheme: dark;

  /* Backgrounds: page canvas, card container, and nested panel */
  --bg:          #08090b;  /* Main page canvas */
  --card-bg:     #101216;  /* Card, dialog, auth card, and menu background */
  --card:        var(--card-bg); /* Legacy / test alias */
  --panel-bg:    #171a20;  /* Nested sub-card, detail row, and input control background */

  /* Text. --fg is deliberately a warm off-white rather than #fff: pure white on
     a near-black page glares, and every page that used #fff was brighter than
     the pricing page sitting one click away. */
  --fg: #f6f3eb;
  --muted: #a4a6ad;
  --line: #2a2e36;

  /* Tier identity. The same values billing.css puts on the user-icon halo, so
     the ring around your icon and the plan you are on are the same colour. */
  --free:    #a5acb5;
  --starter: #79e36f;
  --pro:     #56bdff;
  --ultra:   #c77dff;

  --tier-free-ring:    var(--free);
  --tier-starter-ring: var(--starter);
  --tier-pro-ring:     var(--pro);
  --tier-ultra-ring:   var(--ultra);

  /* Staff & role markers */
  --role-admin-accent:  #d6a04f;
  --role-editor-accent: #736bff;

  /* State. --ok is "this is working / you have this"; --accent is the brand
     highlight for something to act on; --warn and --danger escalate from there.
     Named for what they MEAN, so a page never has to pick a hex to say "good". */
  --ok: #79e36f;
  --accent: #56bdff;
  --warn: #e0a341;
  --danger: #ff8a80;

  /* Layout. Matches the shared site topbar and footer in billing.css; a text
     page narrows it for readability by setting --site-content-max again. */
  --site-content-max: 1240px;
  --site-content-gutter: 32px;

  /* Older pages said --border; it is --line. One colour. */
  --border: var(--line);

  /* ── Border & Stroke Tokens (Global) ────────────────────────────────────── */
  --border-width:       1px;   /* Standard card, input, and panel borders */
  --border-width-thick: 2px;   /* Active rings, indicator dots */
  --border-width-focus: 3px;   /* Accessible focus outlines and role stripes */
  --border-subtle:      var(--border-width) solid var(--line);

  /* ── Typography & Scales (Global) ────────────────────────────────────────── */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Line Heights & Opacity Scale (Global) ───────────────────────────────── */
  --line-height-none:  1;
  --line-height-tight: 1.2;
  --line-height-dense: 1.35;
  --line-height-snug:  1.45;
  --line-height-base:  1.55;
  --line-height-loose: 1.65;

  --opacity-disabled: 0.45;
  --opacity-dimmed:   0.55;
  --opacity-muted:    0.6;

  /* ── Semantic Font Sizes (Global) ────────────────────────────────────────── */
  --font-size-micro:   10px;  /* Micro badge / chip / hint text */
  --font-size-meta:    11px;  /* Compact metadata / timestamps / HUD logs */
  --font-size-small:   12px;  /* Small text / secondary captions */
  --font-size-label:   13px;  /* Form labels / card titles / badges */
  --font-size-body:    14px;  /* Standard UI text / alerts */
  --font-size-btn:     15px;  /* Buttons / CTAs */
  --font-size-base:    16px;  /* Base body font size */
  --font-size-subhead: 18px;  /* Section subheads / player control icons */
  --font-size-title:   24px;  /* Card titles / page subheaders */
  --font-size-display: 32px;  /* Large section headers */

  /* Fluid display typography scale */
  --font-size-hero:        clamp(28px, 3.6vw, 44px); /* Hero h1 display title */
  --font-size-headline:    clamp(24px, 3.2vw, 36px); /* Major section and policy h2 */
  --font-size-display-val: clamp(28px, 2.5vw, 38px); /* Quality resolution numbers */
  --font-size-price:       clamp(32px, 2.8vw, 42px); /* Currency amounts */

  /* Weight scale */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Global semantic typography tokens */
  --weight-title: var(--weight-extrabold);    /* 800: Page titles, brand headers, hero text */
  --weight-subhead: var(--weight-bold);        /* 700: Section headers, card titles */
  --weight-btn: var(--weight-bold);            /* 700: Action buttons, primary CTAs */
  --weight-label: var(--weight-semibold);      /* 600: Form labels, metadata headers */
  --weight-link: var(--weight-semibold);       /* 600: Nav links, secondary actions, badge text */
  --weight-body: var(--weight-regular);        /* 400: Paragraphs, descriptive copy */

  /* Letter spacing / tracking scale */
  --tracking-display: -0.05em; /* Large hero h1 headers */
  --tracking-title:   -0.02em; /* Card titles, section h2/h3, auth headers */
  --tracking-caps:     0.04em; /* Uppercase badges, metadata tags, hints */
  --tracking-mono:     0.08em; /* Monospace codes, referral tokens */
  --tracking-eyebrow:  0.14em; /* Uppercase eyebrow kickers and featured labels */

  /* Global shadows & elevations */
  --shadow-card:     0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-raised:   0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal:    0 24px 60px rgba(0, 0, 0, 0.8);
  --shadow-featured: 0 25px 70px color-mix(in srgb, var(--pro) 17%, transparent);
  --text-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.7);
  --text-shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.8);

  /* Global filters & blur */
  --blur-subtle: blur(6px);
  --blur-backdrop: blur(8px);

  /* ── Shape & Radii Scale (Global) ──────────────────────────────────────── */
  --radius-card:    18px;            /* Main modal dialogs, auth card, major panels */
  --radius-plan:    5px 5px 22px 5px;/* Asymmetric pricing plan tier card */
  --radius-control: 10px;            /* Buttons, inputs, search boxes, nav items */
  --radius-badge:   999px;           /* Pill badges, round tag chips */
  --radius-icon:    8px;             /* Brand logo icon, genre icon corner */
  --radius-subtle:  5px;             /* Small corner accents */

  /* ── Spacing Scale (Relative / T-shirt) ─────────────────────────────────── */
  --space-3xs:  2px;    /* Micro offset / border nudge */
  --space-2xs:  3px;    /* Extra-tight inline gap */
  --space-xs:   4px;    /* Compact chip wrap gap / badge corner */
  --space-s:    6px;    /* Label bottom margin / alert gap / badge padding */
  --space-sm:   8px;    /* Standard gap / padding / margin */
  --space-md:   12px;   /* Grid / row gap */
  --space-base: 16px;   /* Section / alert margin / standard stack */
  --space-lg:   20px;   /* Card inner padding */
  --space-xl:   24px;   /* Subtitle margin / landscape padding */
  --space-2xl:  32px;   /* Split grid column gap / section padding */
  --space-3xl:  36px;   /* Major section margin / card vertical pad */

  /* Semantic spacing aliases */
  --space-xt: var(--space-3xs);
  --glyph-offset: 5px;  /* Hamburger icon line offset */

  /* Semantic gap rhythm */
  --gap-micro:   var(--space-3xs);    /* 2px micro inline gap */
  --gap-tight:   var(--space-s);      /* 6px tight inline gap */
  --gap-inline:  var(--space-sm);     /* 8px inline icons and chips gap */
  --gap-actions: 10px;                /* 10px button actions gap */
  --gap-row:     var(--space-md);     /* 12px list row and grid row gap */
  --gap-stack:   var(--space-base);   /* 16px component and form stack gap */
  --gap-section: var(--space-xl);     /* 24px major section gap */
  --gap-column:  var(--space-2xl);    /* 32px split grid column gap */

  /* Semantic layout containers */
  --control-height: 44px;
  --control-pad-x: 14px;
  --card-max-width: 420px;
  --notice-action-width: 320px; /* Notice-card action buttons: one shared width, centred (web/error-ui.css) */
  --notice-icon-size: 1.1em;    /* Notice-card button icon, scales with the label */
  --notice-icon-stroke: 2;      /* Line weight of those icons on their 24-unit grid */
  --card-pad-inner: var(--space-lg);
  --card-pad-y: var(--space-3xl);
  --card-pad-x: 28px;
  --section-pad-y: var(--space-2xl);
  --section-margin: var(--space-3xl);
  --logo-size: 30px;
  --field-margin: 18px;
  --glow-accent: color-mix(in srgb, var(--accent) 18%, transparent);
  --throbber-size: 160px;
  --throbber-inline-size: 22px;

  /* ── Fixed Floating Controls & Topbar Clearances ───────────────────────── */
  --topbar-control-offset-y: 7px;
  --topbar-control-gap: var(--space-md); /* 12px: exact spacing between user <-> sound <-> filter icons */
  /* The user icon (billing.css .user-icon-wrap) is the one fixed anchor at the top-right;
     every other fixed control and reserved gap is derived from these two values. */
  --user-icon-inset: var(--gap-actions); /* distance from the top and right viewport edges */
  --site-topbar-user-icon-clearance: calc(var(--user-icon-inset) + var(--logo-size) + var(--topbar-control-gap));
  --catalog-filter-toggle-right: calc(var(--site-topbar-user-icon-clearance) + var(--section-margin) + var(--topbar-control-gap));

  /* ── Status & Indicator Dot Tokens ─────────────────────────────────────── */
  --dot-size-status: var(--space-sm);
  --dot-size-badge:  7px;
  --dot-size-shot:   13px;
  --dot-radius-shot: 3px;    /* Square camera shot selector dot corner radius */
  --dot-radius-comp: 3px;    /* Composite camera shot square dot */
  --icon-size-mini:  7px;
  --shadow-dot: 0 1px 3px rgba(0, 0, 0, 0.5);
  --tier-icon-size:  34px;
  --badge-dot-size:  0.48em;

  /* ── Catalog Filter & Modal Dialog Tokens ───────────────────────────────── */
  --icon-size-filter:            var(--font-size-subhead);
  --catalog-filter-pad-y:        var(--space-base);
  --catalog-filter-pad-x:        var(--card-pad-inner);
  --catalog-filter-body-gap:     var(--field-margin);
  --catalog-filter-group-gap:    var(--gap-inline);
  --catalog-filter-pills-gap:    var(--gap-tight);
  --catalog-filter-footer-pad-y: var(--control-pad-x);
  --catalog-pill-pad-y:          var(--gap-tight);
  --catalog-pill-pad-x:          var(--gap-row);

  /* ── Legacy Aliases (mapped to semantic tokens for compatibility) ───────── */
  --space-2:  var(--space-3xs);
  --space-3:  var(--space-2xs);
  --space-4:  var(--space-xs);
  --space-5:  var(--glyph-offset);
  --space-6:  var(--space-s);
  --space-7:  var(--topbar-control-offset-y);
  --space-8:  var(--space-sm);
  --space-10: var(--gap-actions);
  --space-12: var(--space-md);
  --space-14: var(--control-pad-x);
  --space-16: var(--space-base);
  --space-18: var(--field-margin);
  --space-20: var(--space-lg);
  --space-22: var(--throbber-inline-size);
  --space-24: var(--space-xl);
  --space-28: var(--card-pad-x);
  --space-32: var(--space-2xl);
  --space-36: var(--space-3xl);

  --font-size-10: var(--font-size-micro);
  --font-size-11: var(--font-size-meta);
  --font-size-12: var(--font-size-small);
  --font-size-13: var(--font-size-label);
  --font-size-14: var(--font-size-body);
  --font-size-15: var(--font-size-btn);
  --font-size-16: var(--font-size-base);
  --font-size-18: var(--font-size-subhead);
  --font-size-24: var(--font-size-title);
  --font-size-32: var(--font-size-display);

  /* ── User Icon & Tier Halo Tokens ───────────────────────────────────────── */
  --ring-width-inner:    var(--border-width-thick);
  --ring-width-outer:    3.5px;
  --halo-contrast:       0 0 0 var(--ring-width-outer) #000;
  --role-badge-size:     var(--control-pad-x);
  --user-menu-min-width: 168px;
  --user-menu-bg:        var(--card-bg);
  --user-menu-fg:        var(--fg);
  --user-menu-muted:     var(--muted);
  --user-menu-hover:     var(--hover-bg);
  --user-menu-line:      var(--line);
  --color-text-muted:    var(--muted);

  /* Global interaction & hover states */
  --hover-bg: rgba(255, 255, 255, 0.06);
  --hover-bg-subtle: rgba(255, 255, 255, 0.04);

  /* ── Motion, Durations & Transitions (Global) ────────────────────────────── */
  --duration-fast:   150ms;  /* Micro-interactions, hover states, button presses */
  --duration-normal: 250ms;  /* Modal fades, control bars, dialogs */
  --duration-slow:   300ms;  /* Dropdowns, drawer slides, progress bars */

  --ease-standard: ease;
  --ease-out:      ease-out;
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --transition-fast:   var(--duration-fast) var(--ease-standard);
  --transition-normal: var(--duration-normal) var(--ease-standard);
  --transition-slow:   var(--duration-slow) var(--ease-standard);
  --transition-btn:    transform var(--transition-fast), filter var(--transition-fast);
  --transition-fade:   opacity var(--transition-normal);
  --transition-color:  color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);

  /* ── Interaction, Hover & Transform Scale (Global) ───────────────────────── */
  --transform-lift:  translateY(-1px);  /* Primary CTA hover lift */
  --transform-press: scale(0.98);       /* Active press feedback */
  --filter-lift:     brightness(1.1);   /* Hover highlight on dark backgrounds */
  --filter-dim:      brightness(0.9);   /* Hover dimming on bright controls */

  /* ── Auth & Card Aliases (1:1 with Global Tokens) ────────────────────────── */
  --auth-bg: var(--bg);
  --auth-screen: var(--card-bg);
  --auth-card: var(--card-bg);
  --auth-fg: var(--fg);
  --auth-on-fg: var(--bg);
  --auth-muted: var(--muted);
  --auth-line: var(--line);
  --auth-line-hover: var(--muted);
  --auth-accent: var(--accent);
  --auth-register: var(--warn);
  --auth-hint: var(--warn);
  --auth-danger: var(--danger);
  --auth-glow: var(--glow-accent);
  --auth-screen-max-width: var(--card-max-width);
  --auth-screen-radius: var(--radius-card);
  --auth-screen-pad-y: var(--card-pad-y);
  --auth-screen-pad-x: var(--card-pad-x);
  --auth-screen-shadow: var(--shadow-card), 0 0 30px var(--auth-glow);
  --auth-card-max-width: var(--card-max-width);
  --auth-card-radius: var(--radius-card);
  --auth-card-pad-y: var(--card-pad-y);
  --auth-card-pad-x: var(--card-pad-x);
  --auth-input-radius: var(--radius-control);
  --auth-logo-radius: var(--radius-icon);
  --auth-input-height: var(--control-height);
  --auth-input-font-size: var(--font-size-base);
  --auth-input-pad-x: var(--control-pad-x);
  --auth-input-bg: var(--hover-bg-subtle);
  --auth-hover-bg: var(--hover-bg);
  --auth-field-margin: var(--field-margin);
  --auth-logo-size: var(--logo-size);
  --auth-title-size: var(--font-size-title);
  --auth-label-size: var(--font-size-label);
  --auth-btn-font-size: var(--font-size-btn);
  --auth-weight-title: var(--weight-title);
  --auth-weight-btn: var(--weight-btn);
  --auth-weight-label: var(--weight-label);
  --auth-weight-link: var(--weight-link);
  --auth-tracking-title: var(--tracking-title);
  --auth-gap-column: var(--gap-column);
  --auth-gap-row: var(--gap-row);

  /* ── Gradients & Surface Light (Global) ─────────────────────────────────── */
  --gradient-page:
    radial-gradient(circle at 88% 7%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28rem),
    linear-gradient(180deg, var(--bg) 0%, var(--card-bg) 58%, var(--bg) 100%);
  --gradient-card-tint:
    linear-gradient(155deg, color-mix(in srgb, var(--tint-color, var(--accent)) 8%, var(--panel-bg)), var(--card-bg) 40%);
  --gradient-card-active:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--tint-color, var(--accent)) 11%, transparent) 0 1px, transparent 1px 12px),
    linear-gradient(155deg, color-mix(in srgb, var(--tint-color, var(--accent)) 13%, var(--card-bg)), var(--card-bg) 40%);
  --gradient-controls: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  --gradient-backdrop-glow:
    radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30rem), rgba(8, 9, 11, 0.88);

  --page-bg: var(--gradient-page);
}

html { background: var(--bg); }

body {
  margin: 0;
  color: var(--fg);
  font: var(--font-size-base)/var(--line-height-base) var(--font-sans);
  background: var(--page-bg);
  background-attachment: fixed;
}

/* Monospace is one stack, not one per page: account ids, price codes and
   diagnostic values all read as the same kind of thing. */
:root { --mono: var(--font-mono); }

/* Small inline loading throbber (account.html, etc.) */
.throbber-inline {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  vertical-align: -6px;
  margin-right: 8px;
}


/* Show/hide button inside a password field (password-reveal.js). The wrapper
   carries the field's width and top gap so the button sits inside the input's
   right edge; the input keeps its page styles and only reserves room for it. */
:root {
  --password-field-max: 360px;
  --password-reveal-size: 32px;
}
.password-reveal {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--password-field-max);
  margin-top: var(--space-xs);
}
.password-reveal > input[type] { /* [type] outranks page rules like input[type="password"] */
  width: 100%;
  max-width: none;
  padding-right: calc(var(--password-reveal-size) + var(--space-sm));
}
.password-reveal-btn {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--password-reveal-size);
  height: var(--password-reveal-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.password-reveal-btn:hover,
.password-reveal-btn[aria-pressed="true"] { color: var(--fg); }
.password-reveal-btn:focus-visible {
  outline: var(--border-width-thick) solid var(--accent);
  outline-offset: calc(-1 * var(--border-width-thick));
}

/* ── Reusable Auto-Capitalize Rule for Name & Title Inputs ── */
[autocapitalize="words"],
.capitalize {
  text-transform: capitalize;
}