@import "tailwindcss";
@import "tw-animate-css";

@import "../core-tokens/css/_colors.css";
@import "../core-tokens/css/_spacing.css";
@import "../core-tokens/css/_typography.css";

@variant dark (&:is(.dark *));

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--border, currentColor);
  }

  /* Text selection/highlight colors - uses semantic tokens that adapt to light/dark mode */
  ::selection {
    color: var(--foreground);
    background-color: var(--primary);
  }
}

:root {
  /* Base semantic colors */
  --background: var(--ds-colors-background-light);
  --background-dark-2: var(--ds-colors-background-dark-2);
  --background-dark-3: var(--ds-colors-background-dark-3);
  --foreground: var(--ds-colors-foreground-light);
  --card: var(--ds-colors-card-light);
  --card-foreground: var(--ds-colors-card-foreground-light);
  --card-border: var(--ds-colors-card-border-light);
  --popover: var(--ds-colors-popover-light);
  --popover-foreground: var(--ds-colors-popover-foreground-light);
  --primary: var(--ds-colors-primary-light);
  --primary-foreground: var(--ds-colors-primary-foreground-light);
  --secondary: var(--ds-colors-secondary-light);
  --secondary-foreground: var(--ds-colors-secondary-foreground-light);
  --muted: var(--ds-colors-muted-light);
  --muted-foreground: var(--ds-colors-muted-foreground-light);
  --accent: var(--ds-colors-accent-light);
  --accent-foreground: var(--ds-colors-accent-foreground-light);
  --destructive: var(--ds-colors-destructive-light);
  --destructive-foreground: var(--ds-colors-destructive-foreground-light);
  --border: var(--ds-colors-border-light);
  --input: var(--ds-colors-input-light);
  --ring: var(--ds-colors-ring-light);
  --ring-offset: var(--ds-tailwind-colors-base-white);
  --link: var(--ds-colors-link-light);
  --link-visited: var(--ds-colors-link-visited-light);
  --outline: var(--ds-colors-outline-light);

  /* Custom brand colors */
  --brand-primary-foreground: var(--ds-custom-brand-primary-foreground-light);

  /* Destructive opacity variants (error states) */
  --destructive-20: color-mix(
    in srgb,
    var(--ds-tailwind-colors-red-600) 20%,
    transparent
  );
  --destructive-40: color-mix(
    in srgb,
    var(--ds-tailwind-colors-red-600) 40%,
    transparent
  );

  /* Status/notification colors */
  --success-background: var(--ds-tailwind-colors-green-200);
  --success-foreground: var(--ds-tailwind-colors-green-900);
  --info-background: var(--ds-tailwind-colors-cyan-200);
  --info-foreground: var(--ds-tailwind-colors-cyan-900);
  --warning-background: var(--ds-tailwind-colors-orange-200);
  --warning-foreground: var(--ds-tailwind-colors-amber-900);

  /* Chart colors */
  --chart-1: var(--ds-colors-chart-1-light);
  --chart-2: var(--ds-colors-chart-2-light);
  --chart-3: var(--ds-colors-chart-3-light);
  --chart-4: var(--ds-colors-chart-4-light);
  --chart-5: var(--ds-colors-chart-5-light);

  /* Sidebar colors */
  --sidebar-background: var(--ds-colors-sidebar-background-light);
  --sidebar-foreground: var(--ds-colors-sidebar-foreground-light);
  --sidebar-primary: var(--ds-colors-sidebar-primary-light);
  --sidebar-primary-foreground: var(
    --ds-colors-sidebar-primary-foreground-light
  );
  --sidebar-accent: var(--ds-colors-sidebar-accent-light);
  --sidebar-accent-foreground: var(--ds-colors-sidebar-accent-foreground-light);
  --sidebar-border: var(--ds-colors-sidebar-border-light);
  --sidebar-ring: var(--ds-colors-sidebar-ring-light);

  /* Loading gradient colors */
  /* --loading-gradient-to is not backed by a Tokens Studio token.
     #b8f070 is a custom lime-green chosen to complement green-400 in the gradient. */
  --loading-gradient-from: var(--ds-tailwind-colors-green-400);
  --loading-gradient-to: #b8f070;

  /* Alpha colors (semi-transparent overlays) - Light mode */
  --alpha-5: var(--ds-colors-alpha-5-light);
  --alpha-10: var(--ds-colors-alpha-10-light);
  --alpha-20: var(--ds-colors-alpha-20-light);
  --alpha-30: var(--ds-colors-alpha-30-light);
  --alpha-40: var(--ds-colors-alpha-40-light);
  --alpha-50: var(--ds-colors-alpha-50-light);
  --alpha-60: var(--ds-colors-alpha-60-light);
  --alpha-70: var(--ds-colors-alpha-70-light);
  --alpha-80: var(--ds-colors-alpha-80-light);
  --alpha-90: var(--ds-colors-alpha-90-light);
}

.dark {
  /* Dark mode overrides */
  --background: var(--ds-colors-background-dark);
  --foreground: var(--ds-colors-foreground-dark);
  --card: var(--ds-colors-card-dark);
  --card-foreground: var(--ds-colors-card-foreground-dark);
  --card-border: var(--ds-colors-card-border-dark);
  --popover: var(--ds-colors-popover-dark);
  --popover-foreground: var(--ds-colors-popover-foreground-dark);
  --primary: var(--ds-colors-primary-dark);
  --primary-foreground: var(--ds-colors-primary-foreground-dark);
  --secondary: var(--ds-colors-secondary-dark);
  --secondary-foreground: var(--ds-colors-secondary-foreground-dark);
  --muted: var(--ds-colors-muted-dark);
  --muted-foreground: var(--ds-colors-muted-foreground-dark);
  --accent: var(--ds-colors-accent-dark);
  --accent-foreground: var(--ds-colors-accent-foreground-dark);
  --destructive: var(--ds-colors-destructive-foreground-light);
  --destructive-foreground: var(--ds-colors-destructive-dark);
  --border: var(--ds-colors-border-dark);
  --input: var(--ds-colors-input-dark);
  --ring: var(--ds-colors-ring-dark);
  --ring-offset: var(--ds-tailwind-colors-base-white);
  --link: var(--ds-colors-link-dark);
  --link-visited: var(--ds-colors-link-visited-dark);
  --outline: var(--ds-colors-outline-dark);

  /* Custom brand colors - dark mode */
  --brand-primary-foreground: var(--ds-custom-brand-primary-foreground-dark);

  /* Destructive opacity variants (error states) - dark mode */
  --destructive-20: color-mix(
    in srgb,
    var(--ds-tailwind-colors-red-400) 40%,
    transparent
  );
  --destructive-40: color-mix(
    in srgb,
    var(--ds-tailwind-colors-red-400) 60%,
    transparent
  );

  /* Status/notification colors - dark mode */
  --success-background: var(--ds-tailwind-colors-green-950);
  --success-foreground: var(--ds-tailwind-colors-green-200);
  --info-background: var(--ds-tailwind-colors-cyan-900);
  --info-foreground: var(--ds-tailwind-colors-cyan-200);
  --warning-background: var(--ds-tailwind-colors-amber-900);
  --warning-foreground: var(--ds-tailwind-colors-orange-200);

  /* Chart colors - dark mode */
  --chart-1: var(--ds-colors-chart-1-dark);
  --chart-2: var(--ds-colors-chart-2-dark);
  --chart-3: var(--ds-colors-chart-3-dark);
  --chart-4: var(--ds-colors-chart-4-dark);
  --chart-5: var(--ds-colors-chart-5-dark);

  /* Sidebar colors - dark mode */
  --sidebar-background: var(--ds-colors-sidebar-background-dark);
  --sidebar-foreground: var(--ds-colors-sidebar-foreground-dark);
  --sidebar-primary: var(--ds-colors-sidebar-primary-dark);
  --sidebar-primary-foreground: var(
    --ds-colors-sidebar-primary-foreground-dark
  );
  --sidebar-accent: var(--ds-colors-sidebar-accent-dark);
  --sidebar-accent-foreground: var(--ds-colors-sidebar-accent-foreground-dark);
  --sidebar-border: var(--ds-colors-sidebar-border-dark);
  --sidebar-ring: var(--ds-colors-sidebar-ring-dark);

  /* Loading gradient colors - dark mode */
  --loading-gradient-from: var(--ds-tailwind-colors-green-300);
  --loading-gradient-to: var(--ds-tailwind-colors-green-400);

  /* Alpha colors - dark mode (semi-transparent overlays) */
  --alpha-5: var(--ds-colors-alpha-5-dark);
  --alpha-10: var(--ds-colors-alpha-10-dark);
  --alpha-20: var(--ds-colors-alpha-20-dark);
  --alpha-30: var(--ds-colors-alpha-30-dark);
  --alpha-40: var(--ds-colors-alpha-40-dark);
  --alpha-50: var(--ds-colors-alpha-50-dark);
  --alpha-60: var(--ds-colors-alpha-60-dark);
  --alpha-70: var(--ds-colors-alpha-70-dark);
  --alpha-80: var(--ds-colors-alpha-80-dark);
  --alpha-90: var(--ds-colors-alpha-90-dark);
}

@theme inline {
  /* Fonts families */
  --font-sans:
    var(--ds-font-font-sans), ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif:
    var(--ds-font-font-serif), ui-serif, Georgia, Cambria, "Times New Roman",
    Times, serif;
  --font-mono:
    var(--ds-font-font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
  --font-display:
    var(--ds-font-font-display), ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --default-font-family: var(--font-sans);
  --default-font-feature-settings: normal;
  --default-font-variation-settings: normal;
  --default-line-height: var(--ds-text-base-line-height);
  --tw-leading: var(--default-line-height);

  /* Semantic DS colors (aliases for utilities)
     Reference: https://tailwindcss.com/docs/text-color
                https://tailwindcss.com/docs/background-color
                https://tailwindcss.com/docs/border-color */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-card-border: var(--card-border);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive-20: var(--destructive-20);
  --color-destructive-40: var(--destructive-40);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-ring-offset: var(--ring-offset);
  --color-link: var(--link);
  --color-link-visited: var(--link-visited);
  --color-outline: var(--outline);

  /* Custom brand colors */
  --color-brand-primary-foreground: var(--brand-primary-foreground);

  /* Status/notification colors */
  --color-success-background: var(--success-background);
  --color-success-foreground: var(--success-foreground);
  --color-info-background: var(--info-background);
  --color-info-foreground: var(--info-foreground);
  --color-warning-background: var(--warning-background);
  --color-warning-foreground: var(--warning-foreground);

  /* Charts */
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  /* Sidebar */
  --color-sidebar-background: var(--sidebar-background);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Base colors */
  --color-black: var(--ds-tailwind-colors-base-black);
  --color-white: var(--ds-tailwind-colors-base-white);
  --color-transparent: var(--ds-tailwind-colors-base-transparent);

  /* Slate colors */
  --color-slate-50: var(--ds-tailwind-colors-slate-50);
  --color-slate-100: var(--ds-tailwind-colors-slate-100);
  --color-slate-200: var(--ds-tailwind-colors-slate-200);
  --color-slate-300: var(--ds-tailwind-colors-slate-300);
  --color-slate-400: var(--ds-tailwind-colors-slate-400);
  --color-slate-500: var(--ds-tailwind-colors-slate-500);
  --color-slate-600: var(--ds-tailwind-colors-slate-600);
  --color-slate-700: var(--ds-tailwind-colors-slate-700);
  --color-slate-800: var(--ds-tailwind-colors-slate-800);
  --color-slate-900: var(--ds-tailwind-colors-slate-900);
  --color-slate-950: var(--ds-tailwind-colors-slate-950);

  /* Gray colors */
  --color-gray-50: var(--ds-tailwind-colors-gray-50);
  --color-gray-100: var(--ds-tailwind-colors-gray-100);
  --color-gray-200: var(--ds-tailwind-colors-gray-200);
  --color-gray-300: var(--ds-tailwind-colors-gray-300);
  --color-gray-400: var(--ds-tailwind-colors-gray-400);
  --color-gray-500: var(--ds-tailwind-colors-gray-500);
  --color-gray-600: var(--ds-tailwind-colors-gray-600);
  --color-gray-700: var(--ds-tailwind-colors-gray-700);
  --color-gray-800: var(--ds-tailwind-colors-gray-800);
  --color-gray-900: var(--ds-tailwind-colors-gray-900);
  --color-gray-950: var(--ds-tailwind-colors-gray-950);

  /* Zinc */
  --color-zinc-50: var(--ds-tailwind-colors-zinc-50);
  --color-zinc-100: var(--ds-tailwind-colors-zinc-100);
  --color-zinc-200: var(--ds-tailwind-colors-zinc-200);
  --color-zinc-300: var(--ds-tailwind-colors-zinc-300);
  --color-zinc-400: var(--ds-tailwind-colors-zinc-400);
  --color-zinc-500: var(--ds-tailwind-colors-zinc-500);
  --color-zinc-600: var(--ds-tailwind-colors-zinc-600);
  --color-zinc-700: var(--ds-tailwind-colors-zinc-700);
  --color-zinc-800: var(--ds-tailwind-colors-zinc-800);
  --color-zinc-900: var(--ds-tailwind-colors-zinc-900);
  --color-zinc-950: var(--ds-tailwind-colors-zinc-950);

  /* Neutral (custom) */
  --color-neutral-50: var(--ds-tailwind-colors-neutral-50);
  --color-neutral-100: var(--ds-tailwind-colors-neutral-100);
  --color-neutral-200: var(--ds-tailwind-colors-neutral-200);
  --color-neutral-300: var(--ds-tailwind-colors-neutral-300);
  --color-neutral-400: var(--ds-tailwind-colors-neutral-400);
  --color-neutral-500: var(--ds-tailwind-colors-neutral-500);
  --color-neutral-600: var(--ds-tailwind-colors-neutral-600);
  --color-neutral-700: var(--ds-tailwind-colors-neutral-700);
  --color-neutral-800: var(--ds-tailwind-colors-neutral-800);
  --color-neutral-900: var(--ds-tailwind-colors-neutral-900);
  --color-neutral-950: var(--ds-tailwind-colors-neutral-950);

  /* Stone */
  --color-stone-50: var(--ds-tailwind-colors-stone-50);
  --color-stone-100: var(--ds-tailwind-colors-stone-100);
  --color-stone-200: var(--ds-tailwind-colors-stone-200);
  --color-stone-300: var(--ds-tailwind-colors-stone-300);
  --color-stone-400: var(--ds-tailwind-colors-stone-400);
  --color-stone-500: var(--ds-tailwind-colors-stone-500);
  --color-stone-600: var(--ds-tailwind-colors-stone-600);
  --color-stone-700: var(--ds-tailwind-colors-stone-700);
  --color-stone-800: var(--ds-tailwind-colors-stone-800);
  --color-stone-900: var(--ds-tailwind-colors-stone-900);
  --color-stone-950: var(--ds-tailwind-colors-stone-950);

  /* Red */
  --color-red-50: var(--ds-tailwind-colors-red-50);
  --color-red-100: var(--ds-tailwind-colors-red-100);
  --color-red-200: var(--ds-tailwind-colors-red-200);
  --color-red-300: var(--ds-tailwind-colors-red-300);
  --color-red-400: var(--ds-tailwind-colors-red-400);
  --color-red-500: var(--ds-tailwind-colors-red-500);
  --color-red-600: var(--ds-tailwind-colors-red-600);
  --color-red-700: var(--ds-tailwind-colors-red-700);
  --color-red-800: var(--ds-tailwind-colors-red-800);
  --color-red-900: var(--ds-tailwind-colors-red-900);
  --color-red-950: var(--ds-tailwind-colors-red-950);

  /* Orange */
  --color-orange-50: var(--ds-tailwind-colors-orange-50);
  --color-orange-100: var(--ds-tailwind-colors-orange-100);
  --color-orange-200: var(--ds-tailwind-colors-orange-200);
  --color-orange-300: var(--ds-tailwind-colors-orange-300);
  --color-orange-400: var(--ds-tailwind-colors-orange-400);
  --color-orange-500: var(--ds-tailwind-colors-orange-500);
  --color-orange-600: var(--ds-tailwind-colors-orange-600);
  --color-orange-700: var(--ds-tailwind-colors-orange-700);
  --color-orange-800: var(--ds-tailwind-colors-orange-800);
  --color-orange-900: var(--ds-tailwind-colors-orange-900);
  --color-orange-950: var(--ds-tailwind-colors-orange-950);

  /* Amber */
  --color-amber-50: var(--ds-tailwind-colors-amber-50);
  --color-amber-100: var(--ds-tailwind-colors-amber-100);
  --color-amber-200: var(--ds-tailwind-colors-amber-200);
  --color-amber-300: var(--ds-tailwind-colors-amber-300);
  --color-amber-400: var(--ds-tailwind-colors-amber-400);
  --color-amber-500: var(--ds-tailwind-colors-amber-500);
  --color-amber-600: var(--ds-tailwind-colors-amber-600);
  --color-amber-700: var(--ds-tailwind-colors-amber-700);
  --color-amber-800: var(--ds-tailwind-colors-amber-800);
  --color-amber-900: var(--ds-tailwind-colors-amber-900);
  --color-amber-950: var(--ds-tailwind-colors-amber-950);

  /* Yellow */
  --color-yellow-50: var(--ds-tailwind-colors-yellow-50);
  --color-yellow-100: var(--ds-tailwind-colors-yellow-100);
  --color-yellow-200: var(--ds-tailwind-colors-yellow-200);
  --color-yellow-300: var(--ds-tailwind-colors-yellow-300);
  --color-yellow-400: var(--ds-tailwind-colors-yellow-400);
  --color-yellow-500: var(--ds-tailwind-colors-yellow-500);
  --color-yellow-600: var(--ds-tailwind-colors-yellow-600);
  --color-yellow-700: var(--ds-tailwind-colors-yellow-700);
  --color-yellow-800: var(--ds-tailwind-colors-yellow-800);
  --color-yellow-900: var(--ds-tailwind-colors-yellow-900);
  --color-yellow-950: var(--ds-tailwind-colors-yellow-950);

  /* Lime */
  --color-lime-50: var(--ds-tailwind-colors-lime-50);
  --color-lime-100: var(--ds-tailwind-colors-lime-100);
  --color-lime-200: var(--ds-tailwind-colors-lime-200);
  --color-lime-300: var(--ds-tailwind-colors-lime-300);
  --color-lime-400: var(--ds-tailwind-colors-lime-400);
  --color-lime-500: var(--ds-tailwind-colors-lime-500);
  --color-lime-600: var(--ds-tailwind-colors-lime-600);
  --color-lime-700: var(--ds-tailwind-colors-lime-700);
  --color-lime-800: var(--ds-tailwind-colors-lime-800);
  --color-lime-900: var(--ds-tailwind-colors-lime-900);
  --color-lime-950: var(--ds-tailwind-colors-lime-950);

  /* Green colors */
  --color-green-50: var(--ds-tailwind-colors-green-50);
  --color-green-100: var(--ds-tailwind-colors-green-100);
  --color-green-200: var(--ds-tailwind-colors-green-200);
  --color-green-300: var(--ds-tailwind-colors-green-300);
  --color-green-400: var(--ds-tailwind-colors-green-400);
  --color-green-500: var(--ds-tailwind-colors-green-500);
  --color-green-600: var(--ds-tailwind-colors-green-600);
  --color-green-700: var(--ds-tailwind-colors-green-700);
  --color-green-800: var(--ds-tailwind-colors-green-800);
  --color-green-900: var(--ds-tailwind-colors-green-900);
  --color-green-950: var(--ds-tailwind-colors-green-950);

  /* Emerald colors */
  --color-emerald-50: var(--ds-tailwind-colors-emerald-50);
  --color-emerald-100: var(--ds-tailwind-colors-emerald-100);
  --color-emerald-200: var(--ds-tailwind-colors-emerald-200);
  --color-emerald-300: var(--ds-tailwind-colors-emerald-300);
  --color-emerald-400: var(--ds-tailwind-colors-emerald-400);
  --color-emerald-500: var(--ds-tailwind-colors-emerald-500);
  --color-emerald-600: var(--ds-tailwind-colors-emerald-600);
  --color-emerald-700: var(--ds-tailwind-colors-emerald-700);
  --color-emerald-800: var(--ds-tailwind-colors-emerald-800);
  --color-emerald-900: var(--ds-tailwind-colors-emerald-900);
  --color-emerald-950: var(--ds-tailwind-colors-emerald-950);

  /* Teal */
  --color-teal-50: var(--ds-tailwind-colors-teal-50);
  --color-teal-100: var(--ds-tailwind-colors-teal-100);
  --color-teal-200: var(--ds-tailwind-colors-teal-200);
  --color-teal-300: var(--ds-tailwind-colors-teal-300);
  --color-teal-400: var(--ds-tailwind-colors-teal-400);
  --color-teal-500: var(--ds-tailwind-colors-teal-500);
  --color-teal-600: var(--ds-tailwind-colors-teal-600);
  --color-teal-700: var(--ds-tailwind-colors-teal-700);
  --color-teal-800: var(--ds-tailwind-colors-teal-800);
  --color-teal-900: var(--ds-tailwind-colors-teal-900);
  --color-teal-950: var(--ds-tailwind-colors-teal-950);

  /* Cyan */
  --color-cyan-50: var(--ds-tailwind-colors-cyan-50);
  --color-cyan-100: var(--ds-tailwind-colors-cyan-100);
  --color-cyan-200: var(--ds-tailwind-colors-cyan-200);
  --color-cyan-300: var(--ds-tailwind-colors-cyan-300);
  --color-cyan-400: var(--ds-tailwind-colors-cyan-400);
  --color-cyan-500: var(--ds-tailwind-colors-cyan-500);
  --color-cyan-600: var(--ds-tailwind-colors-cyan-600);
  --color-cyan-700: var(--ds-tailwind-colors-cyan-700);
  --color-cyan-800: var(--ds-tailwind-colors-cyan-800);
  --color-cyan-900: var(--ds-tailwind-colors-cyan-900);
  --color-cyan-950: var(--ds-tailwind-colors-cyan-950);

  /* Sky */
  --color-sky-50: var(--ds-tailwind-colors-sky-50);
  --color-sky-100: var(--ds-tailwind-colors-sky-100);
  --color-sky-200: var(--ds-tailwind-colors-sky-200);
  --color-sky-300: var(--ds-tailwind-colors-sky-300);
  --color-sky-400: var(--ds-tailwind-colors-sky-400);
  --color-sky-500: var(--ds-tailwind-colors-sky-500);
  --color-sky-600: var(--ds-tailwind-colors-sky-600);
  --color-sky-700: var(--ds-tailwind-colors-sky-700);
  --color-sky-800: var(--ds-tailwind-colors-sky-800);
  --color-sky-900: var(--ds-tailwind-colors-sky-900);
  --color-sky-950: var(--ds-tailwind-colors-sky-950);

  /* Blue */
  --color-blue-50: var(--ds-tailwind-colors-blue-50);
  --color-blue-100: var(--ds-tailwind-colors-blue-100);
  --color-blue-200: var(--ds-tailwind-colors-blue-200);
  --color-blue-300: var(--ds-tailwind-colors-blue-300);
  --color-blue-400: var(--ds-tailwind-colors-blue-400);
  --color-blue-500: var(--ds-tailwind-colors-blue-500);
  --color-blue-600: var(--ds-tailwind-colors-blue-600);
  --color-blue-700: var(--ds-tailwind-colors-blue-700);
  --color-blue-800: var(--ds-tailwind-colors-blue-800);
  --color-blue-900: var(--ds-tailwind-colors-blue-900);
  --color-blue-950: var(--ds-tailwind-colors-blue-950);

  /* Indigo */
  --color-indigo-50: var(--ds-tailwind-colors-indigo-50);
  --color-indigo-100: var(--ds-tailwind-colors-indigo-100);
  --color-indigo-200: var(--ds-tailwind-colors-indigo-200);
  --color-indigo-300: var(--ds-tailwind-colors-indigo-300);
  --color-indigo-400: var(--ds-tailwind-colors-indigo-400);
  --color-indigo-500: var(--ds-tailwind-colors-indigo-500);
  --color-indigo-600: var(--ds-tailwind-colors-indigo-600);
  --color-indigo-700: var(--ds-tailwind-colors-indigo-700);
  --color-indigo-800: var(--ds-tailwind-colors-indigo-800);
  --color-indigo-900: var(--ds-tailwind-colors-indigo-900);
  --color-indigo-950: var(--ds-tailwind-colors-indigo-950);

  /* Violet */
  --color-violet-50: var(--ds-tailwind-colors-violet-50);
  --color-violet-100: var(--ds-tailwind-colors-violet-100);
  --color-violet-200: var(--ds-tailwind-colors-violet-200);
  --color-violet-300: var(--ds-tailwind-colors-violet-300);
  --color-violet-400: var(--ds-tailwind-colors-violet-400);
  --color-violet-500: var(--ds-tailwind-colors-violet-500);
  --color-violet-600: var(--ds-tailwind-colors-violet-600);
  --color-violet-700: var(--ds-tailwind-colors-violet-700);
  --color-violet-800: var(--ds-tailwind-colors-violet-800);
  --color-violet-900: var(--ds-tailwind-colors-violet-900);
  --color-violet-950: var(--ds-tailwind-colors-violet-950);

  /* Purple */
  --color-purple-50: var(--ds-tailwind-colors-purple-50);
  --color-purple-100: var(--ds-tailwind-colors-purple-100);
  --color-purple-200: var(--ds-tailwind-colors-purple-200);
  --color-purple-300: var(--ds-tailwind-colors-purple-300);
  --color-purple-400: var(--ds-tailwind-colors-purple-400);
  --color-purple-500: var(--ds-tailwind-colors-purple-500);
  --color-purple-600: var(--ds-tailwind-colors-purple-600);
  --color-purple-700: var(--ds-tailwind-colors-purple-700);
  --color-purple-800: var(--ds-tailwind-colors-purple-800);
  --color-purple-900: var(--ds-tailwind-colors-purple-900);
  --color-purple-950: var(--ds-tailwind-colors-purple-950);

  /* Fuchsia */
  --color-fuchsia-50: var(--ds-tailwind-colors-fuchsia-50);
  --color-fuchsia-100: var(--ds-tailwind-colors-fuchsia-100);
  --color-fuchsia-200: var(--ds-tailwind-colors-fuchsia-200);
  --color-fuchsia-300: var(--ds-tailwind-colors-fuchsia-300);
  --color-fuchsia-400: var(--ds-tailwind-colors-fuchsia-400);
  --color-fuchsia-500: var(--ds-tailwind-colors-fuchsia-500);
  --color-fuchsia-600: var(--ds-tailwind-colors-fuchsia-600);
  --color-fuchsia-700: var(--ds-tailwind-colors-fuchsia-700);
  --color-fuchsia-800: var(--ds-tailwind-colors-fuchsia-800);
  --color-fuchsia-900: var(--ds-tailwind-colors-fuchsia-900);
  --color-fuchsia-950: var(--ds-tailwind-colors-fuchsia-950);

  /* Pink */
  --color-pink-50: var(--ds-tailwind-colors-pink-50);
  --color-pink-100: var(--ds-tailwind-colors-pink-100);
  --color-pink-200: var(--ds-tailwind-colors-pink-200);
  --color-pink-300: var(--ds-tailwind-colors-pink-300);
  --color-pink-400: var(--ds-tailwind-colors-pink-400);
  --color-pink-500: var(--ds-tailwind-colors-pink-500);
  --color-pink-600: var(--ds-tailwind-colors-pink-600);
  --color-pink-700: var(--ds-tailwind-colors-pink-700);
  --color-pink-800: var(--ds-tailwind-colors-pink-800);
  --color-pink-900: var(--ds-tailwind-colors-pink-900);
  --color-pink-950: var(--ds-tailwind-colors-pink-950);

  /* Rose */
  --color-rose-50: var(--ds-tailwind-colors-rose-50);
  --color-rose-100: var(--ds-tailwind-colors-rose-100);
  --color-rose-200: var(--ds-tailwind-colors-rose-200);
  --color-rose-300: var(--ds-tailwind-colors-rose-300);
  --color-rose-400: var(--ds-tailwind-colors-rose-400);
  --color-rose-500: var(--ds-tailwind-colors-rose-500);
  --color-rose-600: var(--ds-tailwind-colors-rose-600);
  --color-rose-700: var(--ds-tailwind-colors-rose-700);
  --color-rose-800: var(--ds-tailwind-colors-rose-800);
  --color-rose-900: var(--ds-tailwind-colors-rose-900);
  --color-rose-950: var(--ds-tailwind-colors-rose-950);

  /* Alpha (semi-transparent overlays) */
  --color-alpha-5: var(--alpha-5);
  --color-alpha-10: var(--alpha-10);
  --color-alpha-20: var(--alpha-20);
  --color-alpha-30: var(--alpha-30);
  --color-alpha-40: var(--alpha-40);
  --color-alpha-50: var(--alpha-50);
  --color-alpha-60: var(--alpha-60);
  --color-alpha-70: var(--alpha-70);
  --color-alpha-80: var(--alpha-80);
  --color-alpha-90: var(--alpha-90);

  /* Shadow Colors */
  --color-shadow-2xs: var(--ds-shadow-2xs-color);
  --color-shadow-xs: var(--ds-shadow-xs-color);
  --color-shadow-sm-1: var(--ds-shadow-sm-1-color);
  --color-shadow-sm-2: var(--ds-shadow-sm-2-color);
  --color-shadow-md-1: var(--ds-shadow-md-1-color);
  --color-shadow-md-2: var(--ds-shadow-md-2-color);
  --color-shadow-lg-1: var(--ds-shadow-lg-1-color);
  --color-shadow-lg-2: var(--ds-shadow-lg-2-color);
  --color-shadow-xl-1: var(--ds-shadow-xl-1-color);
  --color-shadow-xl-2: var(--ds-shadow-xl-2-color);
  --color-shadow-2xl: var(--ds-shadow-2xl-color);
  --color-shadow-inset-2xs: var(--ds-inset-shadow-2xs-color);
  --color-shadow-inset-xs: var(--ds-inset-shadow-xs-color);
  --color-shadow-inset-sm: var(--ds-inset-shadow-sm-color);

  /* Drop Shadow Colors */
  --color-drop-shadow-xs: var(--ds-drop-shadow-xs-color);
  --color-drop-shadow-sm: var(--ds-drop-shadow-sm-color);
  --color-drop-shadow-md: var(--ds-drop-shadow-md-color);
  --color-drop-shadow-lg: var(--ds-drop-shadow-lg-color);
  --color-drop-shadow-xl: var(--ds-drop-shadow-xl-color);
  --color-drop-shadow-2xl: var(--ds-drop-shadow-2xl-color);

  /* Breakpoints for responsive utilities
     Reference: https://tailwindcss.com/docs/theme#screens */
  --screen-sm: var(--ds-breakpoint-sm); /* 640px */
  --screen-md: var(--ds-breakpoint-md); /* 768px */
  --screen-lg: var(--ds-breakpoint-lg); /* 1024px */
  --screen-xl: var(--ds-breakpoint-xl); /* 1280px */
  --screen-2xl: var(--ds-breakpoint-2xl); /* 1536px */

  /* Border radius utilities
     Reference: https://tailwindcss.com/docs/border-radius */
  --radius-none: var(--ds-border-radius-rounded-none); /* 0px */
  --radius-xs: var(--ds-border-radius-rounded-xs); /* 2px */
  --radius-sm: var(--ds-border-radius-rounded-sm); /* 6px */
  --radius-md: var(--ds-border-radius-rounded-md); /* 8px */
  --radius-lg: var(--ds-border-radius-rounded-lg); /* 10px */
  --radius-xl: var(--ds-border-radius-rounded-xl); /* 14px */
  --radius-2xl: var(--ds-border-radius-rounded-2xl); /* 16px */
  --radius-3xl: var(--ds-border-radius-rounded-3xl); /* 24px */
  --radius-4xl: var(--ds-border-radius-rounded-4xl); /* 32px */
  --radius-full: var(--ds-border-radius-rounded-full); /* 9999px */

  /* Max width utilities
     Reference: https://tailwindcss.com/docs/max-width */
  --max-w-3xs: var(--ds-container-3xs); /* 256px */
  --max-w-2xs: var(--ds-container-2xs); /* 288px */
  --max-w-xs: var(--ds-container-xs); /* 320px */
  --max-w-sm: var(--ds-container-sm); /* 384px */
  --max-w-md: var(--ds-container-md); /* 448px */
  --max-w-lg: var(--ds-container-lg); /* 512px */
  --max-w-xl: var(--ds-container-xl); /* 576px */
  --max-w-2xl: var(--ds-container-2xl); /* 672px */
  --max-w-3xl: var(--ds-container-3xl); /* 768px */
  --max-w-4xl: var(--ds-container-4xl); /* 896px */
  --max-w-5xl: var(--ds-container-5xl); /* 1024px */
  --max-w-6xl: var(--ds-container-6xl); /* 1152px */
  --max-w-7xl: var(--ds-container-7xl); /* 1280px */

  /* Blur effects
     Reference: https://tailwindcss.com/docs/blur */
  --blur-xs: var(--ds-blur-xs); /* 4px */
  --blur-sm: var(--ds-blur-sm); /* 8px */
  --blur-md: var(--ds-blur-md); /* 12px */
  --blur-lg: var(--ds-blur-lg); /* 16px */
  --blur-xl: var(--ds-blur-xl); /* 24px */
  --blur-2xl: var(--ds-blur-2xl); /* 40px */
  --blur-3xl: var(--ds-blur-3xl); /* 64px */

  /* Line Heights
     Reference: https://tailwindcss.com/docs/line-height */
  --leading-1: var(--ds-line-height-leading-1); /* 4px */
  --leading-2: var(--ds-line-height-leading-2); /* 8px */
  --leading-3: var(--ds-line-height-leading-3); /* 12px */
  --leading-4: var(--ds-line-height-leading-4); /* 16px */
  --leading-5: var(--ds-line-height-leading-5); /* 20px */
  --leading-6: var(--ds-line-height-leading-6); /* 24px */
  --leading-7: var(--ds-line-height-leading-7); /* 28px */
  --leading-8: var(--ds-line-height-leading-8); /* 32px */
  --leading-9: var(--ds-line-height-leading-9); /* 36px */
  --leading-10: var(--ds-line-height-leading-10); /* 40px */
  --leading-11: var(--ds-line-height-leading-11); /* 44px */
  --leading-12: var(--ds-line-height-leading-12); /* 48px */
  --leading-13: var(--ds-line-height-leading-13); /* 52px */
  --leading-14: var(--ds-line-height-leading-14); /* 56px */
  --leading-15: var(--ds-line-height-leading-15); /* 60px */
  --leading-16: var(--ds-line-height-leading-16); /* 64px */
  --leading-17: var(--ds-line-height-leading-17); /* 68px */
  --leading-18: var(--ds-line-height-leading-18); /* 72px */
  --leading-19: var(--ds-line-height-leading-19); /* 76px */
  --leading-20: var(--ds-line-height-leading-20); /* 80px */

  /* Font Weights
     Reference: https://tailwindcss.com/docs/font-weight */
  --font-weight-extralight: var(--ds-font-weight-extralight); /* 100 */
  --font-weight-light: var(--ds-font-weight-light); /* 200 */
  --font-weight-normal: var(--ds-font-weight-normal); /* 300 */
  --font-weight-medium: var(--ds-font-weight-medium); /* 400 */
  --font-weight-semibold: var(--ds-font-weight-semibold); /* 500 */
  --font-weight-bold: var(--ds-font-weight-bold); /* 600 */
  --font-weight-extrabold: var(--ds-font-weight-extrabold); /* 700 */
  --font-weight-black: var(--ds-font-weight-black); /* 800 */
}

@layer base {
  body {
    font-family: var(--font-sans);
    color: var(--color-foreground);
  }
  body.dark {
    color: var(--ds-colors-foreground-dark);
  }
}

@layer components {
  /* Text font size with line height
     Reference: https://tailwindcss.com/docs/font-size */
  .text-xs {
    font-size: var(--ds-text-xs-font-size); /* 12px */
    line-height: var(--ds-text-xs-line-height); /* 16px */
  }
  .text-sm {
    font-size: var(--ds-text-sm-font-size); /* 14px */
    line-height: var(--ds-text-sm-line-height); /* 20px */
  }
  .text-base {
    font-size: var(--ds-text-base-font-size); /* 16px */
    line-height: var(--ds-text-base-line-height); /* 24px */
  }
  .text-lg {
    font-size: var(--ds-text-lg-font-size); /* 18px */
    line-height: var(--ds-text-lg-line-height); /* 28px */
  }
  .text-xl {
    font-size: var(--ds-text-xl-font-size); /* 20px */
    line-height: var(--ds-text-xl-line-height); /* 28px */
  }
  .text-2xl {
    font-size: var(--ds-text-2xl-font-size); /* 24px */
    line-height: var(--ds-text-2xl-line-height); /* 32px */
  }
  .text-3xl {
    font-size: var(--ds-text-3xl-font-size); /* 30px */
    line-height: var(--ds-text-3xl-line-height); /* 36px */
  }
  .text-4xl {
    font-size: var(--ds-text-4xl-font-size); /* 36px */
    line-height: var(--ds-text-4xl-line-height); /* 40px */
  }
  .text-5xl {
    font-size: var(--ds-text-5xl-font-size); /* 48px */
    line-height: var(--ds-text-5xl-line-height); /* 48px */
  }
  .text-6xl {
    font-size: var(--ds-text-6xl-font-size); /* 60px */
    line-height: var(--ds-text-6xl-line-height); /* 60px */
  }
  .text-7xl {
    font-size: var(--ds-text-7xl-font-size); /* 72px */
    line-height: var(--ds-text-7xl-line-height); /* 72px */
  }
  .text-8xl {
    font-size: var(--ds-text-8xl-font-size); /* 96px */
    line-height: var(--ds-text-8xl-line-height); /* 96px */
  }
  .text-9xl {
    font-size: var(--ds-text-9xl-font-size); /* 128px */
    line-height: var(--ds-text-9xl-line-height); /* 128px */
  }

  /* Shadow and Drop Shadow Utilities
     Reference: https://tailwindcss.com/docs/box-shadow
     Reference: https://tailwindcss.com/docs/drop-shadow */

  /* Drop Shadow Utilities */
  .drop-shadow-xs {
    filter: drop-shadow(
      var(--ds-drop-shadow-xs-offset-x) var(--ds-drop-shadow-xs-offset-y)
        var(--ds-drop-shadow-xs-blur-radius)
        var(--ds-drop-shadow-xs-spread-radius) var(--color-drop-shadow-xs)
    ); /* drop-shadow: 0px 1px 1px 0px {color}; */
  }
  .drop-shadow-sm {
    filter: drop-shadow(
      var(--ds-drop-shadow-sm-offset-x) var(--ds-drop-shadow-sm-offset-y)
        var(--ds-drop-shadow-sm-blur-radius)
        var(--ds-drop-shadow-sm-spread-radius) var(--color-drop-shadow-sm)
    ); /* drop-shadow: 0px 1px 2px 0px {color}; */
  }
  .drop-shadow-md {
    filter: drop-shadow(
      var(--ds-drop-shadow-md-offset-x) var(--ds-drop-shadow-md-offset-y)
        var(--ds-drop-shadow-md-blur-radius)
        var(--ds-drop-shadow-md-spread-radius) var(--color-drop-shadow-md)
    ); /* drop-shadow: 0px 3px 3px 0px {color}; */
  }
  .drop-shadow-lg {
    filter: drop-shadow(
      var(--ds-drop-shadow-lg-offset-x) var(--ds-drop-shadow-lg-offset-y)
        var(--ds-drop-shadow-lg-blur-radius)
        var(--ds-drop-shadow-lg-spread-radius) var(--color-drop-shadow-lg)
    ); /* drop-shadow: 0px 4px 4px 0px {color}; */
  }
  .drop-shadow-xl {
    filter: drop-shadow(
      var(--ds-drop-shadow-xl-offset-x) var(--ds-drop-shadow-xl-offset-y)
        var(--ds-drop-shadow-xl-blur-radius)
        var(--ds-drop-shadow-xl-spread-radius) var(--color-drop-shadow-xl)
    ); /* drop-shadow: 0px 9px 7px 0px {color}; */
  }
  .drop-shadow-2xl {
    filter: drop-shadow(
      var(--ds-drop-shadow-2xl-offset-x) var(--ds-drop-shadow-2xl-offset-y)
        var(--ds-drop-shadow-2xl-blur-radius)
        var(--ds-drop-shadow-2xl-spread-radius) var(--color-drop-shadow-2xl)
    ); /* drop-shadow: 0px 25px 25px 0px {color}; */
  }
  .drop-shadow-none {
    filter: none;
  }
}

/* Box Shadow utilities - defined as @utility for variant support (focus-visible:, hover:, data-[state]:, etc.)
   Organized by: outer shadows (size ascending) → inset shadows → none → focus ring shadows */

/* Outer shadows - smallest to largest */
@utility shadow-2xs {
  box-shadow: var(--ds-shadow-2xs-offset-x) var(--ds-shadow-2xs-offset-y)
    var(--ds-shadow-2xs-blur-radius) var(--ds-shadow-2xs-spread-radius)
    var(--color-shadow-2xs);
}

@utility shadow-xs {
  box-shadow: var(--ds-shadow-xs-offset-x) var(--ds-shadow-xs-offset-y)
    var(--ds-shadow-xs-blur-radius) var(--ds-shadow-xs-spread-radius)
    var(--color-shadow-xs);
}

@utility shadow-sm {
  box-shadow:
    var(--ds-shadow-sm-1-offset-x) var(--ds-shadow-sm-1-offset-y)
      var(--ds-shadow-sm-1-blur-radius) var(--ds-shadow-sm-1-spread-radius)
      var(--color-shadow-sm-1),
    var(--ds-shadow-sm-2-offset-x) var(--ds-shadow-sm-2-offset-y)
      var(--ds-shadow-sm-2-blur-radius) var(--ds-shadow-sm-2-spread-radius)
      var(--color-shadow-sm-2);
}

@utility shadow-md {
  box-shadow:
    var(--ds-shadow-md-1-offset-x) var(--ds-shadow-md-1-offset-y)
      var(--ds-shadow-md-1-blur-radius) var(--ds-shadow-md-1-spread-radius)
      var(--color-shadow-md-1),
    var(--ds-shadow-md-2-offset-x) var(--ds-shadow-md-2-offset-y)
      var(--ds-shadow-md-2-blur-radius) var(--ds-shadow-md-2-spread-radius)
      var(--color-shadow-md-2);
}

@utility shadow-lg {
  box-shadow:
    var(--ds-shadow-lg-1-offset-x) var(--ds-shadow-lg-1-offset-y)
      var(--ds-shadow-lg-1-blur-radius) var(--ds-shadow-lg-1-spread-radius)
      var(--color-shadow-lg-1),
    var(--ds-shadow-lg-2-offset-x) var(--ds-shadow-lg-2-offset-y)
      var(--ds-shadow-lg-2-blur-radius) var(--ds-shadow-lg-2-spread-radius)
      var(--color-shadow-lg-2);
}

@utility shadow-xl {
  box-shadow:
    var(--ds-shadow-xl-1-offset-x) var(--ds-shadow-xl-1-offset-y)
      var(--ds-shadow-xl-1-blur-radius) var(--ds-shadow-xl-1-spread-radius)
      var(--color-shadow-xl-1),
    var(--ds-shadow-xl-2-offset-x) var(--ds-shadow-xl-2-offset-y)
      var(--ds-shadow-xl-2-blur-radius) var(--ds-shadow-xl-2-spread-radius)
      var(--color-shadow-xl-2);
}

@utility shadow-2xl {
  box-shadow: var(--ds-shadow-2xl-offset-x) var(--ds-shadow-2xl-offset-y)
    var(--ds-shadow-2xl-blur-radius) var(--ds-shadow-2xl-spread-radius)
    var(--color-shadow-2xl);
}

/* Inset shadows - smallest to largest */
@utility shadow-inner-2xs {
  box-shadow: inset var(--ds-inset-shadow-2xs-offset-x)
    var(--ds-inset-shadow-2xs-offset-y) var(--ds-inset-shadow-2xs-blur-radius)
    var(--ds-inset-shadow-2xs-spread-radius) var(--color-shadow-inset-2xs);
}

@utility shadow-inner-xs {
  box-shadow: inset var(--ds-inset-shadow-xs-offset-x)
    var(--ds-inset-shadow-xs-offset-y) var(--ds-inset-shadow-xs-blur-radius)
    var(--ds-inset-shadow-xs-spread-radius) var(--color-shadow-inset-xs);
}

@utility shadow-inner-sm {
  box-shadow: inset var(--ds-inset-shadow-sm-offset-x)
    var(--ds-inset-shadow-sm-offset-y) var(--ds-inset-shadow-sm-blur-radius)
    var(--ds-inset-shadow-sm-spread-radius) var(--color-shadow-inset-sm);
}

/* Reset shadow */
@utility shadow-none {
  box-shadow: none;
}

/* Focus ring shadows - for accessibility focus indicators */
@utility shadow-default {
  box-shadow: 0px 0px 0px var(--ds-spread-xs) var(--color-outline);
}

@utility shadow-destructive {
  box-shadow: 0px 0px 0px var(--ds-spread-xs) var(--destructive-20);
}

/* Grid pin pulse animation — radiating box-shadow ring for map pin emphasis */
@keyframes grid-pin-pulse {
  0% {
    box-shadow: 0 0 0 0
      color-mix(in oklch, var(--grid-pin-pulse-color) 30%, transparent);
  }
  40% {
    box-shadow: 0 0 0 15px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@utility animate-grid-pin-pulse {
  animation: grid-pin-pulse 3.125s ease-out infinite;
}

/* Pop-in — a snappy, reusable entrance: the element scales up from 0.5 with a
   soft ease-out-back overshoot and a quick fade, once, when it mounts.
   Set the growth point at the call site with an `origin-*` utility (e.g.
   `origin-bottom` to grow out of an anchor); defaults to center otherwise.
   ease-out-back gives the lively settle; a single 300ms play that then rests.
   animation-fill-mode holds the small/hidden start and resting end so the
   element never flashes; reduced-motion users get it at rest. */
@keyframes pop-in {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@utility animate-pop-in {
  animation: pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Scrollbar styles */
@utility scrollbar {
  scrollbar-width: auto;
  scrollbar-color: var(--border) transparent;
}

/* Responsive Section Padding utilities (xs scale)
   Mobile: 0px → Tablet (lg): 16px → Desktop (xl): 24px
   Reference: packages/tokens/src/core-tokens/css/_spacing.css */

@utility px-section-xs {
  padding-left: var(--ds-section-padding-x-xs);
  padding-right: var(--ds-section-padding-x-xs);
}

@utility pl-section-xs {
  padding-left: var(--ds-section-padding-x-xs);
}

@utility pr-section-xs {
  padding-right: var(--ds-section-padding-x-xs);
}

/* Responsive Section Padding utilities (sm scale)
   Mobile: 16px → Desktop (xl): 24px
   Reference: packages/tokens/src/core-tokens/css/_spacing.css */

@utility px-section-sm {
  padding-left: var(--ds-section-padding-x-sm);
  padding-right: var(--ds-section-padding-x-sm);
}

@utility py-section-sm {
  padding-top: var(--ds-section-padding-y-sm);
  padding-bottom: var(--ds-section-padding-y-sm);
}

@utility pt-section-sm {
  padding-top: var(--ds-section-padding-y-sm);
}

@utility pb-section-sm {
  padding-bottom: var(--ds-section-padding-y-sm);
}

@utility pl-section-sm {
  padding-left: var(--ds-section-padding-x-sm);
}

@utility pr-section-sm {
  padding-right: var(--ds-section-padding-x-sm);
}

@utility p-section-sm {
  padding: var(--ds-section-padding-y-sm) var(--ds-section-padding-x-sm);
}

/* Responsive Section Padding utilities (md scale)
   Mobile: 16px → Tablet (lg): 24px → Desktop (xl): 32px
   Reference: packages/tokens/src/core-tokens/css/_spacing.css */

@utility px-section-md {
  padding-left: var(--ds-section-padding-x-md);
  padding-right: var(--ds-section-padding-x-md);
}

@utility py-section-md {
  padding-top: var(--ds-section-padding-y-md);
  padding-bottom: var(--ds-section-padding-y-md);
}

@utility pt-section-md {
  padding-top: var(--ds-section-padding-y-md);
}

@utility pb-section-md {
  padding-bottom: var(--ds-section-padding-y-md);
}

@utility pl-section-md {
  padding-left: var(--ds-section-padding-x-md);
}

@utility pr-section-md {
  padding-right: var(--ds-section-padding-x-md);
}

@utility p-section-md {
  padding: var(--ds-section-padding-y-md) var(--ds-section-padding-x-md);
}

/* Content area padding — fixed 24px (not responsive).
   Mirrors Figma "showPaddingOnDesktop". TODO: replace with a proper token once available. */

@utility px-content {
  padding-left: 24px;
  padding-right: 24px;
}

@utility py-content {
  padding-top: 24px;
  padding-bottom: 24px;
}

@utility p-content {
  padding: 24px;
}