/**
 * Juo design system — Tailwind v4 theme.
 *
 * Replaces Tailwind v4's default color, spacing, radius, and font-size scales
 * with the Juo design tokens. Import after tailwindcss and design-tokens.css:
 *
 *   @import "tailwindcss";
 *   @import "@juo/customer-ui/design-tokens.css";
 *   @import "@juo/customer-ui/tailwind-v4.css";
 *
 * `@theme inline` maps utilities directly to CSS variables without creating
 * duplicate Tailwind-owned CSS variables, keeping the cascade intact.
 */

/* Clear Tailwind v4 default scales */
@theme {
  --color-*: initial;
  --spacing-*: initial;
  --radius-*: initial;
  --text-*: initial;
}

@theme inline {
  /* ── Colors ──────────────────────────────────────────────────────────────── */

  --color-white: var(--white);
  --color-black: var(--black);

  --color-tint-25: var(--tint-25);
  --color-tint-50: var(--tint-50);
  --color-tint-75: var(--tint-75);
  --color-tint-100: var(--tint-100);
  --color-tint-200: var(--tint-200);
  --color-tint-300: var(--tint-300);
  --color-tint-400: var(--tint-400);
  --color-tint-500: var(--tint-500);
  --color-tint-600: var(--tint-600);
  --color-tint-700: var(--tint-700);
  --color-tint-800: var(--tint-800);
  --color-tint-900: var(--tint-900);

  --color-success-25: var(--success-25);
  --color-success-50: var(--success-50);
  --color-success-100: var(--success-100);
  --color-success-200: var(--success-200);
  --color-success-300: var(--success-300);
  --color-success-400: var(--success-400);
  --color-success-500: var(--success-500);
  --color-success-600: var(--success-600);
  --color-success-700: var(--success-700);
  --color-success-800: var(--success-800);
  --color-success-900: var(--success-900);

  --color-warning-25: var(--warning-25);
  --color-warning-50: var(--warning-50);
  --color-warning-100: var(--warning-100);
  --color-warning-200: var(--warning-200);
  --color-warning-300: var(--warning-300);
  --color-warning-400: var(--warning-400);
  --color-warning-500: var(--warning-500);
  --color-warning-600: var(--warning-600);
  --color-warning-700: var(--warning-700);
  --color-warning-800: var(--warning-800);
  --color-warning-900: var(--warning-900);

  --color-error-25: var(--error-25);
  --color-error-50: var(--error-50);
  --color-error-100: var(--error-100);
  --color-error-200: var(--error-200);
  --color-error-300: var(--error-300);
  --color-error-400: var(--error-400);
  --color-error-500: var(--error-500);
  --color-error-600: var(--error-600);
  --color-error-700: var(--error-700);
  --color-error-800: var(--error-800);
  --color-error-900: var(--error-900);

  --color-info-25: var(--info-25);
  --color-info-50: var(--info-50);
  --color-info-100: var(--info-100);
  --color-info-200: var(--info-200);
  --color-info-300: var(--info-300);
  --color-info-400: var(--info-400);
  --color-info-500: var(--info-500);
  --color-info-600: var(--info-600);
  --color-info-700: var(--info-700);
  --color-info-800: var(--info-800);
  --color-info-900: var(--info-900);

  --color-callout-25: var(--callout-25);
  --color-callout-50: var(--callout-50);
  --color-callout-100: var(--callout-100);
  --color-callout-200: var(--callout-200);
  --color-callout-300: var(--callout-300);
  --color-callout-400: var(--callout-400);
  --color-callout-500: var(--callout-500);
  --color-callout-600: var(--callout-600);
  --color-callout-700: var(--callout-700);
  --color-callout-800: var(--callout-800);
  --color-callout-900: var(--callout-900);

  --color-accent-white: var(--accent-white);
  --color-accent-black: var(--accent-black);
  --color-accent-25: var(--accent-25);
  --color-accent-50: var(--accent-50);
  --color-accent-100: var(--accent-100);
  --color-accent-200: var(--accent-200);
  --color-accent-300: var(--accent-300);
  --color-accent-400: var(--accent-400);
  --color-accent-500: var(--accent-500);
  --color-accent-600: var(--accent-600);
  --color-accent-700: var(--accent-700);
  --color-accent-800: var(--accent-800);
  --color-accent-900: var(--accent-900);
  --color-accent-contrast: var(--accent-contrast);

  --color-secondary-white: var(--secondary-white);
  --color-secondary-black: var(--secondary-black);
  --color-secondary-25: var(--secondary-25);
  --color-secondary-50: var(--secondary-50);
  --color-secondary-100: var(--secondary-100);
  --color-secondary-200: var(--secondary-200);
  --color-secondary-300: var(--secondary-300);
  --color-secondary-400: var(--secondary-400);
  --color-secondary-500: var(--secondary-500);
  --color-secondary-600: var(--secondary-600);
  --color-secondary-700: var(--secondary-700);
  --color-secondary-800: var(--secondary-800);
  --color-secondary-900: var(--secondary-900);

  /* Neutral — overrides Tailwind's default neutral; aliases the tint palette
     so it inherits warm/cold/custom tint behavior for free. */
  --color-neutral-0: var(--color-neutral-0);
  --color-neutral-25: var(--color-neutral-25);
  --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-950: var(--color-neutral-950);
  --color-neutral-1000: var(--color-neutral-1000);

  /* ── Spacing — p-8, gap-16, m-24, etc. ──────────────────────────────────── */

  --spacing-0: var(--space-0);
  --spacing-2: var(--space-2);
  --spacing-4: var(--space-4);
  --spacing-6: var(--space-6);
  --spacing-8: var(--space-8);
  --spacing-12: var(--space-12);
  --spacing-16: var(--space-16);
  --spacing-24: var(--space-24);
  --spacing-32: var(--space-32);
  --spacing-36: var(--space-36);
  --spacing-48: var(--space-48);

  /* ── Border radius — rounded-0 … rounded-5, rounded-card-*, etc. ─────────── */

  --radius-0: var(--radius-0);
  --radius-1: var(--radius-1);
  --radius-2: var(--radius-2);
  --radius-3: var(--radius-3);
  --radius-4: var(--radius-4);
  --radius-5: var(--radius-5);
  --radius-full: var(--radius-full);
  --radius-card-1: var(--card-radius-1);
  --radius-card-2: var(--card-radius-2);
  --radius-card-3: var(--card-radius-3);
  --radius-thumbnail: var(--thumbnail-rounding);
  --radius-buttons: var(--buttons-rounding);

  /* ── Font sizes — text-12 … text-32 ─────────────────────────────────────── */

  --text-12: var(--font-size-12);
  --text-14: var(--font-size-14);
  --text-16: var(--font-size-16);
  --text-20: var(--font-size-20);
  --text-24: var(--font-size-24);
  --text-32: var(--font-size-32);
}