/* Bindi design tokens — draft v0.2 (2026-10-31)
   Mirrors tokens.json 1:1 (validated by scripts/check_tokens.py).
   Naming: --bindi-<json path joined by '-'>. Breakpoints cannot be custom
   properties in media queries; they are documented in DESIGN-SYSTEM.md. */

:root {
  /* Brand — RETAINED from live bindi-ai.com */
  --bindi-color-brand-blue: #5B7FBF;
  --bindi-color-brand-turquoise: #4FD1C5;
  --bindi-color-brand-purple: #6B46C1;
  --bindi-color-brand-yellow: #F6E05E;
  --bindi-color-brand-pink: #ED8DC7;
  --bindi-color-brand-cyan: #4DD4D4;
  --bindi-color-brand-coral: #FF8B6A;
  --bindi-color-brand-lavender: #E8E4F8;
  --bindi-color-brand-peach: #FFD4A3;

  /* Ramps — retained hover/gradient values plus proposed tints */
  --bindi-color-blue-50: #EEF2FA;
  --bindi-color-blue-600: #4A6DA8;
  --bindi-color-blue-700: #3D5C94;
  --bindi-color-blue-800: #34508A;
  --bindi-color-purple-50: #F3EFFC;
  --bindi-color-purple-700: #5A3A9E;
  --bindi-color-purple-800: #4A3480;
  --bindi-color-turquoise-50: #E6FFFA;
  --bindi-color-turquoise-500: #3DBFB3;
  --bindi-color-turquoise-700: #0F766E;
  --bindi-color-turquoise-800: #285E61;

  --bindi-color-neutral-0: #FFFFFF;
  --bindi-color-neutral-25: #F7F8FC;
  --bindi-color-neutral-50: #EEF1F6;
  --bindi-color-neutral-100: #E2E8F0;
  --bindi-color-neutral-200: #CBD5E0;
  --bindi-color-neutral-400: #7A869A;
  --bindi-color-neutral-500: #5A6478;
  --bindi-color-neutral-600: #4A5568;
  --bindi-color-neutral-700: #2D3748;
  --bindi-color-neutral-900: #1A202C;
  --bindi-color-neutral-950: #171923;

  --bindi-color-success-50: #ECFDF3;
  --bindi-color-success-700: #027A48;
  --bindi-color-warning-50: #FFFAEB;
  --bindi-color-warning-700: #8A5A00;
  --bindi-color-danger-50: #FEF3F2;
  --bindi-color-danger-700: #B42318;

  /* Semantic — use these in components */
  --bindi-color-bg-canvas: var(--bindi-color-neutral-25);
  --bindi-color-bg-surface: var(--bindi-color-neutral-0);
  --bindi-color-bg-sunken: var(--bindi-color-neutral-50);
  --bindi-color-bg-selected: var(--bindi-color-blue-50);
  --bindi-color-bg-brand-subtle: var(--bindi-color-brand-lavender);
  --bindi-color-bg-inverse: var(--bindi-color-neutral-950);

  --bindi-color-text-strong: var(--bindi-color-neutral-700);
  --bindi-color-text-default: var(--bindi-color-neutral-600);
  --bindi-color-text-muted: var(--bindi-color-neutral-500);
  --bindi-color-text-inverse: var(--bindi-color-neutral-0);
  --bindi-color-text-on-bright: var(--bindi-color-neutral-900);
  --bindi-color-text-link: var(--bindi-color-brand-purple);
  --bindi-color-text-link-hover: var(--bindi-color-purple-700);
  --bindi-color-text-accent: var(--bindi-color-turquoise-700);

  --bindi-color-border-subtle: var(--bindi-color-neutral-100);
  --bindi-color-border-default: var(--bindi-color-neutral-200);
  --bindi-color-border-control: var(--bindi-color-neutral-400);
  --bindi-color-border-focus: var(--bindi-color-brand-purple);

  --bindi-color-action-primary-bg: var(--bindi-color-blue-600);
  --bindi-color-action-primary-hover: var(--bindi-color-blue-700);
  --bindi-color-action-primary-active: var(--bindi-color-blue-800);
  --bindi-color-action-primary-text: var(--bindi-color-neutral-0);
  --bindi-color-action-secondary-bg: var(--bindi-color-neutral-0);
  --bindi-color-action-secondary-hover: var(--bindi-color-blue-50);
  --bindi-color-action-secondary-border: var(--bindi-color-neutral-400);
  --bindi-color-action-secondary-text: var(--bindi-color-blue-700);
  --bindi-color-action-accent-bg: var(--bindi-color-brand-turquoise);
  --bindi-color-action-accent-hover: var(--bindi-color-turquoise-500);
  --bindi-color-action-accent-text: var(--bindi-color-neutral-900);
  --bindi-color-action-danger-bg: var(--bindi-color-danger-700);
  --bindi-color-action-danger-text: var(--bindi-color-neutral-0);

  --bindi-color-status-success-text: var(--bindi-color-success-700);
  --bindi-color-status-success-bg: var(--bindi-color-success-50);
  --bindi-color-status-warning-text: var(--bindi-color-warning-700);
  --bindi-color-status-warning-bg: var(--bindi-color-warning-50);
  --bindi-color-status-danger-text: var(--bindi-color-danger-700);
  --bindi-color-status-danger-bg: var(--bindi-color-danger-50);
  --bindi-color-status-info-text: var(--bindi-color-blue-700);
  --bindi-color-status-info-bg: var(--bindi-color-blue-50);

  /* Projector / dark slides — PROPOSED */
  --bindi-color-projector-bg: var(--bindi-color-neutral-950);
  --bindi-color-projector-text: #E2E8F0;
  --bindi-color-projector-muted: #A0AEC0;
  --bindi-color-projector-blue: #8FA9DA;
  --bindi-color-projector-purple: #B79CF0;
  --bindi-color-projector-turquoise: var(--bindi-color-brand-turquoise);

  /* Typography — Inter RETAINED */
  --bindi-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bindi-font-family-mono: 'SF Mono', Menlo, Consolas, monospace;
  --bindi-font-size-2xs: 11px;
  --bindi-font-size-xs: 12px;
  --bindi-font-size-sm: 14px;
  --bindi-font-size-md: 16px;
  --bindi-font-size-lg: 18px;
  --bindi-font-size-xl: 20px;
  --bindi-font-size-2xl: 24px;
  --bindi-font-size-3xl: 30px;
  --bindi-font-size-4xl: 36px;
  --bindi-font-size-display: 52px;
  --bindi-font-weight-regular: 400;
  --bindi-font-weight-medium: 500;
  --bindi-font-weight-semibold: 600;
  --bindi-font-weight-bold: 700;
  --bindi-font-weight-extrabold: 800;
  --bindi-font-weight-black: 900;
  --bindi-font-line-height-tight: 1.1;
  --bindi-font-line-height-snug: 1.3;
  --bindi-font-line-height-normal: 1.6;
  --bindi-font-line-height-ui: 1.45;
  --bindi-font-letter-spacing-tight: -0.02em;
  --bindi-font-letter-spacing-eyebrow: 0.08em;

  /* Spacing — 4px base */
  --bindi-space-0: 0px;
  --bindi-space-1: 4px;
  --bindi-space-2: 8px;
  --bindi-space-3: 12px;
  --bindi-space-4: 16px;
  --bindi-space-5: 20px;
  --bindi-space-6: 24px;
  --bindi-space-8: 32px;
  --bindi-space-10: 40px;
  --bindi-space-12: 48px;
  --bindi-space-16: 64px;
  --bindi-space-20: 80px;

  /* Radius */
  --bindi-radius-sm: 6px;
  --bindi-radius-md: 8px;
  --bindi-radius-control: 10px;
  --bindi-radius-lg: 12px;
  --bindi-radius-xl: 16px;
  --bindi-radius-2xl: 20px;
  --bindi-radius-pill: 999px;

  /* Elevation */
  --bindi-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --bindi-shadow-card: 0 4px 20px rgba(74, 85, 104, 0.08);
  --bindi-shadow-raised: 0 12px 30px rgba(0, 0, 0, 0.10);
  --bindi-shadow-brand: 0 20px 60px rgba(107, 70, 193, 0.25);
  --bindi-shadow-panel: 0 1px 2px rgba(26, 32, 44, 0.06);
  --bindi-shadow-paper: 0 1px 2px rgba(26, 32, 44, 0.06), 0 12px 32px rgba(26, 32, 44, 0.10);

  /* Motion */
  --bindi-motion-duration-fast: 150ms;
  --bindi-motion-duration-base: 200ms;
  --bindi-motion-duration-slow: 300ms;
  --bindi-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --bindi-motion-easing-out: cubic-bezier(0.2, 0, 0, 1);

  /* Sizing */
  --bindi-size-control-sm: 36px;
  --bindi-size-control-md: 44px;
  --bindi-size-control-lg: 52px;
  --bindi-size-focus-ring-width: 3px;
  --bindi-size-focus-ring-offset: 2px;

  /* Layout */
  --bindi-layout-container: 1200px;
  --bindi-layout-sidebar: 260px;
  --bindi-layout-sidebar-collapsed: 72px;
  --bindi-layout-measure: 68ch;
  --bindi-layout-topbar: 56px;
  --bindi-layout-rail: 216px;
  --bindi-layout-preview: 340px;

  /* Classroom print (A4) — PROPOSED */
  --bindi-print-margin: 12mm;
  --bindi-print-line-gap: 9mm;
  --bindi-print-line-gap-early: 12mm;
  --bindi-print-body: 12pt;
  --bindi-print-body-early: 16pt;

  /* Projector slides — PROPOSED minimums (container query units) */
  --bindi-slide-title: 5.6cqi;
  --bindi-slide-body: 3.2cqi;
  --bindi-slide-caption: 2.2cqi;

  /* Stacking */
  --bindi-z-sticky: 100;
  --bindi-z-overlay: 1000;
  --bindi-z-toast: 1100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bindi-motion-duration-fast: 0ms;
    --bindi-motion-duration-base: 0ms;
    --bindi-motion-duration-slow: 0ms;
  }
}