/* SurveyStream — Tailwind CSS v4 * Generated from tokens/design-tokens.json. Do not hand-edit. * * @import "tailwindcss"; * @import "./tokens/theme.css"; <- must come first; defines the vars * @import "./tokens/tailwind-v4.css"; * * @theme maps the custom properties onto Tailwind's namespaces. Because the * semantic vars are re-declared per theme in theme.css, utilities such as * `bg-canvas` and `text-primary` follow the theme automatically — no `dark:` * variant required. */ @theme inline { /* ---------- semantic colour (theme-aware) ---------- v4 has a single --color-* namespace, so the property prefix is dropped here: --color-canvas yields `bg-canvas`, --color-primary yields `text-primary`. Fills and feedback keep their prefix because `success` alone is ambiguous between the text colour and the solid fill. */ --color-canvas: var(--color-bg-canvas); --color-surface: var(--color-bg-surface); --color-elevated: var(--color-bg-elevated); --color-sunken: var(--color-bg-sunken); --color-primary: var(--color-text-primary); --color-secondary: var(--color-text-secondary); --color-muted: var(--color-text-muted); --color-disabled: var(--color-text-disabled); --color-link: var(--color-text-link); --color-on-brand: var(--color-text-on-brand); --color-on-accent: var(--color-text-on-accent); --color-on-interactive: var(--color-text-on-interactive); --color-subtle: var(--color-border-subtle); --color-strong: var(--color-border-default); --color-interactive: var(--color-interactive); --color-interactive-hover: var(--color-interactive-hover); --color-interactive-active: var(--color-interactive-active); --color-interactive-disabled: var(--color-interactive-disabled); --color-focus-ring: var(--color-focus-ring); --color-feedback-success: var(--color-feedback-success); --color-feedback-payout: var(--color-feedback-payout); --color-feedback-warning: var(--color-feedback-warning); --color-feedback-error: var(--color-feedback-error); --color-fill-success: var(--color-fill-success); --color-fill-payout: var(--color-fill-payout); --color-fill-payout-edge: var(--color-fill-payout-edge); --color-fill-error: var(--color-fill-error); /* ---------- primitive colour (pinned) ---------- */ --color-deepwater-500: var(--color-deepwater-500); --color-deepwater-600: var(--color-deepwater-600); --color-deepwater-700: var(--color-deepwater-700); --color-deepwater-800: var(--color-deepwater-800); --color-deepwater-900: var(--color-deepwater-900); --color-deepwater-950: var(--color-deepwater-950); --color-stream-300: var(--color-stream-300); --color-stream-400: var(--color-stream-400); --color-stream-500: var(--color-stream-500); --color-stream-600: var(--color-stream-600); --color-pulse-400: var(--color-pulse-400); --color-pulse-500: var(--color-pulse-500); --color-pulse-600: var(--color-pulse-600); --color-pulse-700: var(--color-pulse-700); --color-payout-400: var(--color-payout-400); --color-payout-500: var(--color-payout-500); --color-payout-600: var(--color-payout-600); --color-payout-700: var(--color-payout-700); --color-neutral-50: var(--color-neutral-50); --color-neutral-200: var(--color-neutral-200); --color-neutral-400: var(--color-neutral-400); --color-neutral-500: var(--color-neutral-500); --color-neutral-600: var(--color-neutral-600); --color-neutral-800: var(--color-neutral-800); --color-neutral-950: var(--color-neutral-950); --color-success-400: var(--color-success-400); --color-success-500: var(--color-success-500); --color-success-600: var(--color-success-600); --color-success-700: var(--color-success-700); --color-warn-400: var(--color-warn-400); --color-warn-500: var(--color-warn-500); --color-warn-600: var(--color-warn-600); --color-warn-700: var(--color-warn-700); --color-error-400: var(--color-error-400); --color-error-500: var(--color-error-500); --color-error-600: var(--color-error-600); --color-error-700: var(--color-error-700); --color-slate-100: var(--color-slate-100); --color-slate-300: var(--color-slate-300); --color-slate-400: var(--color-slate-400); --color-slate-500: var(--color-slate-500); --color-slate-600: var(--color-slate-600); --color-slate-800: var(--color-slate-800); --color-slate-900: var(--color-slate-900); --color-base-white: var(--color-base-white); --color-base-black: var(--color-base-black); /* ---------- type ---------- */ --font-display: var(--font-display); --font-sans: var(--font-sans); --font-mono: var(--font-mono); --text-caption: var(--text-caption); --text-caption--line-height: var(--leading-caption); --text-caption--letter-spacing: var(--tracking-caption); --text-body: var(--text-body); --text-body--line-height: var(--leading-body); --text-body--letter-spacing: var(--tracking-body); --text-body-lg: var(--text-body-lg); --text-body-lg--line-height: var(--leading-body-lg); --text-body-lg--letter-spacing: var(--tracking-body-lg); --text-title: var(--text-title); --text-title--line-height: var(--leading-title); --text-title--letter-spacing: var(--tracking-title); --text-h3: var(--text-h3); --text-h3--line-height: var(--leading-h3); --text-h3--letter-spacing: var(--tracking-h3); --text-h2: var(--text-h2); --text-h2--line-height: var(--leading-h2); --text-h2--letter-spacing: var(--tracking-h2); --text-h1: var(--text-h1); --text-h1--line-height: var(--leading-h1); --text-h1--letter-spacing: var(--tracking-h1); --text-display: var(--text-display); --text-display--line-height: var(--leading-display); --text-display--letter-spacing: var(--tracking-display); --text-body-dense: var(--text-body-dense); --text-body-dense--line-height: var(--leading-body-dense); --text-body-dense--letter-spacing: var(--tracking-body-dense); --text-display-xl: var(--text-display-xl); --text-display-xl--line-height: var(--leading-display-xl); --text-display-xl--letter-spacing: var(--tracking-display-xl); /* ---------- spacing ---------- */ --spacing-0: var(--space-0); --spacing-1: var(--space-1); --spacing-2: var(--space-2); --spacing-3: var(--space-3); --spacing-4: var(--space-4); --spacing-5: var(--space-5); --spacing-6: var(--space-6); --spacing-8: var(--space-8); --spacing-10: var(--space-10); --spacing-12: var(--space-12); --spacing-16: var(--space-16); --spacing-20: var(--space-20); --spacing-24: var(--space-24); --spacing-px: var(--space-px); --spacing-0_5: var(--space-0_5); --spacing-1_5: var(--space-1_5); /* ---------- radii ---------- */ --radius-none: var(--radius-none); --radius-xs: var(--radius-xs); --radius-sm: var(--radius-sm); --radius-md: var(--radius-md); --radius-lg: var(--radius-lg); --radius-xl: var(--radius-xl); --radius-2xl: var(--radius-2xl); --radius-3xl: var(--radius-3xl); --radius-full: var(--radius-full); /* ---------- elevation ---------- */ --shadow-xs: var(--shadow-xs); --shadow-sm: var(--shadow-sm); --shadow-md: var(--shadow-md); --shadow-lg: var(--shadow-lg); --shadow-xl: var(--shadow-xl); /* ---------- motion ---------- */ --ease-standard: var(--ease-standard); --ease-entrance: var(--ease-entrance); --ease-exit: var(--ease-exit); --ease-emphasised: var(--ease-emphasised); --ease-linear: var(--ease-linear); } /* Tailwind v4 reads the `dark:` variant from a media query by default. Register the explicit stamps so `dark:` also honours the in-product choice. */ @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));