@import './base.css';

@layer payload-default, payload;

@layer theme {
  :root {
    --font-mono: 'Geist Mono', Consolas, Monaco, monospace;
    --font-sans: 'Inter', sans-serif;
    --font-geist: 'Geist', sans-serif;
  }
}

@layer payload-default {
  :root {
    --style-radius-s: 4px !important;
    --style-radius-m: 6px !important;
    --style-radius-l: 8 px !important;
  }
  
  .btn {
    border-radius: 4px !important;
  }

  .table {
    display: block !important;
  }

  textarea:focus-visible {
    outline: none !important;
  }
}

@layer payload-default {
  :root {
    /* Base grayscale colors using modern HSL values */
    --color-base-0: hsl(0 0% 100%);
    --color-base-50: hsl(0 0% 98%);
    --color-base-100: hsl(0 0% 96%);
    --color-base-150: hsl(0 0% 93%);
    --color-base-200: hsl(0 0% 90%);
    --color-base-250: hsl(0 0% 85%);
    --color-base-300: hsl(0 0% 80%);
    --color-base-350: hsl(0 0% 75%);
    --color-base-400: hsl(0 0% 70%);
    --color-base-450: hsl(0 0% 65%);
    --color-base-500: hsl(0 0% 60%);
    --color-base-550: hsl(0 0% 50%);
    --color-base-600: hsl(0 0% 40%);
    --color-base-650: hsl(0 0% 35%);
    --color-base-700: hsl(0 0% 30%);
    --color-base-750: hsl(0 0% 25%);
    --color-base-800: hsl(0 0% 20%);
    --color-base-850: hsl(0 0% 15%);
    --color-base-900: hsl(0 0% 10%);
    --color-base-950: hsl(0 0% 5%);
    --color-base-1000: hsl(0 0% 0%);

    /* Success/Blue colors - based on Shadcn blue */
    --color-success-50: hsl(213 100% 98%);
    --color-success-100: hsl(214 95% 93%);
    --color-success-150: hsl(213 97% 87%);
    --color-success-200: hsl(213 94% 81%);
    --color-success-250: hsl(212 96% 75%);
    --color-success-300: hsl(213 94% 68%);
    --color-success-350: hsl(217 91% 60%);
    --color-success-400: hsl(221 83% 53%);
    --color-success-450: hsl(224 76% 48%);
    --color-success-500: hsl(226 71% 40%);
    --color-success-550: hsl(228 74% 35%);
    --color-success-600: hsl(230 73% 30%);
    --color-success-650: hsl(231 69% 26%);
    --color-success-700: hsl(232 70% 22%);
    --color-success-750: hsl(234 62% 18%);
    --color-success-800: hsl(235 57% 14%);
    --color-success-850: hsl(235 54% 11%);
    --color-success-900: hsl(235 47% 8%);
    --color-success-950: hsl(233 40% 4%);

    /* Error colors - based on Shadcn destructive/red */
    --color-error-50: hsl(0 100% 98%);
    --color-error-100: hsl(0 100% 95%);
    --color-error-150: hsl(0 100% 92%);
    --color-error-200: hsl(0 97% 88%);
    --color-error-250: hsl(0 95% 82%);
    --color-error-300: hsl(0 94% 76%);
    --color-error-350: hsl(0 94% 70%);
    --color-error-400: hsl(0 91% 64%);
    --color-error-450: hsl(0 87% 59%);
    --color-error-500: hsl(0 84% 60%);
    --color-error-550: hsl(0 72% 51%);
    --color-error-600: hsl(0 74% 45%);
    --color-error-650: hsl(0 70% 40%);
    --color-error-700: hsl(0 63% 31%);
    --color-error-750: hsl(0 65% 28%);
    --color-error-800: hsl(0 66% 24%);
    --color-error-850: hsl(0 63% 20%);
    --color-error-900: hsl(0 60% 14%);
    --color-error-950: hsl(0 55% 10%);

    /* Warning colors - based on Shadcn amber */
    --color-warning-50: hsl(39 100% 97%);
    --color-warning-100: hsl(43 100% 94%);
    --color-warning-150: hsl(43 95% 90%);
    --color-warning-200: hsl(43 90% 84%);
    --color-warning-250: hsl(43 90% 78%);
    --color-warning-300: hsl(43 90% 72%);
    --color-warning-350: hsl(38 89% 62%);
    --color-warning-400: hsl(32 90% 58%);
    --color-warning-450: hsl(26 90% 55%);
    --color-warning-500: hsl(23 90% 50%);
    --color-warning-550: hsl(21 83% 46%);
    --color-warning-600: hsl(22 78% 40%);
    --color-warning-650: hsl(22 72% 35%);
    --color-warning-700: hsl(22 65% 30%);
    --color-warning-750: hsl(23 60% 25%);
    --color-warning-800: hsl(24 54% 20%);
    --color-warning-850: hsl(25 47% 15%);
    --color-warning-900: hsl(25 43% 13%);
    --color-warning-950: hsl(28 33% 8%);

    /* Blue colors - same as success for consistency */
    --color-blue-50: var(--color-success-50);
    --color-blue-100: var(--color-success-100);
    --color-blue-150: var(--color-success-150);
    --color-blue-200: var(--color-success-200);
    --color-blue-250: var(--color-success-250);
    --color-blue-300: var(--color-success-300);
    --color-blue-350: var(--color-success-350);
    --color-blue-400: var(--color-success-400);
    --color-blue-450: var(--color-success-450);
    --color-blue-500: var(--color-success-500);
    --color-blue-550: var(--color-success-550);
    --color-blue-600: var(--color-success-600);
    --color-blue-650: var(--color-success-650);
    --color-blue-700: var(--color-success-700);
    --color-blue-750: var(--color-success-750);
    --color-blue-800: var(--color-success-800);
    --color-blue-850: var(--color-success-850);
    --color-blue-900: var(--color-success-900);
    --color-blue-950: var(--color-success-950);

    /* Shadcn UI variable mapping */
    --background: var(--color-base-0);
    --foreground: var(--color-base-950);

    --card: var(--color-base-0);
    --card-foreground: var(--color-base-950);

    --popover: var(--color-base-0);
    --popover-foreground: var(--color-base-950);

    --primary: var(--color-success-500);
    --primary-foreground: var(--color-base-0);

    --secondary: var(--color-base-100);
    --secondary-foreground: var(--color-success-500);

    --muted: var(--color-base-100);
    --muted-foreground: var(--color-base-500);

    --accent: var(--color-base-100);
    --accent-foreground: var(--color-base-950);

    --destructive: var(--color-error-500);
    --destructive-foreground: var(--color-base-0);

    --border: var(--color-base-200);
    --input: var(--color-base-200);
    --ring: var(--color-success-500);

    --radius: 0.5rem;

    /* Theme mappings for PayloadCMS compatibility */
    --theme-border-color: var(--border);

    --theme-success-50: var(--color-success-50);
    --theme-success-100: var(--color-success-100);
    --theme-success-150: var(--color-success-150);
    --theme-success-200: var(--color-success-200);
    --theme-success-250: var(--color-success-250);
    --theme-success-300: var(--color-success-300);
    --theme-success-350: var(--color-success-350);
    --theme-success-400: var(--color-success-400);
    --theme-success-450: var(--color-success-450);
    --theme-success-500: var(--color-success-500);
    --theme-success-550: var(--color-success-550);
    --theme-success-600: var(--color-success-600);
    --theme-success-650: var(--color-success-650);
    --theme-success-700: var(--color-success-700);
    --theme-success-750: var(--color-success-750);
    --theme-success-800: var(--color-success-800);
    --theme-success-850: var(--color-success-850);
    --theme-success-900: var(--color-success-900);
    --theme-success-950: var(--color-success-950);

    --theme-warning-50: var(--color-warning-50);
    --theme-warning-100: var(--color-warning-100);
    --theme-warning-150: var(--color-warning-150);
    --theme-warning-200: var(--color-warning-200);
    --theme-warning-250: var(--color-warning-250);
    --theme-warning-300: var(--color-warning-300);
    --theme-warning-350: var(--color-warning-350);
    --theme-warning-400: var(--color-warning-400);
    --theme-warning-450: var(--color-warning-450);
    --theme-warning-500: var(--color-warning-500);
    --theme-warning-550: var(--color-warning-550);
    --theme-warning-600: var(--color-warning-600);
    --theme-warning-650: var(--color-warning-650);
    --theme-warning-700: var(--color-warning-700);
    --theme-warning-750: var(--color-warning-750);
    --theme-warning-800: var(--color-warning-800);
    --theme-warning-850: var(--color-warning-850);
    --theme-warning-900: var(--color-warning-900);
    --theme-warning-950: var(--color-warning-950);

    --theme-error-50: var(--color-error-50);
    --theme-error-100: var(--color-error-100);
    --theme-error-150: var(--color-error-150);
    --theme-error-200: var(--color-error-200);
    --theme-error-250: var(--color-error-250);
    --theme-error-300: var(--color-error-300);
    --theme-error-350: var(--color-error-350);
    --theme-error-400: var(--color-error-400);
    --theme-error-450: var(--color-error-450);
    --theme-error-500: var(--color-error-500);
    --theme-error-550: var(--color-error-550);
    --theme-error-600: var(--color-error-600);
    --theme-error-650: var(--color-error-650);
    --theme-error-700: var(--color-error-700);
    --theme-error-750: var(--color-error-750);
    --theme-error-800: var(--color-error-800);
    --theme-error-850: var(--color-error-850);
    --theme-error-900: var(--color-error-900);
    --theme-error-950: var(--color-error-950);

    --theme-elevation-0: var(--color-base-0);
    --theme-elevation-50: var(--color-base-50);
    --theme-elevation-100: var(--color-base-100);
    --theme-elevation-150: var(--color-base-150);
    --theme-elevation-200: var(--color-base-200);
    --theme-elevation-250: var(--color-base-250);
    --theme-elevation-300: var(--color-base-300);
    --theme-elevation-350: var(--color-base-350);
    --theme-elevation-400: var(--color-base-400);
    --theme-elevation-450: var(--color-base-450);
    --theme-elevation-500: var(--color-base-500);
    --theme-elevation-550: var(--color-base-550);
    --theme-elevation-600: var(--color-base-600);
    --theme-elevation-650: var(--color-base-650);
    --theme-elevation-700: var(--color-base-700);
    --theme-elevation-750: var(--color-base-750);
    --theme-elevation-800: var(--color-base-800);
    --theme-elevation-850: var(--color-base-850);
    --theme-elevation-900: var(--color-base-900);
    --theme-elevation-950: var(--color-base-950);
    --theme-elevation-1000: var(--color-base-1000);
  }

  /* Dark theme */
  [data-theme='dark'] {
    /* Shadcn UI variable mapping for dark mode */
    --background: var(--color-base-1000);
    --foreground: var(--color-base-0);

    --card: var(--color-base-900);
    --card-foreground: var(--color-base-0);

    --popover: var(--color-base-900);
    --popover-foreground: var(--color-base-0);

    --primary: var(--color-success-400);
    --primary-foreground: var(--color-base-950);

    --secondary: var(--color-base-800);
    --secondary-foreground: var(--color-base-50);

    --muted: var(--color-base-800);
    --muted-foreground: var(--color-base-400);

    --accent: var(--color-base-800);
    --accent-foreground: var(--color-base-50);

    --destructive: var(--color-error-500);
    --destructive-foreground: var(--color-base-0);

    --border: var(--color-base-800);
    --input: var(--color-base-800);
    --ring: var(--color-success-400);

    --radius: 0.5rem;

    /* Theme mappings for PayloadCMS compatibility */
    --theme-border-color: var(--border);

    --theme-elevation-0: var(--color-base-950);
    --theme-elevation-50: var(--color-base-900);
    --theme-elevation-100: var(--color-base-850);
    --theme-elevation-150: var(--color-base-800);
    --theme-elevation-200: var(--color-base-750);
    --theme-elevation-250: var(--color-base-700);
    --theme-elevation-300: var(--color-base-650);
    --theme-elevation-350: var(--color-base-600);
    --theme-elevation-400: var(--color-base-550);
    --theme-elevation-450: var(--color-base-500);
    --theme-elevation-500: var(--color-base-450);
    --theme-elevation-550: var(--color-base-400);
    --theme-elevation-600: var(--color-base-350);
    --theme-elevation-650: var(--color-base-300);
    --theme-elevation-700: var(--color-base-250);
    --theme-elevation-750: var(--color-base-200);
    --theme-elevation-800: var(--color-base-150);
    --theme-elevation-850: var(--color-base-100);
    --theme-elevation-900: var(--color-base-50);
    --theme-elevation-950: var(--color-base-0);
    --theme-elevation-1000: var(--color-base-0);

    --theme-success-50: var(--color-success-950);
    --theme-success-100: var(--color-success-900);
    --theme-success-150: var(--color-success-850);
    --theme-success-200: var(--color-success-800);
    --theme-success-250: var(--color-success-750);
    --theme-success-300: var(--color-success-700);
    --theme-success-350: var(--color-success-650);
    --theme-success-400: var(--color-success-600);
    --theme-success-450: var(--color-success-550);
    --theme-success-500: var(--color-success-500);
    --theme-success-550: var(--color-success-450);
    --theme-success-600: var(--color-success-400);
    --theme-success-650: var(--color-success-350);
    --theme-success-700: var(--color-success-300);
    --theme-success-750: var(--color-success-250);
    --theme-success-800: var(--color-success-200);
    --theme-success-850: var(--color-success-150);
    --theme-success-900: var(--color-success-100);
    --theme-success-950: var(--color-success-50);

    --theme-warning-50: var(--color-warning-950);
    --theme-warning-100: var(--color-warning-900);
    --theme-warning-150: var(--color-warning-850);
    --theme-warning-200: var(--color-warning-800);
    --theme-warning-250: var(--color-warning-750);
    --theme-warning-300: var(--color-warning-700);
    --theme-warning-350: var(--color-warning-650);
    --theme-warning-400: var(--color-warning-600);
    --theme-warning-450: var(--color-warning-550);
    --theme-warning-500: var(--color-warning-500);
    --theme-warning-550: var(--color-warning-450);
    --theme-warning-600: var(--color-warning-400);
    --theme-warning-650: var(--color-warning-350);
    --theme-warning-700: var(--color-warning-300);
    --theme-warning-750: var(--color-warning-250);
    --theme-warning-800: var(--color-warning-200);
    --theme-warning-850: var(--color-warning-150);
    --theme-warning-900: var(--color-warning-100);
    --theme-warning-950: var(--color-warning-50);

    --theme-error-50: var(--color-error-950);
    --theme-error-100: var(--color-error-900);
    --theme-error-150: var(--color-error-850);
    --theme-error-200: var(--color-error-800);
    --theme-error-250: var(--color-error-750);
    --theme-error-300: var(--color-error-700);
    --theme-error-350: var(--color-error-650);
    --theme-error-400: var(--color-error-600);
    --theme-error-450: var(--color-error-550);
    --theme-error-500: var(--color-error-500);
    --theme-error-550: var(--color-error-450);
    --theme-error-600: var(--color-error-400);
    --theme-error-650: var(--color-error-350);
    --theme-error-700: var(--color-error-300);
    --theme-error-750: var(--color-error-250);
    --theme-error-800: var(--color-error-200);
    --theme-error-850: var(--color-error-150);
    --theme-error-900: var(--color-error-100);
    --theme-error-950: var(--color-error-50);
  }
}
