/* Stagecockpit design tokens — the source of truth for every visual value of the website and the customer portal.
 *
 * The website speaks the app's language: the surfaces, the accent, the slot colours and the typefaces are those of
 * the app (product/web/src/styles/tokens.css in the app repository). Logo: product/brand/ of the app.
 *
 * Rules:
 *   - site.css and portal.css must not contain literal colours, type sizes, spacing, radii, shadows, tracking, leading, z-index or
 *     transitions. Change them here.
 *   - Layout geometry (element widths/heights, transforms) stays in site.css.
 *   - Verify with: npm run check-tokens
 */

/* The app's typefaces, self-hosted (SIL Open Font License, assets/fonts/OFL-*.txt): Inter for text and interface,
   Inter Tight Black for headings like the logo's wordmark. The same files serve the app demos. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/inter-tight-latin-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* --- Surfaces (app: surface-black … surface-elevated) --- */
  --surface-black: #000000;
  --surface-base: #0e0e0e;
  --surface-raised: #131313;
  --surface-overlay: #1b1b1b;
  --surface-elevated: #262626;
  --screen-frame: linear-gradient(180deg, #19191b 0%, #0b0b0c 18%, #050505 100%);
  --surface-frost: rgba(0, 0, 0, 0.72);
  --surface-glass: rgba(0, 0, 0, 0.55);
  /* the app's segmented switch (ui-segmented--plain): a quiet grey track, the chosen item raised in a lighter grey */
  --segmented-track: #1b1b1b;
  --segmented-active: #2e2e2e;
  --segmented-height: 34px;
  --radius-segment: 8px;
  --transition-segment: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), width 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  /* the header bar once scrolled: see-through, the blur keeps the menu readable */
  --header-glass: rgba(0, 0, 0, 0.42);

  /* --- Lines --- */
  --line: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: #34373c;
  --line-bright: rgba(255, 255, 255, 0.3);

  /* --- Text --- */
  --text: #f4f4f4;
  --text-soft: #e6e6e6;
  --text-body: #cfcfcf;
  --text-muted: #a4a4a4;
  --text-dim: #8f8f8f;
  /* the quietest text: the AI note in the footer */
  --text-faint: #6a6a6a;

  /* --- Accent (the logo's yellow) --- */
  --accent: #ffcc00;
  --accent-hover: #ffe066;
  --accent-soft: rgba(255, 204, 0, 0.12);
  --accent-line: rgba(255, 204, 0, 0.4);
  --on-accent: #111111;
  --on-accent-soft: rgba(17, 17, 17, 0.6);
  /* the plan badge of the app (operator-plan-badge): the plan's colour mixed into the background and into white */
  --plan-badge-tint: 34%;
  --plan-badge-tint-text: 40%;
  --plan-free: #9aa0a6;
  /* the brightest text: the chosen item of a segmented switch, the plan badge */
  --text-bright: #ffffff;
  --line-on-accent: rgba(17, 17, 17, 0.35);

  /* --- Slot types and states, as in the app --- */
  --show: #3fb950;
  --show-bright: #7cfc98;
  --show-soft: rgba(63, 185, 80, 0.16);
  --changeover-bright: #fcb27d;
  --changeover-soft: rgba(240, 136, 62, 0.18);
  --soundcheck-bright: #99c9ff;
  --soundcheck-soft: rgba(88, 166, 255, 0.18);
  --break-bright: #cbd1d7;
  --break-soft: rgba(154, 160, 166, 0.18);
  --danger: #ff6b6b;

  /* --- macOS window buttons (the OperatorView shown as the Mac app) --- */
  --mac-close: #ff5f57;
  --mac-minimise: #febc2e;
  --mac-zoom: #28c840;
  --danger-soft: rgba(255, 107, 107, 0.12);
  --on-danger: #1a0505;

  /* --- Backdrop: the concert photo, grey and dimmed, lighter behind the hero's title --- */
  /* the light that follows the pointer along a card's edge, and inside a plan card */
  --edge-light: rgba(255, 255, 255, 0.55);
  --edge-width: 1px;
  /* a solid layer for CSS masks (only its alpha counts) */
  --mask-fill: linear-gradient(#000000 0 0);
  --card-light: rgba(255, 255, 255, 0.045);
  /* how strong the film grain over the black is */
  --grain-strength: 0.07;
  /* the page running into the footer's black */
  --footer-fade: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  /* the pricing section's band: a shade lighter than the page, fading in and out */
  --band: linear-gradient(180deg, rgba(14, 14, 14, 0) 0%, #0e0e0e 10%, #0e0e0e 90%, rgba(14, 14, 14, 0) 100%);
  /* the ground of the small scenes in the Why cards: a faint light from above */
  --scene-bg: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 70%), #0a0a0a;
  --backdrop-shade: radial-gradient(ellipse at 50% 32%, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.84) 100%);

  /* --- Stage lights sweeping over the crowd in the hero: all warm white --- */
  --beam-warm: linear-gradient(180deg, rgba(255, 244, 214, 0.16) 0%, rgba(255, 244, 214, 0.04) 55%, rgba(255, 244, 214, 0) 85%);
  /* the hero's stage screen lights the smoke around it; site.js turns it to the colour of the live card */
  --stage-light: rgba(124, 252, 152, 0.4);

  /* --- Type --- */
  --font-ui: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-brand: "Inter Tight", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-hero: clamp(2rem, min(6.4vw, 8.4svh), 4.75rem);
  --text-hero-lead: clamp(1rem, min(1.4vw, 2.2svh), 1.25rem);
  --text-title: clamp(2rem, 4.2vw, 3.4rem);
  --text-title-phone: 1.5rem;
  /* the customer portal is a tool, not a page to sell: its own, more compact scale */
  --portal-title: 2rem;
  --portal-card-title: 1.125rem;
  --portal-price: 2rem;
  --text-tagline: clamp(1.5rem, 2.8vw, 2.5rem);
  --text-closing: clamp(1.25rem, 2.2vw, 1.75rem);
  --text-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --text-card-title: 1.25rem;
  --text-plan-name: 1.75rem;
  --text-plan-price: 2.75rem;
  --text-xl: 1.125rem;
  /* very small labels (the Why papers, small marks) */
  --text-scene-xs: 0.625rem;
  --text-base: 1rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.875rem;
  --text-2xs: 0.8125rem;
  --text-3xs: 0.75rem;

  --leading-tight: 0.95;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-brand: 0.01em;
  --tracking-kicker: 0.14em;
  --tracking-label: 0.08em;
  --tracking-key: 0.04em;
  --tracking-code: 0.4em;

  /* --- Spacing (4px grid) --- */
  --space-hair: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-section: clamp(64px, 11vw, 144px);
  --gutter: clamp(16px, 4vw, 48px);
  --hero-copy-gap: clamp(24px, 5svh, 72px);
  --space-legal: clamp(24px, 5vw, 56px);
  --header-height: 72px;
  /* the launch's voucher bar above the header (site.css .promo-bar) */
  --promo-bar-height: 40px;
  --header-gutter: clamp(16px, 4.5vw, 64px);
  /* how much scrolling the OperatorView tour stays pinned for, all its features together */
  --tour-scroll: 180vh;
  /* a page shorter than the screen (404.html) still keeps its footer at the bottom */
  --viewport-full: 100svh;
  /* the crew photo behind FAQ is blurred already, only its monitor is sharp: no blur on top, so the StageView in it reads */
  --backdrop-crew-filter: contrast(1.04) brightness(0.9);
  /* on a narrow screen the crew photo is only a mood behind the full-width FAQ */
  /* the crew photo in the With card of Why: soft like the backdrop behind FAQ, the StageView in its monitor stays sharp */
  --why-photo-filter: blur(1px) contrast(1.04) brightness(0.85);
  /* around the monitor the photo falls off into black, most on the bright left, so the eye goes to the screen; laid
     over the whole photo (its monitor at 47 %, 27 %), so it runs on evenly under the text */
  --why-photo-shade:
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 23.5%, rgba(0, 0, 0, 0) 38.5%),
    radial-gradient(ellipse 29% 28.5% at 47% 27%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.7) 100%);
  /* the printed running order in the Without card: a little darker, sharp */
  --why-paper-filter: contrast(1.05) brightness(0.8);
  /* below the picture the photo runs on under the text, fading into the card's black */
  /* the printed list is bright: under the Without text the fade is denser, so the lines stay easy to read */
  --why-without-fade: linear-gradient(180deg, rgba(14, 14, 14, 0) 0%, rgba(14, 14, 14, 0) 34%, rgba(14, 14, 14, 0.86) 50%, rgba(14, 14, 14, 0.96) 100%);
  --why-with-fade: linear-gradient(180deg, rgba(14, 14, 14, 0) 0%, rgba(14, 14, 14, 0) 36%, rgba(14, 14, 14, 0.72) 54%, rgba(14, 14, 14, 0.9) 100%);
  --backdrop-crew-filter-narrow: grayscale(1) blur(12px) contrast(1.04) brightness(0.8);
  --crew-photo-fade: linear-gradient(90deg, transparent 0%, black 24%);
  /* the FAQ beside the crew photo's monitor on a wide screen */
  --faq-width-beside-photo: 620px;
  /* the StageView in the crew photo renders at this size before it is laid into the monitor */
  --crew-view-width: 1280px;
  --crew-view-height: 720px;
  /* the height the pinned tour needs besides the app: header, heading and some air */
  --tour-pin-room: 320px;
  /* customer portal: page width, the side column of the dashboard, controls, and the label column of a form */
  --portal-width: 1120px;
  --portal-aside: 22rem;
  --portal-control: 40px;
  --portal-label-width: 14rem;
  --portal-form-width: 48rem;

  /* --- Radius --- */
  /* the plan badge, as in the app's sidebar */
  --radius-badge: 4px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Shadow --- */
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.45);
  /* the screen: rim light on the edge, highlight on top, deep drop shadow, the stage lights' yellow glow */
  --shadow-screen: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 50px 120px rgba(0, 0, 0, 0.85), 0 0 90px rgba(255, 204, 0, 0.07);
  --shadow-screen-panel: inset 0 0 0 1px rgba(0, 0, 0, 0.9);
  --shadow-window: 0 32px 90px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.14);
  --shadow-mac-button: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
  --shadow-focus: 0 0 0 3px rgba(255, 204, 0, 0.45);
  /* a focused field, as in the app's OperatorView: a fine accent line on its edge instead of the wide glow */
  --field-focus-line: rgba(255, 204, 0, 0.5);
  --shadow-field-focus: inset 0 0 0 1px var(--field-focus-line);
  --shadow-button-glow: 0 10px 30px rgba(255, 204, 0, 0.28);
  /* the yellow icon on the yellow closing bar: a fine edge and a soft shadow lift it off the bar as a tile */
  --shadow-icon-on-accent: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  --shadow-featured: 0 0 0 1px rgba(255, 204, 0, 0.35), 0 24px 80px rgba(255, 204, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.45);
  /* the OperatorView tour: around the chosen (zoomed) feature the rest of the window dims a little */
  --shadow-tour: 0 0 0 9999px rgba(0, 0, 0, 0.3), 0 0 32px rgba(255, 204, 0, 0.25);
  /* the visitor's GO NEXT: a soft glow behind it all the time; when it first comes into view a ring goes out of it */
  --shadow-go-glow: 0 0 40px 6px rgba(255, 204, 0, 0.3);
  --shadow-invite-from: 0 0 0 0 rgba(255, 204, 0, 0.55), 0 0 40px 6px rgba(255, 204, 0, 0.3);
  --shadow-invite-to: 0 0 0 22px rgba(255, 204, 0, 0), 0 0 40px 6px rgba(255, 204, 0, 0.3);
  /* the visitor's GO NEXT under the One flow demo: a bright ring, a second one behind it and a wide glow */
  --shadow-go-press-from: 0 0 0 0 rgba(255, 204, 0, 1), 0 0 0 0 rgba(255, 204, 0, 0.7), 0 0 30px 6px rgba(255, 204, 0, 0.6);
  --shadow-go-press-to: 0 0 0 22px rgba(255, 204, 0, 0), 0 0 0 44px rgba(255, 204, 0, 0), 0 0 90px 40px rgba(255, 204, 0, 0);
  /* the stage screen in One flow, the moment GO NEXT reaches it */

  /* --- Z-index --- */
  --z-backdrop: -1;
  --z-behind: -1;
  --z-raised: 1;
  --z-header: 50;
  --z-tip: 60;
  --z-cover: 100;
  /* inside the photo of the With card: the shade, the screen in front of it, the cap in front of the screen */
  --z-photo-shade: 1;
  --z-photo-screen: 2;
  --z-photo-front: 3;

  /* --- Motion --- */
  --transition-quick: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  --transition-header: background-color 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
  --transition-blur: filter 400ms ease;
  --transition-backdrop-swap: opacity 1200ms ease;
  --transition-open: transform 200ms ease;
  --transition-promo: height 200ms ease, visibility 200ms ease;
  --transition-turn: transform 200ms ease, margin-top 200ms ease;
  --transition-light: background-color 1800ms ease;
  --transition-scene: filter 400ms ease;
  /* a text that fades in from a little above */
  --focus-text-shift: translateY(-6px);
  /* a feature of the OperatorView tour's list opens its line of text */
  --transition-tile: color 350ms ease, border-color 350ms ease, background 350ms ease, max-height 400ms cubic-bezier(0.2, 0.8, 0.2, 1), min-height 400ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 350ms ease, transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --tile-text-height: 4.5em;
  /* the chosen line of the OperatorView tour's list: the yellow fades out to the right */
  --list-fade: linear-gradient(90deg, rgba(255, 204, 0, 0.12) 0%, rgba(255, 204, 0, 0) 100%);
  --transition-tour: top 700ms cubic-bezier(0.2, 0.8, 0.2, 1), left 700ms cubic-bezier(0.2, 0.8, 0.2, 1), width 700ms cubic-bezier(0.2, 0.8, 0.2, 1), height 700ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms ease;
  --transition-zoom: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fade: opacity 300ms ease;
  --transition-reveal: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}