@import '@mantine/core/styles.css';
@import 'tailwindcss';
@source "../src";

@theme {
  /* =========================================
     FONT FAMILY MAPPING (Mantine -> Tailwind)
     ========================================= */
  --base-font-size: 13px;
  --font-sans: var(--mantine-font-family);
  --font-mono: var(--mantine-font-family-monospace);

  /* =========================================
     1. COLORS (Strictly mapped to Mantine 0-9)
     ========================================= */
  --color-brand-50: var(--mantine-color-brand-0);
  --color-brand-100: var(--mantine-color-brand-1);
  --color-brand-200: var(--mantine-color-brand-2);
  --color-brand-300: var(--mantine-color-brand-3);
  --color-brand-400: var(--mantine-color-brand-4);
  --color-brand-500: var(--mantine-color-brand-5);
  --color-brand-600: var(--mantine-color-brand-6);
  --color-brand-700: var(--mantine-color-brand-7);
  --color-brand-800: var(--mantine-color-brand-8);
  --color-brand-900: var(--mantine-color-brand-9);

  --color-error-50: var(--mantine-color-error-0);
  --color-error-100: var(--mantine-color-error-1);
  --color-error-200: var(--mantine-color-error-2);
  --color-error-300: var(--mantine-color-error-3);
  --color-error-400: var(--mantine-color-error-4);
  --color-error-500: var(--mantine-color-error-5);
  --color-error-600: var(--mantine-color-error-6);
  --color-error-700: var(--mantine-color-error-7);
  --color-error-800: var(--mantine-color-error-8);
  --color-error-900: var(--mantine-color-error-9);

  --color-warning-50: var(--mantine-color-warning-0);
  --color-warning-100: var(--mantine-color-warning-1);
  --color-warning-200: var(--mantine-color-warning-2);
  --color-warning-300: var(--mantine-color-warning-3);
  --color-warning-400: var(--mantine-color-warning-4);
  --color-warning-500: var(--mantine-color-warning-5);
  --color-warning-600: var(--mantine-color-warning-6);
  --color-warning-700: var(--mantine-color-warning-7);
  --color-warning-800: var(--mantine-color-warning-8);
  --color-warning-900: var(--mantine-color-warning-9);

  --color-success-50: var(--mantine-color-success-0);
  --color-success-100: var(--mantine-color-success-1);
  --color-success-200: var(--mantine-color-success-2);
  --color-success-300: var(--mantine-color-success-3);
  --color-success-400: var(--mantine-color-success-4);
  --color-success-500: var(--mantine-color-success-5);
  --color-success-600: var(--mantine-color-success-6);
  --color-success-700: var(--mantine-color-success-7);
  --color-success-800: var(--mantine-color-success-8);
  --color-success-900: var(--mantine-color-success-9);

  --color-info-50: var(--mantine-color-info-0);
  --color-info-100: var(--mantine-color-info-1);
  --color-info-200: var(--mantine-color-info-2);
  --color-info-300: var(--mantine-color-info-3);
  --color-info-400: var(--mantine-color-info-4);
  --color-info-500: var(--mantine-color-info-5);
  --color-info-600: var(--mantine-color-info-6);
  --color-info-700: var(--mantine-color-info-7);
  --color-info-800: var(--mantine-color-info-8);
  --color-info-900: var(--mantine-color-info-9);

  /* =========================================
     2. SPACING & CONTAINERS
     ========================================= */
  --spacing: 0.25rem;

  /* Core mapped to Mantine */
  --spacing-xs: var(--mantine-spacing-xs);
  --spacing-sm: var(--mantine-spacing-sm);
  --spacing-md: var(--mantine-spacing-md);
  --spacing-lg: var(--mantine-spacing-lg);
  --spacing-xl: var(--mantine-spacing-xl);

  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --container-3xs: 16rem;
  --container-2xs: 18rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

  /* =========================================
     3. TYPOGRAPHY
     ========================================= */
  /* Core text sizes mapped to Mantine, extended kept static */
  --text-xs: var(--mantine-font-size-xs);
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: var(--mantine-font-size-sm);
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: var(--mantine-font-size-md);
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: var(--mantine-font-size-lg);
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: var(--mantine-font-size-xl);
  --text-xl--line-height: calc(1.75 / 1.25);

  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --text-8xl: 6rem;
  --text-8xl--line-height: 1;
  --text-9xl: 8rem;
  --text-9xl--line-height: 1;

  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* =========================================
     4. RADIUS
     ========================================= */
  --radius-xs: var(--mantine-radius-xs);
  --radius-sm: var(--mantine-radius-sm);
  --radius-md: var(--mantine-radius-md);
  --radius-lg: var(--mantine-radius-lg);
  --radius-xl: var(--mantine-radius-xl);
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;

  /* =========================================
     5. SHADOWS & BLURS
     ========================================= */
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: var(--mantine-shadow-xs);
  --shadow-sm: var(--mantine-shadow-sm);
  --shadow-md: var(--mantine-shadow-md);
  --shadow-lg: var(--mantine-shadow-lg);
  --shadow-xl: var(--mantine-shadow-xl);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);

  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);

  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
  --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
  --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
  --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);

  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  /* =========================================
     6. MISCELLANEOUS (Aspect, Anim, Perspective)
     ========================================= */
  --perspective-dramatic: 100px;
  --perspective-near: 300px;
  --perspective-normal: 500px;
  --perspective-midrange: 800px;
  --perspective-distant: 1200px;

  --aspect-video: 16 / 9;

  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce: bounce 1s infinite;

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes ping {
    75%,
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }
  @keyframes pulse {
    50% {
      opacity: 0.5;
    }
  }
  @keyframes bounce {
    0%,
    100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: none;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
}

/* =========================================
   BASE RESETS
   ========================================= */

@layer base {
  body {
    font-size: var(--base-font-size);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}