/* ================================================================
   Bricolage Grotesque — Heading typeface (matches landing page)
   CDN: Google Fonts
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

/* ================================================================
   Geist Font — Primary typeface
   CDN: https://cdn.jsdelivr.net/npm/geist/dist/
   ================================================================ */
@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =========================================
     1) COLOR PRIMITIVES
  ========================================= */
  --ayn-slate-950: #0B1220;
  --ayn-slate-900: #0F172A;
  --ayn-slate-800: #1E293B;
  --ayn-slate-700: #334155;
  --ayn-slate-600: #475569;
  --ayn-slate-500: #64748B;
  --ayn-slate-400: #94A3B8;
  --ayn-slate-300: #CBD5E1;
  --ayn-slate-200: #E2E8F0;
  --ayn-slate-100: #F1F5F9;
  --ayn-slate-50: #F8FAFC;

  --ayn-blue-800: #1E40AF;
  --ayn-blue-700: #1D4ED8;
  --ayn-blue-600: #2563EB;
  --ayn-blue-500: #3B82F6;
  --ayn-blue-100: #DBEAFE;
  --ayn-blue-50: #EFF6FF;

  --ayn-green-700: #15803D;
  --ayn-green-600: #16A34A;
  --ayn-green-500: #22C55E;
  --ayn-green-100: #DCFCE7;
  --ayn-green-50: #F0FDF4;

  --ayn-amber-600: #D97706;
  --ayn-amber-500: #F59E0B;
  --ayn-amber-100: #FEF3C7;
  --ayn-amber-50: #FFFBEB;

  --ayn-red-700: #B91C1C;
  --ayn-red-600: #DC2626;
  --ayn-red-500: #EF4444;
  --ayn-red-100: #FEE2E2;
  --ayn-red-50: #FEF2F2;

  /* =========================================
     2) SEMANTIC COLORS (use these)
  ========================================= */
  --ayn-bg: var(--ayn-slate-50);
  --ayn-surface-1: #FFFFFF;
  --ayn-surface-2: var(--ayn-slate-100);
  --ayn-surface-3: var(--ayn-slate-200);
  --ayn-border: var(--ayn-slate-200);
  --ayn-border-subtle: var(--ayn-slate-100);

  --ayn-text: var(--ayn-slate-900);
  --ayn-text-muted: var(--ayn-slate-500);
  --ayn-text-subtle: var(--ayn-slate-700);

  --ayn-primary: var(--ayn-blue-600);
  --ayn-primary-hover: var(--ayn-blue-700);
  --ayn-primary-active: var(--ayn-blue-800);
  --ayn-primary-soft: var(--ayn-blue-100);
  --ayn-primary-softer: var(--ayn-blue-50);

  --ayn-success: var(--ayn-green-600);
  --ayn-success-hover: var(--ayn-green-700);
  --ayn-success-soft: var(--ayn-green-100);

  --ayn-warning: var(--ayn-amber-500);
  --ayn-warning-hover: var(--ayn-amber-600);
  --ayn-warning-soft: var(--ayn-amber-100);

  --ayn-danger: var(--ayn-red-600);
  --ayn-danger-hover: var(--ayn-red-700);
  --ayn-danger-soft: var(--ayn-red-100);

  /* Focus ring */
  --ayn-focus: rgba(37, 99, 235, 0.35);
  --ayn-focus-danger: rgba(220, 38, 38, 0.35);

  /* =========================================
     3) TYPOGRAPHY
  ========================================= */
  --ayn-font-heading: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ayn-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --ayn-text-xs: 0.75rem;   /* 12px */
  --ayn-text-sm: 0.8125rem; /* 13px */
  --ayn-text-md: 0.875rem;  /* 14px */
  --ayn-text-lg: 1rem;      /* 16px */
  --ayn-text-xl: 1.125rem;  /* 18px */
  --ayn-text-2xl: 1.5rem;   /* 24px */
  --ayn-text-3xl: 1.875rem; /* 30px */
  --ayn-text-4xl: 2.25rem;  /* 36px */

  --ayn-leading-tight: 1.2;
  --ayn-leading-snug: 1.35;
  --ayn-leading: 1.5;
  --ayn-leading-relaxed: 1.65;

  --ayn-tracking-tight: -0.025em;
  --ayn-tracking-normal: 0;

  --ayn-weight-regular: 400;
  --ayn-weight-medium: 500;
  --ayn-weight-semibold: 600;
  --ayn-weight-bold: 700;

  /* =========================================
     4) SPACING & SIZING
  ========================================= */
  --ayn-space-0: 0;
  --ayn-space-1: 4px;
  --ayn-space-2: 8px;
  --ayn-space-3: 12px;
  --ayn-space-4: 16px;
  --ayn-space-5: 20px;
  --ayn-space-6: 24px;
  --ayn-space-8: 32px;
  --ayn-space-10: 40px;
  --ayn-space-12: 48px;
  --ayn-space-16: 64px;

  --ayn-container-max: 1280px;

  /* =========================================
     5) BREAKPOINTS (standardized — 4 only)
     Usage: @media (min-width: 640px)  → sm
            @media (min-width: 768px)  → md
            @media (min-width: 1024px) → lg
            @media (min-width: 1280px) → xl
  ========================================= */

  /* =========================================
     6) RADIUS, SHADOW
  ========================================= */
  --ayn-radius-xs: 4px;
  --ayn-radius-sm: 8px;
  --ayn-radius-md: 12px;
  --ayn-radius-lg: 16px;
  --ayn-radius-xl: 24px;
  --ayn-radius-full: 9999px;

  --ayn-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ayn-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ayn-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --ayn-shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.05);
  --ayn-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.12);

  /* =========================================
     7) MOTION
  ========================================= */
  --ayn-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ayn-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ayn-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ayn-duration-1: 120ms;
  --ayn-duration-2: 180ms;
  --ayn-duration-3: 240ms;
  --ayn-duration-4: 320ms;

  /* =========================================
     8) Z-INDEX
  ========================================= */
  --ayn-z-dropdown: 1000;
  --ayn-z-sticky: 1100;
  --ayn-z-modal: 1200;
  --ayn-z-toast: 1300;
  --ayn-z-tooltip: 1400;

  /* =========================================
     9) DENSITY (role-based)
  ========================================= */
  --ayn-control-h: 42px;
  --ayn-control-h-sm: 34px;
  --ayn-control-h-lg: 48px;
  --ayn-control-padding-x: 14px;

  /* =========================================
     10) COMPATIBILITY ALIASES (legacy CSS)
  ========================================= */
  --ayn-ink-black: var(--ayn-text);
  --ayn-color-primary: var(--ayn-primary);
  --ayn-color-primary-soft: var(--ayn-primary-soft);
  --ayn-color-danger: var(--ayn-danger);
  --ayn-color-text: var(--ayn-text);
  --ayn-color-text-muted: var(--ayn-text-muted);
  --ayn-color-text-faint: var(--ayn-text-muted);
  --ayn-color-bg: var(--ayn-bg);
  --ayn-color-surface: var(--ayn-surface-1);
  --ayn-color-surface-soft: var(--ayn-surface-2);
  --ayn-color-border: var(--ayn-border);

  /* Sidebar legacy tokens */
  --ayn-color-sidebar: var(--ayn-slate-900);
  --ayn-color-sidebar-text: var(--ayn-slate-300);
  --ayn-color-sidebar-hover: var(--ayn-slate-800);
  --ayn-color-sidebar-active: var(--ayn-primary);
}

.ayn-density-compact {
  --ayn-control-h: 32px;
  --ayn-control-padding-x: 10px;
}

.ayn-density-comfy {
  --ayn-control-h: 44px;
  --ayn-control-padding-x: 14px;
}

.ayn-scope-traveler {
  --ayn-primary-soft: rgba(37, 99, 235, 0.12);
}

/* =========================================
   Accessibility: focus-visible ring
========================================= */
*:focus-visible {
  outline: 2px solid var(--ayn-primary);
  outline-offset: 2px;
}

/* =========================================
   Skip link (hidden until focused)
========================================= */
.ayn-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--ayn-z-toast);
}
.ayn-skip-link:focus {
  position: fixed;
  top: var(--ayn-space-3);
  left: var(--ayn-space-3);
  width: auto;
  height: auto;
  padding: var(--ayn-space-3) var(--ayn-space-4);
  background: var(--ayn-surface-1);
  color: var(--ayn-primary);
  border: 2px solid var(--ayn-primary);
  border-radius: var(--ayn-radius-sm);
  font-size: var(--ayn-text-md);
  font-weight: var(--ayn-weight-semibold);
  box-shadow: var(--ayn-shadow-lg);
  z-index: calc(var(--ayn-z-toast) + 100);
}

/* =========================================
   Screen-reader-only utility
========================================= */
.ayn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   WCAG 2.3.3 – Reduced motion preference
   Disables ALL transitions & animations
   unless component explicitly opts out.
========================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================
   WCAG 1.4.11 – High contrast preference
   Increases border contrast, removes
   decorative shadows, forces solid borders.
========================================= */
@media (prefers-contrast: more) {
  :root {
    --ayn-border: var(--ayn-slate-500);
    --ayn-shadow-sm: none;
    --ayn-shadow-md: none;
    --ayn-shadow-lg: none;
    --ayn-shadow-xl: none;
  }
  *:focus-visible {
    outline-width: 3px;
  }
}