/* GENERATED by internal/web/gentokens from web/src/theme.css — DO NOT EDIT.
   Change the token in theme.css and run `go generate ./internal/web` from /ops. */

/* plus-jakarta-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/plus-jakarta-sans-latin-ext-400-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;
}

/* plus-jakarta-sans-latin-400-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/plus-jakarta-sans-latin-400-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;
}

/* plus-jakarta-sans-latin-ext-500-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/plus-jakarta-sans-latin-ext-500-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;
}

/* plus-jakarta-sans-latin-500-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/plus-jakarta-sans-latin-500-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;
}

/* plus-jakarta-sans-latin-ext-600-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/plus-jakarta-sans-latin-ext-600-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;
}

/* plus-jakarta-sans-latin-600-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/plus-jakarta-sans-latin-600-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;
}

/* plus-jakarta-sans-latin-ext-700-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/plus-jakarta-sans-latin-ext-700-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;
}

/* plus-jakarta-sans-latin-700-normal */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/plus-jakarta-sans-latin-700-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 {
  /* surfaces */
  --surface: #ffffff;
  --surface-dim: #f8fafc;
  --surface-container: #f8fafc;
  --surface-container-high: #eef2f6;
  --surface-container-highest: #e1e7ef;
  --surface-translucent: rgba(255, 255, 255, 0.8);
  --on-surface: #0f1729;
  --on-surface-variant: #65758b;
  --on-surface-muted: #90a1b9;
  --inverse-surface: #0f1729;
  --inverse-on-surface: #ffffff;
  /* Body copy on the inverted panel. DESIGN.md pairs on-surface-variant with
     on-surface on light ground but names no inverse equivalent; the white-alpha
     borders it does record (0.2/0.4) are far too dim to read as text. */
  --on-inverse-variant: rgba(255, 255, 255, 0.72);
  --outline: #e1e7ef;
  /* Decorative separator, one step lighter than --outline (Material's
     outline/outline-variant relationship). DESIGN.md records #0f1729 but
     flags it low-confidence: it was captured from a border on a *dark*
     element, and these five uses are all hairlines inside light chat and
     form panels, where near-black would read as a mistake. */
  --outline-variant: #eef2f6;

  /* Hairlines on dark grounds (room chrome), where --outline is invisible. */
  --outline-on-inverse: rgba(255, 255, 255, 0.2);
  --outline-on-inverse-subtle: rgba(255, 255, 255, 0.1);
  --outline-on-inverse-faint: rgba(255, 255, 255, 0.05);

  /* secondary (DESIGN.md — the slate family) */
  --secondary: #65758b;
  --on-secondary: #ffffff;
  --secondary-container: rgba(101, 117, 139, 0.1);
  --on-secondary-container: #65758b;

  /* primary */
  --primary: #2463eb;
  --on-primary: #ffffff;
  --primary-container: rgba(36, 99, 235, 0.1);
  --primary-container-subtle: rgba(36, 99, 235, 0.05);
  --on-primary-container: #2463eb;
  --primary-glow: rgba(43, 127, 255, 0.2);
  --inverse-primary: #51a2ff;

  /* semantic */
  --error: #ff6467;
  --on-error: #ffffff;
  --error-container: rgba(255, 100, 103, 0.1);
  /* F-35: "one minute left" must not be said in the colour that already means
     on air, recording and live. Legible on the room's dark chrome, which is
     the only place it is used. */
  --warning: #f0a90c;
  --on-warning: #0f1729;
  /* Pass 19: a warning ON a light surface (V-15's "tiles will be cleared"),
     the warning family at the same 10% the other *-container tokens use. */
  --warning-container: rgba(240, 169, 12, 0.12);

  /* live/status (venue-specific, derived from primary family) */
  --live: var(--error); /* LIVE badge red */
  --error-on-inverse: #ffb4ab; /* error text legible on room chrome */
  --primary-container-on-inverse: rgba(36, 99, 235, 0.28); /* selected row on room chrome */

  /* Room chrome. Video rooms are the one place the app goes dark, and every
     one of these was a raw hex scattered across stage/expo/meeting CSS. */
  --room-canvas: #08090b;
  --room-surface: rgba(24, 25, 28, 0.9);
  --room-surface-strong: rgba(8, 9, 11, 0.96);
  --room-scrim: rgba(0, 0, 0, 0.72);
  --room-scrim-soft: rgba(0, 0, 0, 0.55);
  --scrim: rgb(15 23 41 / 55%); /* modal backdrop over app surfaces */
  --outline-on-inverse-strong: rgba(255, 255, 255, 0.4);
  --error-container-on-inverse: rgba(255, 100, 103, 0.18);

  /* The only two gradients DESIGN.md sanctions. No radials, no imagery. */
  --gradient-brand-right: linear-gradient(to right top, rgba(36, 99, 235, 0.2), transparent);
  --gradient-brand-left: linear-gradient(to left, rgba(36, 99, 235, 0.2), transparent);

  /* typography */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Pass 19: the smallest label — a pill inside a list row's sub-line. */
  --text-label-xs: 10px;
  --line-label-xs: 14px;
  --text-label-sm: 12px;
  --line-label-sm: 16px;
  --text-label-md: 14px;
  --line-label-md: 20px;
  --text-body-sm: 14px;
  --line-body-sm: 20px;
  --text-body-md: 16px;
  --line-body-md: 24px;
  --text-body-lg: 18px;
  --line-body-lg: 28px;
  --text-title-md: 18px;
  --line-title-md: 26px;
  --text-title-lg: 20px;
  --line-title-lg: 26px;
  --text-headline-sm: 24px;
  --line-headline-sm: 32px;
  --text-headline-md: 30px;
  --line-headline-md: 40px;
  --text-headline-lg: 36px;
  --line-headline-lg: 40px;
  --text-display-md: 48px;
  --line-display-md: 56px;
  --text-display-lg: 72px;
  --line-display-lg: 80px;
  /* Negative tracking grows with size — DESIGN.md's optical correction. */
  --tracking-title: -0.4px;
  --tracking-headline: -0.6px;
  --tracking-headline-lg: -1.2px;
  --tracking-display: -1.2px;
  --tracking-display-lg: -1.8px;
  --tracking-eyebrow: 1.2px;
  --opacity-muted: 0.7;

  /* radii */
  --r-sm: 10px;
  --r: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 48px;
  --r-full: 9999px;

  /* spacing (4px unit) */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 24px;
  --gap-2xl: 32px;
  --pad-container: 24px;
  --pad-card: 24px;
  --section: 48px;

  /* motion */
  --t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* elevation — resting is --elev-1; the blue-tinted 2/3 are DESIGN.md's
     actionability signal, so they mean "you can act on this", not "this is big" */
  --elev-0: none;
  --elev-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --elev-2: 0 10px 15px -3px rgba(36, 99, 235, 0.2), 0 4px 6px -4px rgba(36, 99, 235, 0.2);
  --elev-3: 0 20px 25px -5px rgba(36, 99, 235, 0.2), 0 8px 10px -6px rgba(36, 99, 235, 0.2);
  --elev-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --blur-sm: blur(8px);
  --blur-md: blur(12px);
  --blur-nav: var(--blur-md); /* deprecated alias — remove once callers move */

  /*
    One stacking scale. Rooms previously used 2,3,5,6,7,8,9,20,25,40,45,50,100
    with no ordering rule, so "is this above the control bar?" was unanswerable.
    Shell-level overlay/toast deliberately outrank every in-room layer: an
    incoming 1:1 invite has to be able to interrupt whatever you are doing.
  */
  --z-base: 1;      /* in-flow decoration (a stepper dot over its rail) */
  --z-tile-chrome: 2;  /* controls that sit on a participant tile */
  --z-nav: 10;      /* app chrome: shell nav, admin topbar, popover menus */
  /* Panel-local, and deliberately below every --z-room-* value: these order
     things INSIDE one panel against its own siblings (a pinned row over the
     list it pins, a menu over the row it belongs to) and never against the
     room. Named rather than written as 1 and 2 so a reader can tell the two
     scales apart. */
  --z-panel-sticky: 1;
  --z-panel-menu: 2;
  --z-room-overlay: 15;
  --z-room-panel: 20;
  --z-room-controls: 30;
  --z-room-toast: 40;
  --z-sheet: 50;
  --z-modal: 60;
  --z-app-overlay: 70;
  --z-app-toast: 80;

  /*
    Safe areas via a token, not env() inline. env() cannot be overridden by a
    test harness, so a layout that reads it directly is unverifiable; a token
    can be restyled to a fake inset and the shift asserted.
  */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* app shell metrics */
  --shell-bottomnav-h: 56px;
  --sidebar-w: 220px;
  /* NFR-1's thumb target at 390px. Written as 44px inline in three room
     stylesheets before this existed, each with its own comment explaining the
     same number. */
  --touch-target: 44px;
  /* T-113 utility triggers. Icon-only on the tab bar, so the width is a touch
     target rather than a label budget — the five area tabs keep flex:1 and
     divide whatever is left. */
  /* T-163: the mobile top bar's height. A FACT, not a floor — anything
     deriving an offset from it must get the real number (the pass-4 rule in
     ARCHITECTURE §13). The three utility triggers it replaces took
     --shell-utility-w, which left with them. */
  --shell-topbar-h: var(--touch-target);
  --shell-panel-max-h: 60dvh;
  --shell-panel-w: 340px;
  --directory-search-w: 420px; /* T-114 */
  --announcement-w: 520px; /* T-116 */
  --auth-card-width: 440px;
  /* Dialogs get their own widths. They used to borrow --auth-card-width, which
     is the AUTH CARD's 440px — a number chosen for one centred sign-in form,
     not for a two-column date range or a three-card type picker. */
  --modal-width: 560px;
  --modal-width-wide: 760px;
  --control-height: 40px;
  --input-height: 44px;
  --skeleton-short-width: 60%;
  --border-width: 1px;
  --disabled-opacity: 0.6;
  --focus-ring: 0 0 0 4px var(--primary-container);
  /* Two different widths, deliberately. --admin-content-width is a READING
     width and lobby.css + prejoin.css borrow it, so raising it would widen the
     venue too. The admin console is a working surface with a sidebar and
     eight-column tables; it gets its own, wider budget. */
  --admin-content-width: 1120px;
  --admin-shell-width: 1600px;
  --admin-card-min: 280px;
  --room-rail-w: 24rem; /* every right-docked room panel: host/studio/slides rail, Q&A, polls */
  --studio-w: clamp(26rem, 32vw, 34rem); /* the Studio as a column beside the picture, ≥1024px (T-242) */
  --studio-list-w: 18rem; /* the scene list column of the expanded Studio (T-242) */
  /* Pass 19 (V-15): the production studio editor's three panels, and a scene
     row's still thumbnail. Below 900px the panels stack and the list becomes a
     strip of --editor-strip-item-w cards. */
  --editor-list-w: 17rem;
  --editor-settings-w: 25rem;
  --scene-thumb-w: 7.5rem;
  --editor-strip-item-w: 8.5rem;
  --admin-card-height: 180px;
  --admin-panel-height: 320px;
  --admin-topbar-height: 64px;
  --admin-sidebar-width: 232px;
  --admin-menu-width: 240px;
  --toast-width: 420px;
  --dt-select-width: 44px;
  --dt-col-max: 8.5rem;
  --dt-col-max-tight: 7rem;
  --dt-select-max: 7.5rem;
  --dt-col-identity: 9rem;
  --admin-stat-min: 160px;
  --impersonation-banner-h: 44px;
  /* Where a sticky table header comes to rest. Raised by the admin page when
     the impersonation banner is mounted — a flat 64px put the header row's top
     44px underneath it. */
  --dt-sticky-top: var(--admin-topbar-height);
  --session-panel-width: 320px;
  --admin-empty-icon: 48px;
  --admin-step-dot: 28px;
  /* F-20's logo dialog (T-182): the preview's ceiling, the checkerboard cell
     that makes transparency visible, and the crop handle — sized for a finger
     at 390px, which is the baseline (NFR-1). */
  --logo-preview-max: 20rem;
  --logo-checker: 0.75rem;
  --logo-handle: 1rem;
  --landing-content-width: 640px;
  --landing-hero-width: 640px;
  --landing-form-width: 440px;
  --landing-heading-width: 600px;
  --landing-copy-width: 560px;
  /* Type aliases kept so callers keep working; they are the scale above. */
  --landing-title-size: var(--text-display-md);
  --landing-title-line: var(--line-display-md);
  --landing-title-tracking: var(--tracking-display);
  --product-width: 1120px;
  --product-nav-h: 64px;
  --product-icon-size: 44px;
  --text-display-sm: var(--text-headline-md);
}