/*
 * Photoroom design tokens — colors
 *
 * @theme inline registers utility names without emitting :root declarations.
 * The actual CSS variable values are defined in ./colors.css (which owns
 * light + dark mode overrides via the .theme-dark selector).
 *
 * To add a new color token, define the value in ./colors.css then add the
 * utility name here.
 */

@import "./colors.css";

/*
 * Custom variants (replaces tailwind.config.js darkMode and src/plugins/variants.js)
 */
@custom-variant dark (&:where(.theme-dark, .theme-dark *));
@custom-variant tall (@media (min-height: 780px));
@custom-variant mobile (@media (max-width: 600px));

@theme inline {
  /* Base */
  --color-black: var(--color-black);
  --color-black-alpha-100: var(--color-black-alpha-100);
  --color-black-alpha-200: var(--color-black-alpha-200);
  --color-black-alpha-300: var(--color-black-alpha-300);
  --color-black-alpha-400: var(--color-black-alpha-400);
  --color-black-alpha-500: var(--color-black-alpha-500);
  --color-black-alpha-600: var(--color-black-alpha-600);
  --color-black-alpha-700: var(--color-black-alpha-700);
  --color-black-alpha-800: var(--color-black-alpha-800);
  --color-black-alpha-900: var(--color-black-alpha-900);
  --color-white: var(--color-white);
  --color-white-1: var(--color-white-1);
  --color-white-2: var(--color-white-2);
  --color-white-alpha-100: var(--color-white-alpha-100);
  --color-white-alpha-200: var(--color-white-alpha-200);
  --color-white-alpha-300: var(--color-white-alpha-300);
  --color-white-alpha-400: var(--color-white-alpha-400);
  --color-white-alpha-500: var(--color-white-alpha-500);
  --color-white-alpha-600: var(--color-white-alpha-600);
  --color-white-alpha-700: var(--color-white-alpha-700);
  --color-white-alpha-800: var(--color-white-alpha-800);
  --color-white-alpha-900: var(--color-white-alpha-900);

  /* Neutral */
  --color-neutral-0: var(--color-neutral-0);
  --color-neutral-50: var(--color-neutral-50);
  --color-neutral-100: var(--color-neutral-100);
  --color-neutral-200: var(--color-neutral-200);
  --color-neutral-300: var(--color-neutral-300);
  --color-neutral-400: var(--color-neutral-400);
  --color-neutral-500: var(--color-neutral-500);
  --color-neutral-600: var(--color-neutral-600);
  --color-neutral-700: var(--color-neutral-700);
  --color-neutral-800: var(--color-neutral-800);
  --color-neutral-900: var(--color-neutral-900);
  --color-neutral-alpha-100: var(--color-neutral-alpha-100);
  --color-neutral-alpha-200: var(--color-neutral-alpha-200);
  --color-neutral-alpha-300: var(--color-neutral-alpha-300);
  --color-neutral-alpha-400: var(--color-neutral-alpha-400);
  --color-neutral-alpha-500: var(--color-neutral-alpha-500);
  --color-neutral-alpha-600: var(--color-neutral-alpha-600);

  /* Sand */
  --color-sand-50: var(--color-sand-50);

  /* Accent */
  --color-accent-300: var(--color-accent-300);
  --color-accent-400: var(--color-accent-400);
  --color-accent-500: var(--color-accent-500);
  --color-accent-600: var(--color-accent-600);
  --color-accent-alpha-100: var(--color-accent-alpha-100);
  --color-accent-alpha-200: var(--color-accent-alpha-200);
  --color-accent-alpha-300: var(--color-accent-alpha-300);
  --color-accent-alpha-400: var(--color-accent-alpha-400);
  --color-accent-alpha-500: var(--color-accent-alpha-500);

  /* Positive */
  --color-positive-400: var(--color-positive-400);
  --color-positive-500: var(--color-positive-500);
  --color-positive-600: var(--color-positive-600);
  --color-positive-alpha-100: var(--color-positive-alpha-100);
  --color-positive-alpha-200: var(--color-positive-alpha-200);
  --color-positive-alpha-300: var(--color-positive-alpha-300);

  /* Negative */
  --color-negative-400: var(--color-negative-400);
  --color-negative-500: var(--color-negative-500);
  --color-negative-600: var(--color-negative-600);
  --color-negative-alpha-100: var(--color-negative-alpha-100);
  --color-negative-alpha-200: var(--color-negative-alpha-200);
  --color-negative-alpha-300: var(--color-negative-alpha-300);

  /* Magic accent */
  --color-magic-accent-400: var(--color-magic-accent-400);
  --color-magic-accent-500: var(--color-magic-accent-500);
  --color-magic-accent-600: var(--color-magic-accent-600);

  /* Animation accent */
  --color-animation-accent-500: var(--color-animation-accent-500);

  /* Camera accent */
  --color-camera-accent-500: var(--color-camera-accent-500);

  /* Yellow (wipes Tailwind's default yellow scale so only Prism steps exist) */
  --color-yellow-*: initial;
  --color-yellow-400: var(--color-yellow-400);
  --color-yellow-500: var(--color-yellow-500);
  --color-yellow-600: var(--color-yellow-600);

  /* Yellow light */
  --color-yellow-light-400: var(--color-yellow-light-400);
  --color-yellow-light-500: var(--color-yellow-light-500);
  --color-yellow-light-600: var(--color-yellow-light-600);

  /* Branding */
  --color-brand-blue: var(--color-brand-blue);
  --color-brand-purple: var(--color-brand-purple);
  --color-brand-yellow: var(--color-brand-yellow);
  --color-brand-white: var(--color-brand-white);
  --color-brand-sand: var(--color-brand-sand);
  --color-brand-neutral: var(--color-brand-neutral);
  --color-brand-lilac: var(--color-brand-lilac);
  --color-brand-black: var(--color-brand-black);
  --color-secondary-moon-grape: var(--color-secondary-moon-grape);
  --color-secondary-electric-litchi: var(--color-secondary-electric-litchi);
  --color-secondary-sunny-mango: var(--color-secondary-sunny-mango);
  --color-secondary-aqua-kiwi: var(--color-secondary-aqua-kiwi);
  --color-secondary-coral-cherry: var(--color-secondary-coral-cherry);
  --color-secondary-navy: var(--color-secondary-navy);

  --color-misc-replaceable: var(--color-replaceable);

  /* Surface */
  --color-surface-default: var(--color-surface-default);
  --color-surface-alternate: var(--color-surface-alternate);
  --color-surface-canvas: var(--color-surface-canvas);
  --color-surface-low: var(--color-surface-low);
  --color-surface-high: var(--color-surface-high);
  --color-surface-higher: var(--color-surface-higher);
  --color-surface-subtle: var(--color-surface-subtle);

  /* Background */
  --color-background-default: var(--color-background-default);
  --color-background-hover: var(--color-background-hover);
  --color-background-down: var(--color-background-down);
  --color-background-subdued: var(--color-background-subdued);
  --color-background-subdued-hover: var(--color-background-subdued-hover);
  --color-background-subdued-down: var(--color-background-subdued-down);
  --color-background-borderless-subdued-hover: var(--color-background-borderless-subdued-hover);
  --color-background-borderless-subdued-down: var(--color-background-borderless-subdued-down);
  --color-background-accent: var(--color-background-accent);
  --color-background-accent-hover: var(--color-background-accent-hover);
  --color-background-accent-down: var(--color-background-accent-down);
  --color-background-accent-subdued: var(--color-background-accent-subdued);
  --color-background-accent-subdued-hover: var(--color-background-accent-subdued-hover);
  --color-background-accent-subdued-down: var(--color-background-accent-subdued-down);
  --color-background-accent-fixed: var(--color-background-accent-fixed);
  --color-background-positive: var(--color-background-positive);
  --color-background-positive-hover: var(--color-background-positive-hover);
  --color-background-positive-down: var(--color-background-positive-down);
  --color-background-positive-subdued: var(--color-background-positive-subdued);
  --color-background-positive-subdued-hover: var(--color-background-positive-subdued-hover);
  --color-background-positive-subdued-down: var(--color-background-positive-subdued-down);
  --color-background-negative: var(--color-background-negative);
  --color-background-negative-hover: var(--color-background-negative-hover);
  --color-background-negative-down: var(--color-background-negative-down);
  --color-background-negative-subdued: var(--color-background-negative-subdued);
  --color-background-negative-subdued-hover: var(--color-background-negative-subdued-hover);
  --color-background-negative-subdued-down: var(--color-background-negative-subdued-down);
  --color-background-tab: var(--color-background-tab);
  --color-background-bar: var(--color-background-bar);
  --color-background-white: var(--color-background-white);
  --color-background-white-hover: var(--color-background-white-hover);
  --color-background-white-down: var(--color-background-white-down);
  --color-background-white-subdued: var(--color-background-white-subdued);
  --color-background-white-subdued-hover: var(--color-background-white-subdued-hover);
  --color-background-white-subdued-down: var(--color-background-white-subdued-down);
  --color-background-spotlight: var(--color-background-spotlight);
  --color-background-spotlight-down: var(--color-background-spotlight-down);
  --color-background-inverted: var(--color-background-inverted);
  --color-background-promotional: var(--color-background-promotional);
  --color-background-asset: #e6e6e6;
  --color-background-overlay: var(--color-background-overlay);
  --color-background-tooltip: var(--color-background-tooltip);

  /* Content */
  --color-content-primary: var(--color-content-primary);
  --color-content-subdued-primary: var(--color-content-subdued-primary);
  --color-content-secondary: var(--color-content-secondary);
  --color-content-tertiary: var(--color-content-tertiary);
  --color-content-accent: var(--color-content-accent);
  --color-content-accent-hover: var(--color-content-accent-hover);
  --color-content-accent-down: var(--color-content-accent-down);
  --color-content-positive: var(--color-content-positive);
  --color-content-positive-hover: var(--color-content-positive-hover);
  --color-content-positive-down: var(--color-content-positive-down);
  --color-content-negative: var(--color-content-negative);
  --color-content-negative-hover: var(--color-content-negative-hover);
  --color-content-negative-down: var(--color-content-negative-down);
  --color-content-camera-accent: var(--color-content-camera-accent);
  --color-content-white-primary: var(--color-content-white-primary);
  --color-content-white-secondary: var(--color-content-white-secondary);
  --color-content-black-primary: var(--color-content-black-primary);
  --color-content-black-secondary: var(--color-content-black-secondary);
  --color-content-white-inverted-primary: var(--color-content-white-inverted-primary);
  --color-content-white-inverted-secondary: var(--color-content-white-inverted-secondary);
  --color-content-black-inverted-primary: var(--color-content-black-inverted-primary);
  --color-content-black-inverted-secondary: var(--color-content-black-inverted-secondary);

  /* Structure */
  --color-misc-divider: var(--color-misc-divider);
  --color-misc-divider-ios: var(--color-misc-divider-ios);
  --color-misc-border: var(--color-misc-border);
  --color-misc-border-hover: var(--color-misc-border-hover);
  --color-misc-border-down: var(--color-misc-border-down);
  --color-misc-border-emphasized: var(--color-misc-border-emphasized);
  --color-misc-border-sidebar: var(--color-misc-border-sidebar);
  --color-misc-border-default: var(--color-misc-border-default);
  --color-misc-stack-layer-1: var(--color-misc-stack-layer-1);
  --color-misc-stack-layer-2: var(--color-misc-stack-layer-2);
  --color-misc-focus-indicator: var(--color-misc-focus-indicator);
  --color-misc-focus-indicator-subdued: var(--color-misc-focus-indicator-subdued);
  --color-misc-white-focus-indicator: var(--color-misc-white-focus-indicator);
  --color-misc-hairline: var(--color-neutral-alpha-300);
  --color-misc-hairline-emphasized: var(--color-misc-hairline-emphasized);

  /* Overlay */
  --color-misc-visual-hover: var(--color-misc-visual-hover);
  --color-misc-visual-down: var(--color-misc-visual-down);
  --color-misc-automated-exports: var(--color-misc-automated-exports);

  /* Pricing */
  --color-misc-ai-image: var(--color-misc-ai-image);
  --color-misc-ai-video: var(--color-misc-ai-video);

  --color-checker: var(--color-checker);

  /*
   * Deprecated bare color tokens — DO NOT USE.
   * Pending design-system audit to replace with semantic tokens.
   */
  --color-yellow: #ffc710;
  --color-green: #23d114;
  --color-blue: #339cff;
  --color-pink: #ff47e0;
  --color-pastel-pink: #f68efe;
  --color-pastel-coral: #ffaaaa;
  --color-pastel-yellow: #ffec8d;
  --color-pastel-cyan-1: #22cbe8;
  --color-pastel-cyan-2: #b5f6fb;
  --color-facebook: #1877f2;
  --color-facebook-dark: #0b63d4;
  --color-facebook-light: #2c83f2;
  --color-facebook-800: #5071fc;
  --color-facebook-900: #4866e3;
}

/*
 * Photoroom design tokens — typography, spacing, shadows, etc.
 */

@theme {
  /* Font family */
  --font-brand:
    "TT Photoroom", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  /* Opacity (extends v4 default scale) */
  --opacity-15: 0.15;

  /* Border radius — https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=6953%3A13224 */
  --radius-none: 0;
  --radius-150: 3px;
  --radius-200: 4px;
  --radius-250: 5px;
  --radius-300: 6px;
  --radius-350: 7px;
  --radius-400: 8px;
  --radius-450: 9px;
  --radius-500: 10px;
  --radius-600: 12px;
  /*
   * Concentric rounding — inner radius of a padded element inside a rounded
   * container: reference radius minus the padding (name: <reference>-<padding>),
   * so nested corners stay visually parallel.
   * https://www.figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=74340-16292
   */
  --radius-concentric-500-4px: calc(var(--radius-500) - 4px);
  --radius-concentric-500-6px: calc(var(--radius-500) - 6px);
  --radius-area-500: 18px;
  --radius-area-600: 34px;
  --radius-full: 9999px;

  /* Breakpoints */
  --breakpoint-2xl: 1512px;
  --breakpoint-3xl: 1800px;

  /* Font size — https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=6953%3A13370 */
  --text-300: 10px;
  --text-400: 12px;
  --text-500: 14px;
  --text-600: 17px;
  --text-700: 20px;
  --text-800: 24px;
  --text-900: 29px;
  --text-1000: 35px;
  --text-1100: 42px;
  --text-1200: 50px;
  --text-1300: 60px;
  --text-1400: 72px;

  /* Font weight — https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=6953%3A13333 */
  --font-weight-inherit: inherit;
  --font-weight-300: 300; /* Light */
  --font-weight-400: 400; /* Regular */
  --font-weight-500: 500; /* Medium */
  --font-weight-600: 600; /* SemiBold */
  --font-weight-700: 700; /* Bold */
  --font-weight-800: 800; /* ExtraBold */

  /* Line height — https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=6953%3A13353 */
  --leading-400: 110%; /* Large heading */
  --leading-500: 130%; /* Heading, component */
  --leading-600: 150%; /* Body */
  --default-leading: 1.2;

  /* Spacing (extends v4 default scale) */
  --spacing-18: 4.5rem; /* 72px */
  --spacing-22: 5.5rem; /* 88px */
  --spacing-26: 6.5rem; /* 104px */
  --spacing-29: 7.25rem; /* 116px */

  /* Container / max-width (v4 renamed from maxWidth scale) */
  --container-xxs: 13rem; /* 208px */
  --container-mdlg: 29rem; /* 464px */
  /*
   * Containers with dots in their name (1.5xl, 2.5xl, 5.5xl) can't live in
   * @theme — v4 doesn't support escaped dots in token names. The few
   * call sites use arbitrary values (max-w-[67rem], etc.) instead.
   */

  /* Grid template columns */
  --grid-cols-header: 1fr auto 1fr;

  /* Box shadow — https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=7711%3A13275 */
  --shadow-300:
    0px 0.5px 3.13px rgba(0, 0, 0, 0.06), 0px 1px 6.25px rgba(0, 0, 0, 0.03),
    0px 2px 12.5px rgba(0, 0, 0, 0.02);
  --shadow-400:
    0px 1px 5px rgba(0, 0, 0, 0.07), 0px 2px 10px rgba(0, 0, 0, 0.03),
    0px 4px 20px rgba(0, 0, 0, 0.02);
  --shadow-500:
    0px 2px 8px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.04),
    0px 8px 32px rgba(0, 0, 0, 0.02);
  --shadow-600:
    0px 4px 12.8px rgba(0, 0, 0, 0.09), 0px 8px 25.6px rgba(0, 0, 0, 0.05),
    0px 16px 51.2px rgba(0, 0, 0, 0.02);
  --shadow-700:
    0px 8px 20.48px rgba(0, 0, 0, 0.11), 0px 16px 40.96px rgba(0, 0, 0, 0.05),
    0px 32px 81.92px rgba(0, 0, 0, 0.03);
  --shadow-800:
    0px 16px 32.77px rgba(0, 0, 0, 0.12), 0px 32px 65.54px rgba(0, 0, 0, 0.06),
    0px 64px 131.07px rgba(0, 0, 0, 0.03);
  --shadow-background-generator:
    0px 151px 60px rgba(174, 174, 194, 0.01), 0px 85px 51px rgba(174, 174, 194, 0.05),
    0px 38px 38px rgba(174, 174, 194, 0.09), 0px 9px 21px rgba(174, 174, 194, 0.1),
    0px 0px 0px rgba(174, 174, 194, 0.1);

  /* Ring width (extends v4 default scale) */
  --ring-3: 3px;

  /* Animation timings */
  --animate-bone-pulse: bone-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-tooltip-slide-down: tooltip-slide-down 0.2s;
  --animate-tooltip-slide-up: tooltip-slide-up 0.2s;
  --animate-tooltip-slide-left: tooltip-slide-left 0.2s;
  --animate-tooltip-slide-right: tooltip-slide-right 0.2s;
  --animate-button-loading-indeterminate-wiggle: button-loading-indeterminate-wiggle 2498ms
    cubic-bezier(0.5, 0, 0.5, 1) infinite;
  --animate-dialog-overlay-enter: dialog-overlay-enter 0.2s ease-out;
  --animate-dialog-overlay-leave: dialog-overlay-leave 0.2s ease-in;
  --animate-dialog-enter: dialog-enter 0.2s ease-out;
  --animate-dialog-leave: dialog-leave 0.2s ease-in;
  --animate-spotlight-fade-subdued: spotlight-fade-subdued 500ms forwards 1500ms;
  --animate-spotlight-fade-white: spotlight-fade-white 500ms forwards 1500ms;
  --animate-radix-accordion-slide-down: radix-accordion-slide-down 300ms
    cubic-bezier(0.87, 0, 0.13, 1);
  --animate-radix-accordion-slide-up: radix-accordion-slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1);
  --animate-nav-content-from-start: nav-content-from-start 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-nav-content-from-end: nav-content-from-end 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-nav-content-fade-out: nav-content-fade-out 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * Custom utilities (replaces src/plugins/transitions.js)
 * https://www.figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=62868-23303&m=dev
 */
@utility interaction-transition {
  transition-timing-function: cubic-bezier(0.2, 1, 0.4, 1);
  transition-duration: 200ms;
}

/*
 * Icon size utilities (replaces src/plugins/icon-size.js)
 * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12716
 */
@utility icon-size-200 {
  width: --spacing(3);
  height: --spacing(3);
}
@utility icon-size-300 {
  width: 14px;
  height: 14px;
}
@utility icon-size-400 {
  width: --spacing(4);
  height: --spacing(4);
}
@utility icon-size-500 {
  width: --spacing(5);
  height: --spacing(5);
}
@utility icon-size-600 {
  width: --spacing(6);
  height: --spacing(6);
}
@utility icon-size-700 {
  width: --spacing(7);
  height: --spacing(7);
}
@utility icon-size-800 {
  width: 34px;
  height: 34px;
}

/*
 * Spacing utilities (replaces src/plugins/spacing.js)
 *
 * External paddings (e400–e1000) — https://www.figma.com/file/5G9xtfAPMEgTJoLQbAg1KR/Website?node-id=7043-23918
 * Internal paddings/gap (i200–i1000) — https://www.figma.com/file/5G9xtfAPMEgTJoLQbAg1KR/Website?node-id=7050-26673
 */
@utility pt-e400 {
  @apply pt-10 sm:pt-12 lg:pt-16;
}
@utility pb-e400 {
  @apply pb-10 sm:pb-12 lg:pb-16;
}
@utility py-e400 {
  @apply py-10 sm:py-12 lg:py-16;
}
@utility pt-e500 {
  @apply pt-10 sm:pt-16 lg:pt-20;
}
@utility pb-e500 {
  @apply pb-10 sm:pb-16 lg:pb-20;
}
@utility py-e500 {
  @apply py-10 sm:py-16 lg:py-20;
}
@utility pt-e600 {
  @apply pt-12 sm:pt-20 lg:pt-24;
}
@utility pb-e600 {
  @apply pb-12 sm:pb-20 lg:pb-24;
}
@utility py-e600 {
  @apply py-12 sm:py-20 lg:py-24;
}
@utility pt-e700 {
  @apply pt-14 sm:pt-24 lg:pt-28;
}
@utility pb-e700 {
  @apply pb-14 sm:pb-24 lg:pb-28;
}
@utility py-e700 {
  @apply py-14 sm:py-24 lg:py-28;
}
@utility pt-e800 {
  @apply pt-16 sm:pt-28 lg:pt-32;
}
@utility pb-e800 {
  @apply pb-16 sm:pb-28 lg:pb-32;
}
@utility py-e800 {
  @apply py-16 sm:py-28 lg:py-32;
}
@utility pt-e900 {
  @apply pt-18 sm:pt-32 lg:pt-36;
}
@utility pb-e900 {
  @apply pb-18 sm:pb-32 lg:pb-36;
}
@utility py-e900 {
  @apply py-18 sm:py-32 lg:py-36;
}
@utility pt-e1000 {
  @apply pt-20 sm:pt-36 lg:pt-40;
}
@utility pb-e1000 {
  @apply pb-20 sm:pb-36 lg:pb-40;
}
@utility py-e1000 {
  @apply py-20 sm:py-36 lg:py-40;
}
@utility pt-i200 {
  @apply pt-8;
}
@utility pb-i200 {
  @apply pb-8;
}
@utility py-i200 {
  @apply py-8;
}
@utility gap-i200 {
  @apply gap-8;
}
@utility pt-i300 {
  @apply pt-10;
}
@utility pb-i300 {
  @apply pb-10;
}
@utility py-i300 {
  @apply py-10;
}
@utility gap-i300 {
  @apply gap-10;
}
@utility pt-i400 {
  @apply pt-12;
}
@utility pb-i400 {
  @apply pb-12;
}
@utility py-i400 {
  @apply py-12;
}
@utility gap-i400 {
  @apply gap-12;
}
@utility pt-i500 {
  @apply pt-12 sm:pt-14 lg:pt-16;
}
@utility pb-i500 {
  @apply pb-12 sm:pb-14 lg:pb-16;
}
@utility py-i500 {
  @apply py-12 sm:py-14 lg:py-16;
}
@utility gap-i500 {
  @apply gap-12 sm:gap-14 lg:gap-16;
}
@utility pt-i600 {
  @apply pt-12 sm:pt-16 lg:pt-20;
}
@utility pb-i600 {
  @apply pb-12 sm:pb-16 lg:pb-20;
}
@utility py-i600 {
  @apply py-12 sm:py-16 lg:py-20;
}
@utility gap-i600 {
  @apply gap-12 sm:gap-16 lg:gap-20;
}
@utility pt-i1000 {
  @apply pt-24 sm:pt-28 lg:pt-32;
}
@utility pb-i1000 {
  @apply pb-24 sm:pb-28 lg:pb-32;
}
@utility py-i1000 {
  @apply py-24 sm:py-28 lg:py-32;
}
@utility gap-i1000 {
  @apply gap-24 sm:gap-28 lg:gap-32;
}

/*
 * Background damier (checkerboard) pattern (replaces src/plugins/backgrounds.js)
 */
@utility bg-damier-* {
  background-image: repeating-conic-gradient(--value(--color-*) 0% 25%, transparent 0% 50%);
  background-position: center;
}
@utility bg-damier-small {
  background-size: 12px 12px;
}
@utility bg-damier-medium {
  background-size: 20px 20px;
}
@utility bg-damier-large {
  background-size: 28px 28px;
}

/*
 * Misc design-system utilities (replaces src/plugins/misc.js)
 * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=20464-7406
 */

/* Scrollbar */
@utility scrollbar-none {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Dropdown */
@utility misc-hairline-spacing {
  @apply gap-0.5;
}
@utility misc-dropdown-padding {
  @apply p-1;
}
@utility misc-dropdown-padding-spacious {
  @apply p-4;
}
@utility misc-dropdown-rounding {
  @apply rounded-500;
}
@utility misc-dropdown-inner-rounding {
  @apply rounded-300;
}

/* Dialog */
@utility misc-dialog-rounding {
  @apply rounded-500;
}
@utility misc-dialog-overlay {
  background-color: rgba(0, 0, 0, 25%);
}

/* Border / ring */
@utility misc-border-size-hairline {
  @apply border-[0.5px];
}
@utility misc-border-size-default {
  @apply border;
}
@utility misc-border-size-selection {
  @apply border-2;
}
@utility misc-border-size-focus-ring {
  @apply ring-3;
}
/*
 * Outer border using box-shadow so it doesn't affect the element's bounding
 * box. Use this instead of `border border-misc-border` on floating/elevated UI
 * elements (pills, menus, popovers) to keep layout size exact and render the
 * correct semi-transparent misc-border token.
 */
@utility misc-outer-border {
  @apply ring-misc-border ring-1;
}

/* Shadow */
@utility misc-shadow-selection {
  @apply shadow-[inset_0_0_0_1px_var(--color-white)];
}

/*
 * Color picker overrides for react-colorful.
 * !important is needed because react-colorful injects unlayered \3c style>,
 * which beats anything inside @layer utilities regardless of specificity.
 */
@utility misc-color-picker {
  & .react-colorful {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  & .react-colorful__saturation {
    height: 10rem !important;
    width: 100% !important;
    border-radius: 8px !important;
    border: 0 !important;
  }
  & .react-colorful__hue {
    height: 1rem !important;
    border-radius: 9999px !important;
  }
  & .react-colorful__pointer {
    height: 1rem !important;
    width: 1rem !important;
  }
}

/* Magic gradient on HeroBlock */
@utility text-hero-magic {
  background-image: linear-gradient(to bottom right, #410cd9, #f68efe);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/*
 * Size utilities (replaces src/plugins/size.js)
 * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=16712-19165
 *
 * size-N: both width & height; size-w-N: width only; size-h-N: height only.
 *
 * NOTE: explicit px values (not @apply h-N w-N) — v4's built-in dynamic
 * size-N utility (`calc(var(--spacing) * N)`) collides with @utility size-N
 * by name, and the built-in wins when both produce the same CSS form.
 * Using px values produces a different declaration that the cascade then
 * resolves in our favor.
 */
@utility size-150 {
  width: 12px;
  height: 12px;
}
@utility size-200 {
  width: 16px;
  height: 16px;
}
@utility size-250 {
  width: 20px;
  height: 20px;
}
@utility size-300 {
  width: 24px;
  height: 24px;
}
@utility size-350 {
  width: 28px;
  height: 28px;
}
@utility size-400 {
  width: 32px;
  height: 32px;
}
@utility size-450 {
  width: 36px;
  height: 36px;
}
@utility size-500 {
  width: 40px;
  height: 40px;
}
@utility size-550 {
  width: 44px;
  height: 44px;
}
@utility size-600 {
  width: 48px;
  height: 48px;
}
@utility size-650 {
  width: 52px;
  height: 52px;
}
@utility size-700 {
  width: 56px;
  height: 56px;
}
@utility size-750 {
  width: 60px;
  height: 60px;
}
@utility size-800 {
  width: 64px;
  height: 64px;
}
@utility size-w-150 {
  width: 12px;
}
@utility size-w-200 {
  width: 16px;
}
@utility size-w-250 {
  width: 20px;
}
@utility size-w-300 {
  width: 24px;
}
@utility size-w-350 {
  width: 28px;
}
@utility size-w-400 {
  width: 32px;
}
@utility size-w-450 {
  width: 36px;
}
@utility size-w-500 {
  width: 40px;
}
@utility size-w-550 {
  width: 44px;
}
@utility size-w-600 {
  width: 48px;
}
@utility size-w-650 {
  width: 52px;
}
@utility size-w-700 {
  width: 56px;
}
@utility size-w-750 {
  width: 60px;
}
@utility size-w-800 {
  width: 64px;
}
@utility size-h-150 {
  height: 12px;
}
@utility size-h-200 {
  height: 16px;
}
@utility size-h-250 {
  height: 20px;
}
@utility size-h-300 {
  height: 24px;
}
@utility size-h-350 {
  height: 28px;
}
@utility size-h-400 {
  height: 32px;
}
@utility size-h-450 {
  height: 36px;
}
@utility size-h-500 {
  height: 40px;
}
@utility size-h-550 {
  height: 44px;
}
@utility size-h-600 {
  height: 48px;
}
@utility size-h-650 {
  height: 52px;
}
@utility size-h-700 {
  height: 56px;
}
@utility size-h-750 {
  height: 60px;
}
@utility size-h-800 {
  height: 64px;
}

/*
 * Typography utility classes (replaces src/plugins/typography.js)
 * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=7217%3A13600
 *
 * Each class composes a text-size + font-weight + leading + optional
 * letter-spacing. Used as text presets across the design system.
 *
 *   component-{300..900}            — default / light / semi-strong / strong
 *   body-{300..1000}                — default / light / semi-strong / strong
 *   heading-{300..1200}             — default / light / thin
 *   heading-extra-thin-{900..1200}
 */
@utility component-300 {
  @apply text-300 font-500 leading-500;
}
@utility component-400 {
  @apply text-400 font-500 leading-500;
}
@utility component-500 {
  @apply text-500 font-500 leading-500;
}
@utility component-600 {
  @apply text-600 font-500 leading-500;
}
@utility component-700 {
  @apply text-700 font-500 leading-500;
}
@utility component-800 {
  @apply text-800 font-500 leading-500;
}
@utility component-900 {
  @apply text-900 font-500 leading-500 -tracking-[0.058px];
}
@utility component-light-300 {
  @apply text-300 font-400 leading-500;
}
@utility component-light-400 {
  @apply text-400 font-400 leading-500;
}
@utility component-light-500 {
  @apply text-500 font-400 leading-500;
}
@utility component-light-600 {
  @apply text-600 font-400 leading-500;
}
@utility component-light-700 {
  @apply text-700 font-400 leading-500;
}
@utility component-light-800 {
  @apply text-800 font-400 leading-500;
}
@utility component-light-900 {
  @apply text-900 font-400 leading-500 -tracking-[0.0667px];
}
@utility component-semi-strong-300 {
  @apply text-300 font-600 leading-500;
}
@utility component-semi-strong-400 {
  @apply text-400 font-600 leading-500;
}
@utility component-semi-strong-500 {
  @apply text-500 font-600 leading-500;
}
@utility component-semi-strong-600 {
  @apply text-600 font-600 leading-500;
}
@utility component-semi-strong-700 {
  @apply text-700 font-600 leading-500;
}
@utility component-semi-strong-800 {
  @apply text-800 font-600 leading-500;
}
@utility component-semi-strong-900 {
  @apply text-900 font-600 leading-500 -tracking-[0.0493px];
}
@utility component-strong-300 {
  @apply text-300 font-700 leading-500;
}
@utility component-strong-400 {
  @apply text-400 font-700 leading-500;
}
@utility component-strong-500 {
  @apply text-500 font-700 leading-500;
}
@utility component-strong-600 {
  @apply text-600 font-700 leading-500;
}
@utility component-strong-700 {
  @apply text-700 font-700 leading-500;
}
@utility component-strong-800 {
  @apply text-800 font-700 leading-500;
}
@utility component-strong-900 {
  @apply text-900 font-700 leading-500 -tracking-[0.0377px];
}
@utility body-300 {
  @apply text-300 font-500 leading-600;
}
@utility body-400 {
  @apply text-400 font-500 leading-600;
}
@utility body-500 {
  @apply text-500 font-500 leading-600;
}
@utility body-600 {
  @apply text-600 font-500 leading-600;
}
@utility body-700 {
  @apply text-700 font-500 leading-600;
}
@utility body-800 {
  @apply text-800 font-500 leading-600;
}
@utility body-900 {
  @apply text-900 font-500 leading-600;
}
@utility body-1000 {
  @apply text-1000 font-500 leading-600;
}
@utility body-light-300 {
  @apply text-300 font-400 leading-600;
}
@utility body-light-400 {
  @apply text-400 font-400 leading-600;
}
@utility body-light-500 {
  @apply text-500 font-400 leading-600;
}
@utility body-light-600 {
  @apply text-600 font-400 leading-600;
}
@utility body-light-700 {
  @apply text-700 font-400 leading-600;
}
@utility body-light-800 {
  @apply text-800 font-400 leading-600;
}
@utility body-light-900 {
  @apply text-900 font-400 leading-600 -tracking-[0.0667px];
}
@utility body-light-1000 {
  @apply text-1000 font-400 leading-600 -tracking-[0.0203px];
}
@utility body-semi-strong-300 {
  @apply text-300 font-600 leading-600;
}
@utility body-semi-strong-400 {
  @apply text-400 font-600 leading-600;
}
@utility body-semi-strong-500 {
  @apply text-500 font-600 leading-600;
}
@utility body-semi-strong-600 {
  @apply text-600 font-600 leading-600;
}
@utility body-semi-strong-700 {
  @apply text-700 font-600 leading-600;
}
@utility body-semi-strong-800 {
  @apply text-800 font-600 leading-600;
}
@utility body-semi-strong-900 {
  @apply text-900 font-600 leading-600;
}
@utility body-semi-strong-1000 {
  @apply text-1000 font-600 leading-600;
}
@utility body-strong-300 {
  @apply text-300 font-700 leading-600;
}
@utility body-strong-400 {
  @apply text-400 font-700 leading-600;
}
@utility body-strong-500 {
  @apply text-500 font-700 leading-600;
}
@utility body-strong-600 {
  @apply text-600 font-700 leading-600;
}
@utility body-strong-700 {
  @apply text-700 font-700 leading-600;
}
@utility body-strong-800 {
  @apply text-800 font-700 leading-600;
}
@utility body-strong-900 {
  @apply text-900 font-700 leading-600;
}
@utility body-strong-1000 {
  @apply text-1000 font-700 leading-600;
}
@utility heading-extra-thin-900 {
  @apply text-1100 font-400 leading-400 -tracking-[0.416px];
}
@utility heading-extra-thin-1000 {
  @apply text-1200 font-400 leading-400 -tracking-[0.73px];
}
@utility heading-extra-thin-1100 {
  @apply text-1300 font-400 leading-400 -tracking-[1.224px];
}
@utility heading-extra-thin-1200 {
  @apply text-1400 font-400 leading-400 -tracking-[1.973px];
}
@utility heading-thin-300 {
  @apply text-500 font-500 leading-500;
}
@utility heading-thin-400 {
  @apply text-600 font-500 leading-500;
}
@utility heading-thin-500 {
  @apply text-700 font-500 leading-500;
}
@utility heading-thin-600 {
  @apply text-800 font-500 leading-500;
}
@utility heading-thin-700 {
  @apply text-900 font-500 leading-400 -tracking-[0.058px];
}
@utility heading-thin-800 {
  @apply text-1000 font-500 leading-400 -tracking-[0.175px];
}
@utility heading-thin-900 {
  @apply text-1100 font-500 leading-400 -tracking-[0.357px];
}
@utility heading-thin-1000 {
  @apply text-1200 font-500 leading-400 -tracking-[0.625px];
}
@utility heading-thin-1100 {
  @apply text-1300 font-500 leading-400 -tracking-[1.05px];
}
@utility heading-thin-1200 {
  @apply text-1400 font-500 leading-400 -tracking-[1.692px];
}
@utility heading-light-300 {
  @apply text-500 font-600 leading-500;
}
@utility heading-light-400 {
  @apply text-600 font-600 leading-500;
}
@utility heading-light-500 {
  @apply text-700 font-600 leading-500;
}
@utility heading-light-600 {
  @apply text-800 font-600 leading-500;
}
@utility heading-light-700 {
  @apply text-900 font-600 leading-400 -tracking-[0.0493px];
}
@utility heading-light-800 {
  @apply text-1000 font-600 leading-400 -tracking-[0.147px];
}
@utility heading-light-900 {
  @apply text-1100 font-600 leading-400 -tracking-[0.2982px];
}
@utility heading-light-1000 {
  @apply text-1200 font-600 leading-400 -tracking-[0.52px];
}
@utility heading-light-1100 {
  @apply text-1300 font-600 leading-400 -tracking-[0.876px];
}
@utility heading-light-1200 {
  @apply text-1400 font-600 leading-400 -tracking-[1.4112px];
}
@utility heading-300 {
  @apply text-500 font-700 leading-500;
}
@utility heading-400 {
  @apply text-600 font-700 leading-500;
}
@utility heading-500 {
  @apply text-700 font-700 leading-500;
}
@utility heading-600 {
  @apply text-800 font-700 leading-500;
}
@utility heading-700 {
  @apply text-900 font-700 leading-400 -tracking-[0.0377px];
}
@utility heading-800 {
  @apply text-1000 font-700 leading-400 -tracking-[0.1155px];
}
@utility heading-900 {
  @apply text-1100 font-700 leading-400 -tracking-[0.2394px];
}
@utility heading-1000 {
  @apply text-1200 font-700 leading-400 -tracking-[0.415px];
}
@utility heading-1100 {
  @apply text-1300 font-700 leading-400 -tracking-[0.702px];
}
@utility heading-1200 {
  @apply text-1400 font-700 leading-400 -tracking-[1.1304px];
}

/*
 * Keyframes (replaces tailwind.config.js theme.extend.keyframes)
 */
@keyframes bone-pulse {
  0% {
    background-color: var(--color-neutral-alpha-100);
  }
  50% {
    background-color: var(--color-neutral-alpha-300);
  }
  100% {
    background-color: var(--color-neutral-alpha-100);
  }
}
@keyframes tooltip-slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tooltip-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tooltip-slide-left {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes tooltip-slide-right {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes button-loading-indeterminate-wiggle {
  0% {
    transform: translate(-200%, -50%);
  }
  50% {
    transform: translate(200%, -50%);
  }
  100% {
    transform: translate(-200%, -50%);
  }
}
@keyframes dialog-overlay-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes dialog-overlay-leave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes dialog-enter {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}
@keyframes dialog-leave {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}
@keyframes spotlight-fade-subdued {
  0% {
    background-color: var(--color-background-spotlight);
  }
  100% {
    background-color: var(--color-background-subdued);
  }
}
@keyframes spotlight-fade-white {
  0% {
    background-color: var(--color-background-spotlight);
  }
  100% {
    background-color: var(--color-background-white);
  }
}
@keyframes radix-accordion-slide-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
@keyframes radix-accordion-slide-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
@keyframes nav-content-from-start {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes nav-content-from-end {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes nav-content-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*
 * Form input resets (replaces src/plugins/forms.js)
 */
@layer base {
  /* Remove up/down arrows on number inputs */
  input[type="number"] {
    -moz-appearance: textfield;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
  }

  /* Remove the X on search inputs */
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration {
    appearance: none;
  }

  /*
   * @tailwindcss/forms paints the select dropdown chevron with a physical
   * `background-position: right 8px center`, which doesn't flip in RTL and
   * causes the chevron to overlap the option text. Mirror it for RTL.
   */
  [dir="rtl"] select {
    background-position: left 8px center;
  }

  /*
   * Auto-mirror directional icons (chevrons, arrows, undo/redo, back)
   * in RTL. The `data-rtl-mirror="true"` attribute is stamped by
   * packages/icons/scripts/generateIcons.js for the curated allowlist of
   * direction-sensitive SVGs, so consumers don't have to add
   * `rtl:-scale-x-100` at every callsite.
   */
  [dir="rtl"] svg[data-rtl-mirror="true"] {
    transform: scaleX(-1);
  }
}