/* GENERATED from tasteray/tasteray-mvp@ddd3cde73a4f00f705606c92bb03afe719b0c0cd by npm run ds:sync — do not edit */

:root {
	--background: #0a0a0b; /* page ground: html, body, app shell, the punched-out control (was #000000) */
	--foreground: #fafaf9; /* primary ink: headings, body copy, icons on the ground (was #ffffff) */
	--card: #121214; /* raised surface: cards, tiles, list rows, nested panels (was #111111) */
	--card-foreground: var(--foreground); /* text on a card */
	--popover: #16161b; /* overlay surface: menus, dialogs, sheets, toasts, popovers */
	--popover-foreground: var(--foreground); /* text on a popover */
	--primary: #3970ff; /* Ray's ink as an edge or a mark: field border, send, marker, text-primary, ring-primary */
	--primary-foreground: var(--foreground); /* text on --primary-strong fills (5.41:1) */
	--primary-strong: #2c5ce0; /* fill under text: primary button, primary badge, send disc */
	--secondary: #1b1c20; /* solid control fill: the /home pill, secondary button, segment track */
	--secondary-foreground: var(--foreground); /* text on a secondary fill */
	--muted: #222227; /* muted fill, one step above secondary: skeletons, tracks, quiet chips */
	--muted-foreground: #a8a8a8; /* tertiary text and icons: descriptions, placeholders (7.58:1 on a popover) */
	--accent: #37373d; /* focused or hovered row in menus, selects and the command palette */
	--accent-foreground: var(--foreground); /* text on an accent row */
	--destructive: #e35a5a; /* destructive text, icon and edge: delete items, error text and borders (never a fill under text) */
	--destructive-strong: #c03a3a; /* destructive fill under text: the destructive button (confirm-delete) */
	--destructive-foreground: var(--foreground); /* label on --destructive-strong (5.15:1) */
	--border: rgba(255, 255, 255, 0.08); /* default divider and control border, on any surface (a white wash, so it scales with depth) */
	--input: #646464; /* input, textarea and select edges: the "type here" affordance (3:1 on every surface) */
	--ring: #6698ff; /* focus ring, on every interactive element (blue-light: 6.44:1 on a popover) */
	--inverse: #f6f6f6; /* the inverting surface: the one off-white card or action per screen */
	--inverse-foreground: #0a0a0b; /* text and icons on --inverse (18.31:1) */
	--chart-1: #3970ff; /* first series: the product's blue */
	--chart-2: var(--brand-ice); /* second series: the user's ice */
	--chart-3: #6698ff; /* third series: light blue */
	--chart-4: #c8c8cc; /* fourth series: light neutral */
	--chart-5: #82828a; /* fifth series: quiet neutral */
	--sidebar: var(--card); /* sidebar surface */
	--sidebar-foreground: var(--foreground); /* sidebar text */
	--sidebar-primary: var(--primary); /* sidebar primary mark */
	--sidebar-primary-foreground: var(--primary-foreground); /* text on the sidebar primary */
	--sidebar-accent: var(--muted); /* hovered sidebar item */
	--sidebar-accent-foreground: var(--foreground); /* text on a hovered sidebar item */
	--sidebar-border: var(--border); /* sidebar divider */
	--sidebar-ring: var(--ring); /* sidebar focus ring */
	--dimmed-foreground: var(--fg-secondary); /* dimmed text: secondary lines on a scrim or media (was #ccc) */
	--brand-blue: var(--primary); /* = --primary: blue marks and `text-brand-blue` (4.65:1 on the ground) */
	--brand-blue-light: var(--ink-product); /* = --ink-product: blue as text on dark surfaces */
	--brand-ice: #b8ddff; /* the user's colour: `--mark-user`'s value (13.97:1 on the ground, 13.21 on a card, 12.73 on a popover) */
	--font-sans: Epilogue, system-ui, sans-serif; /* Tailwind `font-sans`: the display face's stack */
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; /* Tailwind `font-serif`; no brand serif exists */
	--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; /* Tailwind `font-mono`: code and tabular debug text */
	--icon-size-xs: 0.75em; /* icon beside 10-12px text */
	--icon-size-sm: 0.875em; /* icon beside small text */
	--icon-size-md: 1em; /* icon beside body text */
	--icon-size-lg: 1.25em; /* icon beside a title */
	--icon-size-xl: 1.5em; /* icon beside a display line */
	--text-base: clamp(1rem, calc(1rem + (0.125 * ((100vw - 40rem) / 56))), 1.125rem); /* fluid base size of the legacy ramp: 16px at 640, 18px at 1136 */
	--text-xs: calc(var(--text-base) * 0.75); /* `text-xs`: fluid, 0.75x base */
	--text-sm: calc(var(--text-base) * 0.875); /* `text-sm`: fluid, 0.875x base */
	--text-md: calc(var(--text-base) * 1); /* `text-md`: fluid, 1x base */
	--text-lg: calc(var(--text-base) * 1.125); /* `text-lg`: fluid, 1.125x base */
	--text-xl: calc(var(--text-base) * 1.25); /* `text-xl` and `text-h4`: fluid, 1.25x base */
	--text-2xl: calc(var(--text-base) * 1.5); /* `text-2xl` and `text-h3`: fluid, 1.5x base */
	--text-3xl: calc(var(--text-base) * 1.875); /* `text-3xl` and `text-h2`: fluid, 1.875x base */
	--text-4xl: calc(var(--text-base) * 2.25); /* `text-4xl` and `text-h1`: fluid, 2.25x base */
	--text-5xl: calc(var(--text-base) * 3); /* `text-5xl`: fluid, 3x base */
	--text-6xl: calc(var(--text-base) * 3.75); /* `text-6xl`: fluid, 3.75x base */
	--type-family-display: Epilogue, system-ui, sans-serif; /* display face for titles, labels and buttons (the artefacts' literal stack; the app reads next/font's --font-display) */
	--type-family-body: "Hanken Grotesk", system-ui, sans-serif; /* reading face for body copy and captions (the artefacts' literal stack; the app reads next/font's --font-body) */
	--type-display-size: clamp(2rem, 1.6rem + 1.65vw, 2.75rem); /* text-display: page title, 32px at 390 wide rising to 44px at the 1116 shell */
	--type-display-line-height: 1.05; /* text-display line height, unitless */
	--type-display-weight: 500; /* text-display weight */
	--type-display-tracking: -0.03em; /* text-display tracking (= --tracking-display) */
	--type-title-lg-size: 1.5rem; /* text-title-lg: section and screen titles, 24px */
	--type-title-lg-line-height: 1.75rem; /* text-title-lg line height, 28px */
	--type-title-lg-weight: 500; /* text-title-lg weight */
	--type-title-lg-tracking: -0.02em; /* text-title-lg tracking (= --tracking-heading) */
	--type-title-size: 1.25rem; /* text-title: card and dialog titles, 20px */
	--type-title-line-height: 1.5rem; /* text-title line height, 24px */
	--type-title-weight: 500; /* text-title weight */
	--type-title-tracking: -0.02em; /* text-title tracking (= --tracking-heading) */
	--type-title-sm-size: 1.0625rem; /* text-title-sm: row titles and list headings, 17px */
	--type-title-sm-line-height: 1.375rem; /* text-title-sm line height, 22px */
	--type-title-sm-weight: 500; /* text-title-sm weight */
	--type-title-sm-tracking: -0.01em; /* text-title-sm tracking */
	--type-button-size: 0.9375rem; /* text-button: every button label, 15px */
	--type-button-line-height: 1.25rem; /* text-button line height, 20px */
	--type-button-weight: 600; /* text-button weight, the one 600 in the system */
	--type-button-tracking: -0.01em; /* text-button tracking */
	--type-label-size: 0.8125rem; /* text-label: field labels, chips, tabs, 13px */
	--type-label-line-height: 1rem; /* text-label line height, 16px */
	--type-label-weight: 500; /* text-label weight */
	--type-label-tracking: -0.01em; /* text-label tracking */
	--type-micro-size: 0.6875rem; /* text-micro: badges and counts, 11px (the floor for functional text); never for sentences */
	--type-micro-line-height: 0.8125rem; /* text-micro line height, 13px */
	--type-micro-weight: 500; /* text-micro weight */
	--type-micro-tracking: 0; /* text-micro tracking */
	--type-body-size: 0.9375rem; /* text-body: reading text and chat, 15px */
	--type-body-line-height: 1.375rem; /* text-body line height, 22px */
	--type-body-weight: 400; /* text-body weight: body is 400 everywhere (the dark-mode 300 is gone) */
	--type-body-tracking: 0; /* text-body tracking */
	--type-body-sm-size: 0.875rem; /* text-body-sm: secondary reading text and descriptions, 14px */
	--type-body-sm-line-height: 1.25rem; /* text-body-sm line height, 20px */
	--type-body-sm-weight: 400; /* text-body-sm weight */
	--type-body-sm-tracking: 0; /* text-body-sm tracking */
	--type-caption-size: 0.75rem; /* text-caption: captions, timestamps and metadata, 12px */
	--type-caption-line-height: 1rem; /* text-caption line height, 16px */
	--type-caption-weight: 400; /* text-caption weight */
	--type-caption-tracking: 0; /* text-caption tracking */
	--radius: 0.75rem; /* base unit: = --radius-md, the control and small-card radius */
	--radius-xs: 0.375rem; /* 6px: chips inside a row, close buttons, kbd, inline code */
	--radius-sm: calc(var(--radius) - 0.25rem); /* 8px: inputs inside a card, small buttons, thumbnails */
	--radius-md: var(--radius); /* 12px: buttons, inputs, menus, tiles */
	--radius-lg: calc(var(--radius) + 0.25rem); /* 16px: cards, dialogs, the contrast card */
	--radius-xl: calc(var(--radius) + 0.5rem); /* 20px: sheets and large containers */
	--radius-full: 9999px; /* pill and circle: chips, avatars, the send disc (not mapped into Tailwind: `rounded-full` already means this) */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); /* `shadow-xs`: a hairline lift on a control over content */
	--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45); /* `shadow-sm`: a floating chip or a raised control */
	--shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* `shadow`: the default floating step (= --shadow-md) */
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); /* `shadow-md`: popovers and the navbar pill */
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); /* `shadow-lg`: the anchored-layer step: menus, dialogs, sheets, popovers */
	--shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.6); /* `shadow-xl`: large floating panels */
	--shadow-2xl: 0 20px 56px rgba(0, 0, 0, 0.65); /* `shadow-2xl`: the highest layer: full-screen modals over content */
	--shadow-lift: 0 10px 26px -14px rgba(0, 0, 0, 0.8); /* `shadow-lift`: the inverting contrast card, one per screen */
	--ease-settle: cubic-bezier(0.16, 1, 0.3, 1); /* `ease-settle`: the one easing curve, for every transition and enter */
	--duration-fast: 160ms; /* `duration-fast`: a control answering a touch: hover, press, toggle */
	--duration-base: 240ms; /* `duration-base`: a surface appearing or changing: menu, panel, fade */
	--duration-slow: 320ms; /* `duration-slow`: layout moving: sheet, expand, reorder */
	--space-1: 0.25rem; /* 4px: icon to label, tight pairs */
	--space-2: 0.5rem; /* 8px: related items, chip gaps */
	--space-3: 0.75rem; /* 12px: control padding, small gaps */
	--space-4: 1rem; /* 16px: card padding, the mobile page gutter */
	--space-5: 1.25rem; /* 20px: comfortable card padding */
	--space-6: 1.5rem; /* 24px: between groups in a card */
	--space-8: 2rem; /* 32px: between sections of a screen */
	--space-10: 2.5rem; /* 40px: large section gaps */
	--space-12: 3rem; /* 48px: page-level breathing room */
	--space-16: 4rem; /* 64px: between major page sections */
	--spacing-header: 4rem; /* `h-header` / `pt-header`: height of the fixed app header */
	--spacing-tabs: 3rem; /* `h-tabs`: height of the tab strip under the header */
	--surface-header: rgba(10, 10, 11, 0.92); /* translucent app bar: literally the ground at .92, so it blurs over content */
	--surface-over-media: rgba(10, 10, 11, 0.55); /* controls floating on artwork: the hero's back, rating and share */
	--surface-over-media-hover: rgba(10, 10, 11, 0.8); /* the same controls, hovered or pressed */
	--surface-menu: var(--popover); /* anchored menus (= --popover) */
	--surface-control: rgba(255, 255, 255, 0.06); /* pills, segment tracks, ghost control fill */
	--surface-control-hover: rgba(255, 255, 255, 0.09); /* a --surface-control, hovered */
	--surface-control-active: var(--background); /* selected segment, punched-out style (= the ground) */
	--surface-control-selected: rgba(255, 255, 255, 0.12); /* selected segment, raised style */
	--border-hairline: rgba(255, 255, 255, 0.06); /* header divider and the faintest rule */
	--border-control: rgba(255, 255, 255, 0.08); /* outline on a pill, chip or segment (= --border) */
	--border-control-strong: rgba(255, 255, 255, 0.12); /* outline on a hovered or selected control; the decorative edge that replaces an accent hairline */
	--fg-warm: var(--foreground); /* the design system's foreground (= --foreground) */
	--fg-secondary: #c8c8cc; /* secondary text: subtitles, second lines, field labels */
	--fg-icon: var(--muted-foreground); /* icons beside text (= --muted-foreground) */
	--fg-inactive: var(--muted-foreground); /* unselected segment or tab, on a --surface-control track (= --muted-foreground, was #8b8b92) */
	--fg-dim: #82828a; /* quietest text: captions, timestamps, metadata on the ground, a card or a popover */
	--surface-raised: var(--card); /* cards standing off the page, list card (= --card) */
	--gradient-surface-panel: linear-gradient(180deg, var(--card), var(--background)); /* the season list panel: raised at the top, settling into the ground */
	--gradient-surface-tile: linear-gradient(180deg, var(--secondary), var(--background)); /* the /home stage tiles: lit from above, settling into the ground */
	--surface-sunken: rgba(0, 0, 0, 0.25); /* nested rows inside a panel: recessed one level */
	--border-poster: rgba(255, 255, 255, 0.1); /* poster edge in a stack */
	--track-progress: rgba(255, 255, 255, 0.06); /* unfilled part of a progress bar; the fill is a solid blue or ice */
	--shadow-poster: 0 6px 16px rgba(0, 0, 0, 0.45); /* stacked poster lift */
	--shadow-menu: 0 8px 30px rgba(0, 0, 0, 0.55); /* anchored menus */
	--shadow-fab: 0 6px 24px rgba(0, 0, 0, 0.55); /* floating action button */
	--tracking-display: -0.03em; /* H1 and `text-display` */
	--tracking-heading: -0.02em; /* H2-H4, `text-title-lg` and `text-title` */
	--tracking-eyebrow: 0.06em; /* the existing uppercase section eyebrows only */
	--ink-product: #6698ff; /* Ray's ink as TEXT: the because-line, product voice, links (6.68:1 on a card) */
	--mark-user: var(--brand-ice); /* the user's own: receipts, the knowledge bar, user-picked chips (13.21:1 on a card; a fill of it takes dark text) */
	--marker-ink: rgba(57, 112, 255, 0.75); /* the marker pen band under a title or a constraint word */
	--opinion-top: #eab308; /* personal top: rating step 1, 9.76:1 on a card */
	--opinion-loved: #ec4899; /* loved it: rating step 2, 5.30:1 */
	--opinion-liked: #22c55e; /* liked it: rating step 3, 8.21:1 */
	--opinion-mixed: #3b82f6; /* mixed feelings: rating step 4, 5.09:1 */
	--opinion-disliked: #f97316; /* did not like it: rating step 5, 6.68:1 */
	--opinion-hated: #ef4444; /* hated it: rating step 6, 4.97:1 */
	--availability-free: #34c759; /* free to watch — grass green, moved off a teal that read as the user's own (was #00c48c), 8.43:1 on a card */
	--availability-owned: #2a9d4a; /* already yours — darker grass green, moved off a teal that read as the user's own (was #36b37e), 5.36:1 on a card, 5.17 on a popover */
	--availability-quick: #00b8d9; /* quick pay and watch — 7.89:1 */
	--availability-purchase: #8d75ff; /* pay and watch — purple, allowed as this one ramp step only (never an accent), 5.45:1 */
	--availability-subscription: #ffab00; /* service jump — 9.87:1 */
	--availability-passport: #de6e00; /* passport required — 5.65:1 */
	--availability-offline: #ff5630; /* offline hunt — 5.90:1 */
	--success: #22c55e; /* success text, icon and border: saved, done, 8.21:1 on a card */
	--warning: #f59e0b; /* warning text, icon and border: 8.71:1 on a card */
	--info: #6698ff; /* info text, icon and border (= --ink-product, 6.68:1 on a card) */
}

.text-display {
	font-family: Epilogue, system-ui, sans-serif;
	font-size: clamp(2rem, 1.6rem + 1.65vw, 2.75rem);
	line-height: 1.05;
	font-weight: 500;
	letter-spacing: -0.03em;
}

.text-title-lg {
	font-family: Epilogue, system-ui, sans-serif;
	font-size: 1.5rem;
	line-height: 1.75rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.text-title {
	font-family: Epilogue, system-ui, sans-serif;
	font-size: 1.25rem;
	line-height: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.text-title-sm {
	font-family: Epilogue, system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.375rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.text-button {
	font-family: Epilogue, system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.text-label {
	font-family: Epilogue, system-ui, sans-serif;
	font-size: 0.8125rem;
	line-height: 1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.text-micro {
	font-family: Epilogue, system-ui, sans-serif;
	font-size: 0.6875rem;
	line-height: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0;
}

.text-body {
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.375rem;
	font-weight: 400;
	letter-spacing: 0;
}

.text-body-sm {
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 400;
	letter-spacing: 0;
}

.text-caption {
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 400;
	letter-spacing: 0;
}