/*
  AI Collab Design System Tokens
  Source of truth for reusable page styling.
  Import before components.css.
*/
:root {
  /* Typography */
  --ac-font-display: 'Poppins', system-ui, sans-serif;
  --ac-font-body: 'Inter', system-ui, sans-serif;
  --ac-font-mono: 'JetBrains Mono', monospace;

  /* Primitive colors */
  --ac-color-canvas-950: #1A1A1A;
  --ac-color-canvas-925: #121515;
  --ac-color-canvas-900: #0E1616;
  --ac-color-canvas-850: #10201F;
  --ac-color-ink-50: #FFFFFF;
  --ac-color-ink-100: #F4F7F9;
  --ac-color-ink-150: #EDF2F2;
  --ac-color-ink-250: #C8D6D6;
  --ac-color-ink-400: #A6B6B6;
  --ac-color-line-700: #2A2F2F;
  --ac-color-aqua-400: #37D6CE;
  --ac-color-aqua-600: #0E8C84;
  --ac-color-coral-400: #FF7A67;
  --ac-color-coral-500: #FF6B57;

  /* Semantic colors */
  --ac-canvas: var(--ac-color-canvas-950);
  --ac-canvas-raised: var(--ac-color-canvas-900);
  --ac-ink: var(--ac-color-ink-150);
  --ac-ink-strong: var(--ac-color-ink-50);
  --ac-body: var(--ac-color-ink-400);
  --ac-muted: rgba(166, 182, 182, .72);
  --ac-line: var(--ac-color-line-700);
  --ac-primary: var(--ac-color-aqua-400);
  --ac-primary-deep: var(--ac-color-aqua-600);
  --ac-action: var(--ac-color-coral-400);
  --ac-action-strong: var(--ac-color-coral-500);
  --ac-action-ink: var(--ac-color-canvas-950);
  --ac-focus: var(--ac-color-aqua-400);

  /* Background effects */
  --ac-page-bg: linear-gradient(180deg, #06201E 0%, rgba(8, 33, 31, 0) 18%, #0E1616 42%, #1A1A1A 64%) fixed, var(--ac-canvas);
  --ac-footer-bg: linear-gradient(135deg, #0C2A28 0%, #10201F 55%, #121515 100%);
  --ac-hero-scrim: linear-gradient(90deg, rgba(10, 22, 21, .86) 0%, rgba(10, 22, 21, .72) 38%, rgba(10, 22, 21, .34) 72%, rgba(10, 22, 21, .18) 100%);
  --ac-glow-a: rgba(14, 140, 132, .55);
  --ac-glow-b: rgba(23, 194, 188, .30);
  --ac-glow-c: rgba(14, 140, 132, .40);

  /* Surfaces */
  --ac-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  --ac-glass-border: rgba(255, 255, 255, .16);
  --ac-glass-highlight: rgba(255, 255, 255, .28);
  --ac-glass-shadow: 0 26px 60px rgba(0, 0, 0, .45);
  --ac-card-bg: rgba(255, 255, 255, .035);
  --ac-card-hover-border: rgba(55, 214, 206, .42);
  --ac-menu-bg: linear-gradient(135deg, rgba(20, 36, 34, .96), rgba(18, 24, 24, .94));

  /* Spacing scale */
  --ac-space-1: 4px;
  --ac-space-2: 8px;
  --ac-space-3: 12px;
  --ac-space-4: 16px;
  --ac-space-5: 20px;
  --ac-space-6: 24px;
  --ac-space-7: 28px;
  --ac-space-8: 32px;
  --ac-space-10: 40px;
  --ac-space-12: 48px;
  --ac-space-14: 56px;
  --ac-space-16: 64px;
  --ac-space-18: 72px;
  --ac-space-20: 80px;
  --ac-space-24: 96px;
  --ac-space-26: 104px;
  --ac-space-32: 128px;

  /* Layout */
  --ac-max: 1180px;
  --ac-max-narrow: 940px;
  --ac-gutter: 80px;
  --ac-gutter-mobile: 22px;
  --ac-section-y: 104px;
  --ac-section-y-mobile: 72px;
  --ac-nav-height: 76px;
  --ac-nav-pad-x: 40px;
  --ac-mobile-menu-width: min(360px, 60vw);

  /* Type scale */
  --ac-text-xs: 11px;
  --ac-text-sm: 13.5px;
  --ac-text-md: 15.5px;
  --ac-text-lg: 17px;
  --ac-text-xl: 21px;
  --ac-h1: 84px;
  --ac-h2: 58px;
  --ac-h3: 34px;

  /* Radius */
  --ac-radius-xs: 8px;
  --ac-radius-sm: 11px;
  --ac-radius-md: 14px;
  --ac-radius-lg: 18px;
  --ac-radius-xl: 22px;
  --ac-radius-2xl: 24px;
  --ac-radius-pill: 999px;

  /* Motion */
  --ac-ease: cubic-bezier(.5, 0, .2, 1);
  --ac-fast: 160ms;
  --ac-med: 260ms;
  --ac-slow: 500ms;

  /* Component tokens */
  --ac-button-y: 15px;
  --ac-button-x: 30px;
  --ac-button-min: 44px;
  --ac-card-pad: 28px;
  --ac-touch-min: 44px;
  --ac-z-bg: 0;
  --ac-z-content: 2;
  --ac-z-nav: 50;
  --ac-z-cursor: 90;
}

:root[data-theme='light'] {
  --ac-canvas: var(--ac-color-ink-100);
  --ac-canvas-raised: #FFFFFF;
  --ac-ink: var(--ac-color-canvas-950);
  --ac-ink-strong: var(--ac-color-canvas-950);
  --ac-body: #4E6262;
  --ac-muted: rgba(78, 98, 98, .72);
  --ac-line: #D8E0E0;
  --ac-primary: var(--ac-color-aqua-600);
  --ac-action: var(--ac-color-coral-500);
  --ac-page-bg: var(--ac-color-ink-100);
  --ac-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .58));
  --ac-glass-border: rgba(18, 36, 34, .13);
  --ac-glass-highlight: rgba(255, 255, 255, .75);
  --ac-glass-shadow: 0 24px 60px rgba(14, 28, 26, .13);
  --ac-card-bg: rgba(255, 255, 255, .64);
}

@media (max-width: 760px) {
  :root {
    --ac-gutter: var(--ac-gutter-mobile);
    --ac-section-y: var(--ac-section-y-mobile);
    --ac-nav-pad-x: 18px;
    --ac-card-pad: 22px;
    --ac-h1: 52px;
    --ac-h2: 38px;
    --ac-h3: 24px;
  }
}

@media (max-width: 430px) {
  :root {
    --ac-mobile-menu-width: min(320px, 60vw);
    --ac-h1: 36px;
    --ac-h2: 34px;
  }
}