/* Toniq design tokens. Generated from toniq.tokens.json (Figma file 0Ajc3xCy1fKDzOPg3wFzdD, exported 2026-09-21T05:27:29Z). Do not edit by hand; run node tokens/build.mjs. */
:root {
  /* Primitives */
  --colour-midnight: #030C36;
  --colour-ink: #0B0B0F;
  --colour-carolina: #2FABF8;
  --colour-sea-blue: #4251F5;
  --colour-cream: #FFEDDF;
  --colour-white: #FFFFFF;
  --grey-50: #F9FAFB;
  --grey-100: #F4F5F7;
  --grey-150: #EBECEE;
  --grey-200: #E8E8E8;
  --grey-300: #E5E7EB;
  --grey-400: #D1D5DB;
  --grey-500: #9CA3AF;
  --grey-600: #6B7280;
  --grey-700: #4B5563;
  --grey-800: #374151;
  --green-100: #DFF5E6;
  --green-300: #A8EEBE;
  --green-500: #60D487;
  --green-600: #2DB76A;
  --green-700: #15803D;
  --gold-100: #FFF3D1;
  --gold-300: #F4D27A;
  --gold-500: #F5B731;
  --gold-600: #E8B73B;
  --red-100: #F8D6D6;
  --red-400: #FF4D6D;
  --red-500: #E05B5B;
  --red-600: #C94545;
  --violet-300: #D8C6E8;
  --violet-400: #A78BFA;
  --violet-500: #B07FE0;
  --blue-100: #ECF7FF;
  --blue-200: #B8D4F0;
  --blue-600: #3DA0E5;
  --space-50: 2px;
  --space-100: 4px;
  --space-150: 6px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-500: 20px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1000: 40px;
  --space-1200: 48px;
  --space-1600: 64px;
  --space-2400: 96px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-pill: 10000px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-22: 22px;
  --font-size-32: 32px;
  --font-size-64: 64px;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-family-product: 'SF Pro', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
  --font-leading-tight: 1;
  --font-leading-snug: 1.25;
  --font-leading-normal: 1.5;
  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 320ms;
  --duration-enter: 500ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --zinc-obsidian: #09090B;
  --zinc-graphite: #18181B;
  --zinc-slate: #27272A;
  --zinc-iron: #3F3F46;
  --zinc-steel: #52525B;
  --zinc-fog: #6E6E77;
  --zinc-ash: #A1A1AA;
  --zinc-mist: #D4D4D8;
  --zinc-cloud: #ECECEE;
  --zinc-paper: #F4F4F5;
  --zinc-subtle: #FAFAFA;
  --zinc-snow: #FFFFFF;
  --accent-ember: #FF5A00;
  --accent-magenta: #FE45E2;
  --space-700: 28px;
  --space-900: 36px;
  --space-1700: 68px;
  --space-2000: 80px;
  --space-3000: 120px;
  --radius-6: 6px;
  --radius-14: 14px;
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-36: 36px;
  --radius-40: 40px;
  --radius-48: 48px;
  --radius-56: 56px;
  --radius-64: 64px;
  --radius-80: 80px;
  --font-size-10: 10px;
  --font-size-15: 15px;
  --font-size-20: 20px;
  --font-size-40: 40px;
  --font-size-56: 56px;
  --font-leading-112: 1.12;
  --font-leading-128: 1.28;
  --font-leading-145: 1.45;
  --font-leading-164: 1.64;
  --persona-glass-1: #FFFFFF;
  --persona-glass-2: #999999;
  --persona-cursor: #7F95FD;
  --persona-ring-blue: #75CDFF;
  --persona-ring-violet: #C77EFF;
  --persona-ring-indigo: #619FFD;
  --green-50: #E8F8EE;
  --green-800: #166534;
  --red-700: #A83232;
  --blue-700: #1E7FC4;
  --green-900: #0F3D24;
  --gold-900: #4A3308;
  --red-900: #4A1616;
  --violet-900: #2E1F4A;
  --blue-900: #0F2A44;
  --red-300: #F5A3A3;
  --duration-page: 400ms;
  --duration-blur: 240ms;
  --easing-page: cubic-bezier(0.32, 0.72, 0, 1);
  --blur-transition: 8px;
  --wheel-01: #FF4D6D;
  --wheel-02: #FF8A48;
  --wheel-03: #FFC24A;
  --wheel-04: #F0D752;
  --wheel-05: #B9D850;
  --wheel-06: #6DCF6E;
  --wheel-07: #4EC79E;
  --wheel-08: #36B9D6;
  --wheel-09: #4A8CE6;
  --wheel-10: #6A6CDC;
  --wheel-11: #8E5ED1;
  --wheel-12: #B855C4;
  --banner-mid: #C4D8EC;
  --banner-end: #D2E0EE;

  /* Component */
  --button-height-md: 40px;
  --button-height-lg: 48px;
  --button-radius: var(--radius-14);
  --button-radius-square: var(--radius-14);
  --button-padding-x: var(--space-400);
  --button-gap: var(--space-200);
  --card-radius: var(--radius-36);
  --card-padding: var(--space-700);
  --card-gap: var(--space-300);
  --card-width: 292px;
  --card-cover-height: 143px;
  --avatar-size-xs: 24px;
  --avatar-size-sm: 28px;
  --avatar-size-md: 32px;
  --avatar-size-lg: 36px;
  --avatar-size-xl: 44px;
  --avatar-size-2xl: 56px;
  --avatar-size-3xl: 64px;
  --avatar-ring-width: 3px;
  --input-height: 40px;
  --input-radius: var(--radius-14);
  --input-padding-x: var(--space-300);
  --chip-height: 28px;
  --chip-radius: var(--radius-12);
  --chip-padding-x: var(--space-300);
  --chip-gap: var(--space-150);
  --badge-height: 20px;
  --badge-radius: var(--radius-12);
  --badge-padding-x: var(--space-200);
  --coachmark-width: 540px;
  --coachmark-radius: var(--radius-24);
  --coachmark-padding: var(--space-400);
  --modal-radius: var(--radius-36);
  --modal-padding: var(--space-600);
  --modal-width: 760px;
  --sidebar-width: 253px;
  --sidebar-item-height: 40px;
  --sidebar-item-radius: var(--radius-14);
  --toolbar-height: 56px;
  --toolbar-radius: var(--radius-24);
  --toolbar-icon-size: 20px;
  --message-radius: var(--radius-20);
  --message-padding: var(--space-300);
  --message-max-width: 320px;
  --icon-size-sm: 14px;
  --icon-size-md: 18px;
  --icon-size-lg: 24px;
  --icon-stroke: 1px;
  --button-radius-pill: var(--radius-pill);
  --icon-radius: var(--radius-40);
  --image-radius-top: var(--radius-48);
  --message-gap: var(--space-300);

  /* Semantic, Light */
  color-scheme: light;
  --surface-app: var(--zinc-paper);
  --surface-card: var(--zinc-snow);
  --surface-raised: var(--zinc-snow);
  --surface-sunken: var(--zinc-subtle);
  --surface-floor: var(--zinc-paper);
  --surface-floor-dot: var(--zinc-mist);
  --surface-nav-active: var(--zinc-paper);
  --surface-inverse: var(--zinc-graphite);
  --surface-input: var(--zinc-snow);
  --text-primary: var(--zinc-obsidian);
  --text-secondary: var(--zinc-iron);
  --text-tertiary: var(--zinc-steel);
  --text-muted: var(--zinc-fog);
  --text-inverse: var(--zinc-snow);
  --text-brand: var(--zinc-obsidian);
  --text-link: var(--zinc-graphite);
  --text-ai: var(--violet-400);
  --icon-default: var(--zinc-steel);
  --icon-muted: var(--zinc-fog);
  --icon-inverse: var(--zinc-snow);
  --border-subtle: var(--zinc-cloud);
  --border-default: var(--zinc-mist);
  --border-strong: var(--zinc-iron);
  --border-focus: var(--zinc-obsidian);
  --border-inverse: var(--zinc-iron);
  --brand-primary: var(--zinc-obsidian);
  --brand-accent: var(--accent-ember);
  --brand-accent-hover: var(--accent-ember);
  --brand-secondary: var(--zinc-iron);
  --brand-cream: var(--colour-cream);
  --status-success: var(--green-600);
  --status-success-soft: var(--green-50);
  --status-success-text: var(--green-800);
  --status-ongoing: var(--green-500);
  --status-warning: var(--gold-500);
  --status-warning-soft: var(--gold-100);
  --status-danger: var(--red-500);
  --status-danger-soft: var(--red-100);
  --status-danger-text: var(--red-700);
  --status-ai: var(--violet-400);
  --status-ai-soft: var(--violet-300);
  --status-starred: var(--gold-500);
  --status-liked: var(--red-400);
  --status-new: var(--zinc-graphite);
  --zone-blue: var(--blue-200);
  --zone-blue-tint: var(--blue-100);
  --zone-blue-text: var(--blue-700);
  --zone-green: var(--green-300);
  --zone-green-tint: var(--green-100);
  --zone-green-text: var(--green-700);
  --scrim-modal: #030C364D;
  --scrim-tour: #080A126B;
  --scrim-dim: #00000047;
  --shadow-tint: #030C36;
  --layer-base: 0;
  --layer-raised: 10;
  --layer-sticky: 100;
  --layer-overlay: 200;
  --layer-popover: 300;
  --layer-modal: 400;
  --layer-tour: 500;
  --layer-top: 600;
  --brand-primary-hover: var(--zinc-graphite);
  --surface-hover: var(--zinc-subtle);
  --state-disabled-bg: var(--zinc-cloud);
  --state-disabled-text: var(--zinc-ash);
  --surface-dark: var(--zinc-graphite);
  --text-placeholder: var(--zinc-fog);
  --accent-badge: var(--accent-ember);
  --accent-decorative: var(--accent-magenta);
  --border-cta: var(--zinc-slate);
  --layout-max-width: 1200px;
  --layout-section-gap: var(--space-2000);
  --layout-card-padding: var(--space-700);
  --layout-element-gap: var(--space-200);
  --accent-cursor: var(--persona-cursor);
  --logo-ink: var(--zinc-obsidian);
  --logo-knockout: var(--zinc-snow);
  --surface-pressed: var(--zinc-cloud);
  --brand-primary-pressed: var(--zinc-slate);
  --accent-badge-text: var(--zinc-obsidian);
  --surface-neutral-pressed: var(--zinc-mist);
}

/* Semantic, Dark */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-app: var(--zinc-obsidian);
  --surface-card: var(--zinc-graphite);
  --surface-raised: var(--zinc-slate);
  --surface-sunken: var(--zinc-slate);
  --surface-floor: var(--zinc-graphite);
  --surface-floor-dot: var(--zinc-iron);
  --surface-nav-active: var(--zinc-slate);
  --surface-inverse: var(--zinc-snow);
  --surface-input: var(--zinc-graphite);
  --text-primary: var(--zinc-snow);
  --text-secondary: var(--zinc-cloud);
  --text-tertiary: var(--zinc-mist);
  --text-muted: var(--zinc-ash);
  --text-inverse: var(--zinc-obsidian);
  --text-brand: var(--zinc-snow);
  --text-link: var(--zinc-cloud);
  --text-ai: var(--violet-300);
  --icon-default: var(--zinc-mist);
  --icon-muted: var(--zinc-ash);
  --icon-inverse: var(--zinc-obsidian);
  --border-subtle: var(--zinc-slate);
  --border-default: var(--zinc-iron);
  --border-strong: var(--zinc-steel);
  --border-focus: var(--zinc-snow);
  --border-inverse: var(--zinc-mist);
  --brand-primary: var(--zinc-snow);
  --brand-secondary: var(--zinc-mist);
  --brand-cream: var(--zinc-slate);
  --status-success: var(--green-500);
  --status-success-soft: var(--green-900);
  --status-success-text: var(--green-300);
  --status-warning-soft: var(--gold-900);
  --status-danger-soft: var(--red-900);
  --status-danger-text: var(--red-300);
  --status-ai-soft: var(--violet-900);
  --status-new: var(--zinc-snow);
  --zone-blue: var(--blue-600);
  --zone-blue-tint: var(--blue-900);
  --zone-blue-text: var(--blue-200);
  --zone-green: var(--green-600);
  --zone-green-tint: var(--green-900);
  --zone-green-text: var(--green-300);
  --brand-primary-hover: var(--zinc-cloud);
  --surface-hover: var(--zinc-slate);
  --state-disabled-bg: var(--zinc-slate);
  --state-disabled-text: var(--zinc-steel);
  --surface-dark: var(--zinc-slate);
  --text-placeholder: var(--zinc-ash);
  --border-cta: var(--zinc-mist);
  --logo-ink: var(--zinc-snow);
  --logo-knockout: var(--zinc-obsidian);
  --surface-pressed: var(--zinc-iron);
  --brand-primary-pressed: var(--zinc-mist);
  --surface-neutral-pressed: var(--zinc-steel);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-app: var(--zinc-obsidian);
    --surface-card: var(--zinc-graphite);
    --surface-raised: var(--zinc-slate);
    --surface-sunken: var(--zinc-slate);
    --surface-floor: var(--zinc-graphite);
    --surface-floor-dot: var(--zinc-iron);
    --surface-nav-active: var(--zinc-slate);
    --surface-inverse: var(--zinc-snow);
    --surface-input: var(--zinc-graphite);
    --text-primary: var(--zinc-snow);
    --text-secondary: var(--zinc-cloud);
    --text-tertiary: var(--zinc-mist);
    --text-muted: var(--zinc-ash);
    --text-inverse: var(--zinc-obsidian);
    --text-brand: var(--zinc-snow);
    --text-link: var(--zinc-cloud);
    --text-ai: var(--violet-300);
    --icon-default: var(--zinc-mist);
    --icon-muted: var(--zinc-ash);
    --icon-inverse: var(--zinc-obsidian);
    --border-subtle: var(--zinc-slate);
    --border-default: var(--zinc-iron);
    --border-strong: var(--zinc-steel);
    --border-focus: var(--zinc-snow);
    --border-inverse: var(--zinc-mist);
    --brand-primary: var(--zinc-snow);
    --brand-secondary: var(--zinc-mist);
    --brand-cream: var(--zinc-slate);
    --status-success: var(--green-500);
    --status-success-soft: var(--green-900);
    --status-success-text: var(--green-300);
    --status-warning-soft: var(--gold-900);
    --status-danger-soft: var(--red-900);
    --status-danger-text: var(--red-300);
    --status-ai-soft: var(--violet-900);
    --status-new: var(--zinc-snow);
    --zone-blue: var(--blue-600);
    --zone-blue-tint: var(--blue-900);
    --zone-blue-text: var(--blue-200);
    --zone-green: var(--green-600);
    --zone-green-tint: var(--green-900);
    --zone-green-text: var(--green-300);
    --brand-primary-hover: var(--zinc-cloud);
    --surface-hover: var(--zinc-slate);
    --state-disabled-bg: var(--zinc-slate);
    --state-disabled-text: var(--zinc-steel);
    --surface-dark: var(--zinc-slate);
    --text-placeholder: var(--zinc-ash);
    --border-cta: var(--zinc-mist);
    --logo-ink: var(--zinc-snow);
    --logo-knockout: var(--zinc-obsidian);
    --surface-pressed: var(--zinc-iron);
    --brand-primary-pressed: var(--zinc-mist);
    --surface-neutral-pressed: var(--zinc-steel);
  }
}

/* Text styles */
.t-display { font-family: var(--font-family-product); font-weight: 600; font-size: 64px; line-height: 1.12; letter-spacing: -1.5px; }
.t-heading { font-family: var(--font-family-product); font-weight: 600; font-size: 40px; line-height: 1.28; letter-spacing: -0.6px; }
.t-heading-sm { font-family: var(--font-family-product); font-weight: 600; font-size: 32px; line-height: 1.5; letter-spacing: -0.4px; }
.t-subheading { font-family: var(--font-family-product); font-weight: 600; font-size: 20px; line-height: 1.5; letter-spacing: 0px; }
.t-body-lg { font-family: var(--font-family-product); font-weight: 400; font-size: 18px; line-height: 1.45; letter-spacing: 0px; }
.t-body { font-family: var(--font-family-product); font-weight: 400; font-size: 15px; line-height: 1.45; letter-spacing: 0px; }
.t-body-sm { font-family: var(--font-family-product); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: 0px; }
.t-caption { font-family: var(--font-family-product); font-weight: 400; font-size: 12px; line-height: 1.64; letter-spacing: 0px; }
.t-micro { font-family: var(--font-family-product); font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: 0px; }
.t-heading-lg { font-family: var(--font-family-product); font-weight: 600; font-size: 56px; line-height: 1.28; letter-spacing: -1px; }
.t-label { font-family: var(--font-family-product); font-weight: 500; font-size: 14px; line-height: 1.5; letter-spacing: 0px; }
.t-label-sm { font-family: var(--font-family-product); font-weight: 500; font-size: 13px; line-height: 1.25; letter-spacing: 0px; }

/* Paint styles */
:root {
  --gradient-brand: linear-gradient(180deg, var(--colour-carolina) 0%, var(--colour-sea-blue) 100%);
  --gradient-ink: linear-gradient(180deg, var(--zinc-obsidian) 0%, var(--zinc-iron) 100%);
  --gradient-mist: linear-gradient(180deg, var(--zinc-mist) 0%, var(--zinc-paper) 100%);
}

/* Effect styles */
:root {
  --shadow-md: 0px 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-cta: inset 0px 0.5px 0px rgba(255, 255, 255, 0.5), inset 0px 9px 14px -5px rgba(117, 123, 133, 0.4), 0px 0px 0px 1.5px rgba(44, 46, 52, 1), 0px 4px 6px rgba(0, 0, 0, 0.14);
  --shadow-pill-inset: inset 0px 1px 0px rgba(228, 228, 231, 1);
  --shadow-floating: 0px 8px 24px rgba(9, 9, 11, 0.1), 0px 0px 0px 1px var(--border-subtle);
  --transition-blur: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-enter: 0ms; --duration-page: 160ms; --duration-blur: 0ms; --blur-transition: 0px; --easing-spring: var(--easing-standard); }
}