/* ============================================================
   AgentLab / Christoph Hellmuth — Canonical Design System Tokens
   Exact visual & token parity with https://agentlab.framer.ai/
   - Pure white (#ffffff) architectural grid canvas + #e6e6e6 1px rails
   - Pitch-black (#000000) contrasting editorial sections & buttons
   - Electric Blue (#558bfb), Deep Cobalt (#0036fa), Ice Blue (#c4e4ff)
   - Merriweather (300/400) serif headings + Cabin / Inter sans body & UI
   ============================================================ */

/* Self-hosted fonts (GDPR / LG München I compliant — zero requests to fonts.googleapis.com) */
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/merriweather/Merriweather-roman.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/merriweather/Merriweather-italic.woff2') format('woff2');
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin/Cabin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin/Cabin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono/JetBrainsMono-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* ---- Exact AgentLab Framer Tokens ---- */
  --token-8376f551-3c3e-411e-890b-b6cb374e5dd0: #558bfb;
  --token-74d9d790-ae04-448d-bc25-9406925cac80: #000000;
  --token-0c40d577-e241-4bd0-8055-18ba32320e9f: #ffffff;
  --token-83e63cc3-247c-4a74-9d64-7bf751402c35: #fafafa;
  --token-06a467bf-35a5-4409-b7e5-6816b75aba90: #e6e6e6;
  --token-65b76487-574b-4aa2-a0ed-d69f7d724057: rgba(255, 255, 255, 0.10);
  --token-0c5d4565-8c4b-4ed7-9ecc-ef06d91cb000: #4d4d4d;
  --token-85b37bc1-6920-426a-935f-0cd14730948d: #d0d0d0;
  --token-8acf10b0-fc55-42ff-8ac5-80a79dc47979: rgba(255, 255, 255, 0.50);
  --token-9c999aad-1150-4ad0-9853-f5f735f14916: #c4e4ff;
  --token-47830d8d-6219-42b1-b8ba-5d882f9096b3: rgba(255, 255, 255, 0.14);
  --token-a8819faf-4972-4a2e-a641-04355a0489da: rgba(85, 139, 251, 0.15);
  --token-35670a89-8370-4127-9b4b-20a33af5f167: rgba(255, 255, 255, 0.02);

  /* ---- Semantic AgentLab Palette ---- */
  --agent-white: #ffffff;
  --agent-black: #000000;
  --agent-bg: #ffffff;
  --agent-bg-subtle: #fafafa;
  --agent-bg-elevated: #fafafa;
  --agent-bg-card: #ffffff;
  --agent-bg-card-hover: #fafafa;
  --agent-bg-dark: #000000;
  --agent-bg-dark-card: rgba(255, 255, 255, 0.025);
  --agent-bg-glass: rgba(255, 255, 255, 0.92);
  --agent-bg-input: #ffffff;

  /* Accent Colors */
  --agent-blue: #558bfb;
  --agent-blue-bright: #6f9dfc;
  --agent-deep-blue: #0036fa;
  --agent-popular-blue: #2b59ff;
  --agent-ice: #c4e4ff;
  --agent-navy: #031a4a;
  --agent-blue-glow: rgba(85, 139, 251, 0.25);
  --agent-blue-dim: rgba(85, 139, 251, 0.12);
  --agent-blue-faint: rgba(85, 139, 251, 0.06);
  --agent-tag-gradient: linear-gradient(270deg, #0036fa 0%, #c0e2f9 100%);
  --agent-cobalt-surface: linear-gradient(135deg, #0028c8 0%, #2463eb 48%, #558bfb 78%, #b8dcff 100%);

  /* Borders */
  --agent-border: #e6e6e6;
  --agent-border-subtle: #f0f0f0;
  --agent-border-strong: #d0d0d0;
  --agent-border-hover: #000000;
  --agent-border-blue: rgba(85, 139, 251, 0.45);
  --agent-dark-border: rgba(255, 255, 255, 0.10);
  --agent-dark-border-strong: rgba(255, 255, 255, 0.18);

  /* Text & Inks */
  --agent-text: #000000;
  --agent-text-muted: #4d4d4d;
  --agent-text-dim: #737373;
  --agent-text-faint: #999999;
  --agent-dark-text: #ffffff;
  --agent-dark-text-muted: rgba(255, 255, 255, 0.65);
  --agent-dark-text-dim: rgba(255, 255, 255, 0.45);

  /* ---- Channel Tokens (HSL triplets for shadcn / Tailwind consumers) ---- */
  --background: 0 0% 100%;               /* #ffffff */
  --foreground: 0 0% 0%;                 /* #000000 */
  --card: 0 0% 100%;                     /* #ffffff */
  --card-foreground: 0 0% 0%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 0%;
  --primary: 221 95% 66%;                /* #558bfb AgentLab Electric Blue */
  --primary-foreground: 0 0% 100%;
  --primary-bright: 221 100% 74%;
  --primary-hover: 227 100% 49%;         /* #0036fa AgentLab Deep Cobalt */
  --secondary: 0 0% 98%;                 /* #fafafa */
  --secondary-foreground: 0 0% 0%;
  --muted: 0 0% 98%;                     /* #fafafa */
  --muted-foreground: 0 0% 30%;          /* #4d4d4d */
  --accent: 221 95% 66%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --success: 158 76% 36%;
  --warning: 36 92% 44%;
  --border: 0 0% 90%;                    /* #e6e6e6 */
  --input: 0 0% 90%;
  --ring: 221 95% 66%;

  /* Semantic Color Helpers */
  --color-bg: #ffffff;
  --color-fg: #000000;
  --color-card: #ffffff;
  --color-border: #e6e6e6;
  --color-muted-fg: #4d4d4d;
  --color-primary: #558bfb;
  --color-primary-fg: #ffffff;
  --color-primary-bright: #0036fa;
  --color-primary-hover: #0036fa;
  --color-ring: #558bfb;

  /* ---- Radius Scale (AgentLab Sharp Architectural Grid + Floating UI Cards) ---- */
  --radius-btn: 0px;
  --radius-grid: 0px;
  --radius-pill: 9999px;
  --radius-full: 9999px;
  --radius-bento: 0px;
  --radius-card: 0px;
  --radius-ui-card: 14px;
  --radius-ui-bezel: 20px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius: 0.25rem;

  /* ---- Typography (Merriweather Display + Cabin/Inter Body & UI) ---- */
  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-sans: 'Cabin', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui: 'Inter', 'Cabin', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 2.75rem;    /* 44px */
  --text-6xl: 3.5rem;     /* 56px */

  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.14;
  --leading-snug: 1.22;
  --leading-normal: 1.625;
  --tracking-tight: 0em;
  --tracking-normal: 0em;
  --tracking-upper: 0.04em;

  /* ---- Spacing Scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- Elevations & Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.12);
  --shadow-ui-card: 0 18px 40px rgba(0, 20, 90, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-btn: none;
  --shadow-btn-hover: 0 4px 14px rgba(0, 0, 0, 0.16);
  --shadow-card: none;
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.05);

  /* Motion */
  --motion-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-normal: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-slow: 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Explicit dark-section / dark-mode token scope */
.dark,
[data-theme="dark"] {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --card: 240 10% 4%;
  --card-foreground: 0 0% 100%;
  --popover: 240 10% 4%;
  --popover-foreground: 0 0% 100%;
  --primary: 221 95% 66%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 6% 10%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 6% 10%;
  --muted-foreground: 0 0% 65%;
  --border: 0 0% 100% / 0.10;
  --input: 0 0% 100% / 0.14;
  --ring: 221 95% 66%;
}