/*
  Tailwind v4 Archetype AI Theme
  https://tailwindcss.com/docs/theme
*/

@import 'tailwindcss';
@import './colors.css';

@custom-variant dark (&:where(.dark, .dark *));

/* Semantic Tokens */
:root {
  /* shadcn-svelte specific semantic tokens*/
  --radius: 0.375rem;
  --background: var(--color-brand-white);
  --foreground: var(--color-brand-black);
  --card: var(--color-zinc-50);
  --card-foreground: var(--color-brand-black);
  --popover: var(--color-brand-white);
  --popover-foreground: var(--color-brand-black);
  --primary: var(--color-brand-black);
  --primary-foreground: var(--color-zinc-50);
  --secondary: var(--color-zinc-100);
  --secondary-foreground: var(--color-zinc-900);
  --muted: var(--color-zinc-100);
  --muted-foreground: var(--color-zinc-500);
  --accent: var(--color-zinc-100);
  --accent-foreground: var(--color-zinc-900);
  --destructive: var(--color-red-600);
  --border: var(--color-zinc-200);
  --separator: var(--color-zinc-200);
  --input: var(--color-zinc-200);
  --ring: var(--color-atai-brand-babyblue);
  --chart-1: var(--color-yellow-600);
  --chart-2: var(--color-emerald-700);
  --chart-3: var(--color-fuchsia-500);
  --chart-4: var(--color-violet-700);
  --chart-5: var(--color-yellow-800);
  --sidebar: var(--color-zinc-50);
  --sidebar-foreground: var(--color-zinc-950);
  --sidebar-primary: var(--color-atai-brand-babyblue);
  --sidebar-primary-foreground: var(--color-zinc-50);
  --sidebar-accent: var(--color-zinc-100);
  --sidebar-accent-foreground: var(--color-zinc-900);
  --sidebar-border: var(--color-zinc-200);
  --sidebar-ring: var(--color-zinc-400);
  /* Archetype AI specific semantic tokens*/
  /* Archetype AI status semantic tokens*/
  --atai-neutral: var(--color-blue-700);
  --atai-good: var(--color-green-500);
  --atai-warning: var(--color-yellow-600);
  --atai-critical: var(--color-red-400);
  /*Archetype AI brand semantic tokens*/
  --atai-brand-babyblue: var(--color-brand-babyblue);
  --atai-brand-yellow: var(--color-brand-yellow);
  --atai-always-black: var(--color-brand-black);
  --atai-always-white: var(--color-brand-white);
  /* Archetype AI icon stroke semantic tokens */
  --atai-icon-stroke-default: 1;
  --atai-icon-stroke-interactive: 1.25;
  --atai-icon-stroke-status: 1.5;
  --atai-icon-stroke-emphasis: 2;
  /*Archetype AI radii semantic tokens */
  --atai-radius-interactive: var(--radius-xs);
}

/* Semantic Tokens Dark Mode Overrides */
.dark {
  /* shadcn-svelte specific semantic tokens*/
  --background: var(--color-brand-black);
  --foreground: var(--color-brand-white);
  --card: var(--color-zinc-900);
  --card-foreground: var(--color-brand-white);
  --popover: var(--color-zinc-900);
  --popover-foreground: var(--color-brand-white);
  --primary: var(--color-zinc-200);
  --primary-foreground: var(--color-zinc-900);
  --secondary: var(--color-zinc-900);
  --secondary-foreground: var(--color-zinc-50);
  --muted: var(--color-zinc-800);
  --muted-foreground: var(--color-zinc-400);
  --accent: var(--color-zinc-700);
  --accent-foreground: var(--color-zinc-50);
  --destructive: var(--color-red-400);
  --border: var(--color-zinc-800);
  --separator: var(--color-zinc-700);
  --input: var(--color-zinc-800);
  --ring: var(--color-atai-brand-babyblue);
  --chart-1: var(--color-yellow-600);
  --chart-2: var(--color-emerald-700);
  --chart-3: var(--color-fuchsia-500);
  --chart-4: var(--color-violet-700);
  --chart-5: var(--color-yellow-800);
  --sidebar: var(--color-zinc-900);
  --sidebar-foreground: var(--color-zinc-50);
  --sidebar-primary: var(--color-atai-brand-babyblue);
  --sidebar-primary-foreground: var(--color-zinc-50);
  --sidebar-accent: var(--color-zinc-800);
  --sidebar-accent-foreground: var(--color-zinc-50);
  --sidebar-border: var(--color-zinc-700);
  --sidebar-ring: var(--color-zinc-500);
  /* Archetype AI status semantic tokens*/
  --atai-neutral: var(--color-blue-500);
  --atai-good: var(--color-green-400);
  --atai-warning: var(--color-yellow-400);
  --atai-critical: var(--color-red-400);
  /*Archetype AI brand semantic tokens*/
  --atai-brand-babyblue: var(--color-brand-babyblue);
  --atai-brand-yellow: var(--color-brand-yellow);
  --atai-always-black: var(--color-brand-black);
  --atai-always-white: var(--color-brand-white);
  /* Archetype AI icon stroke semantic tokens */
  --atai-icon-stroke-default: 1;
  --atai-icon-stroke-interactive: 1.25;
  --atai-icon-stroke-status: 1.5;
  --atai-icon-stroke-emphasis: 2;
  /*Archetype AI radii semantic tokens */
  --atai-radius-interactive: var(--radius-xs);
}

/* Tailwind Theme */
@theme {
  /* '… Fallback …' faces (metric-matched, per-OS bases) are defined in fonts.css */
  --font-sans:
    'PP Neue Montreal', 'PP Neue Montreal Fallback Helvetica', 'PP Neue Montreal Fallback Roboto',
    'PP Neue Montreal Fallback Arial', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:
    'PP Neue Montreal Mono', 'PP Neue Montreal Mono Fallback Menlo',
    'PP Neue Montreal Mono Fallback Cascadia', 'PP Neue Montreal Mono Fallback Roboto',
    ui-monospace, monospace;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: var(--radius);
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --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-border: var(--border);
  --color-separator: var(--separator);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --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);
  --color-sidebar: var(--sidebar);
  --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);
  --color-atai-neutral: var(--atai-neutral);
  --color-atai-good: var(--atai-good);
  --color-atai-warning: var(--atai-warning);
  --color-atai-critical: var(--atai-critical);
  --color-atai-always-black: var(--atai-always-black);
  --color-atai-always-white: var(--atai-always-white);
  --color-atai-brand-babyblue: var(--atai-brand-babyblue);
  --color-atai-brand-yellow: var(--atai-brand-yellow);
  --stroke-width-icon-default: var(--atai-icon-stroke-default);
  --stroke-width-icon-interactive: var(--atai-icon-stroke-interactive);
  --stroke-width-icon-status: var(--atai-icon-stroke-status);
  --stroke-width-icon-emphasis: var(--atai-icon-stroke-emphasis);
  --radius-interactive: var(--atai-radius-interactive);
  /* https://github.com/tailwindlabs/tailwindcss/discussions/17777) */
  --max-width-3xs: var(--container-3xs);
  --max-width-2xs: var(--container-2xs);
  --max-width-xs: var(--container-xs);
  --max-width-sm: var(--container-sm);
  --max-width-md: var(--container-md);
  --max-width-lg: var(--container-lg);
  --max-width-xl: var(--container-xl);
  --max-width-2xl: var(--container-2xl);
  --max-width-3xl: var(--container-3xl);
  --max-width-4xl: var(--container-4xl);
  --max-width-5xl: var(--container-5xl);
  --max-width-6xl: var(--container-6xl);
  --max-width-7xl: var(--container-7xl);
  --min-width-3xs: var(--container-3xs);
  --min-width-2xs: var(--container-2xs);
  --min-width-xs: var(--container-xs);
  --min-width-sm: var(--container-sm);
  --min-width-md: var(--container-md);
  --min-width-lg: var(--container-lg);
  --min-width-xl: var(--container-xl);
  --min-width-2xl: var(--container-2xl);
  --min-width-3xl: var(--container-3xl);
  --min-width-4xl: var(--container-4xl);
  --min-width-5xl: var(--container-5xl);
  --min-width-6xl: var(--container-6xl);
  --min-width-7xl: var(--container-7xl);
}

/* Base Styles & Semantic HTML Elements */
@layer base {
  * {
    @apply border-border;
    @apply outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
  h1 {
    @apply text-primary text-4xl leading-normal font-normal tracking-tight capitalize;
  }
  h2 {
    @apply text-primary text-3xl leading-tight font-normal tracking-tight;
  }
  h3 {
    @apply text-primary text-2xl leading-normal font-normal tracking-tight;
  }
  h4 {
    @apply text-muted-foreground text-xl leading-tight font-normal tracking-tight;
  }
  h5 {
    @apply text-muted-foreground text-lg leading-tight font-normal tracking-tight uppercase;
  }
  h6 {
    @apply text-muted-foreground text-base leading-tight font-normal tracking-tight;
  }
  p {
    @apply text-primary text-sm leading-tight tracking-normal;
  }
  small {
    @apply text-primary text-xs leading-tight tracking-normal;
  }
  span {
    @apply text-sm;
  }
  strong {
    @apply text-primary text-sm leading-relaxed font-medium;
  }
  em {
    @apply text-primary text-sm italic;
  }
  label {
    @apply text-primary text-xs;
  }
  a {
    @apply text-primary cursor-pointer text-sm;
  }
  code {
    @apply font-mono text-sm leading-relaxed;
  }
  blockquote {
    @apply border-s-2 ps-6 text-sm italic;
  }
}