/* ==========================================================================
   KnowAnchor — Design Tokens
   Source of truth: docs/design-system.md, docs/motion.md
   Font note: real Manrope/Inter/IBM Plex Mono woff2 files could not be
   downloaded in this build environment (no outbound network access
   available for the frontend build step). Per the task's documented
   fallback rule, the system-font stack below is used as the primary,
   visually-close substitute. If woff2 files are added later at
   assets/fonts/, add @font-face blocks above and nothing else changes.
   ========================================================================== */

:root {
  /* ---- Color ---- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F4F6F6;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-text: #1B2430;
  --color-text-muted: #5B6572;
  --color-heading: #10161F;
  --color-border: #E1E5E7;
  --color-primary: #0B5D6B;
  --color-primary-hover: #094B57;
  --color-accent: #C9750A;
  --color-success: #1E7F4F;
  --color-warning: #9A6300;
  --color-error: #B3261E;
  --color-focus: #C9750A;

  --color-primary-tint: #E7F0F1;
  --color-success-tint: #E6F4EC;
  --color-warning-tint: #FBEEDD;
  --color-warning-tint-text: #8A5800;
  --color-error-tint: #FAE7E5;
  --color-neutral-tint: #EEF1F1;

  --color-backdrop: rgba(16, 22, 31, 0.4);

  /* ---- Admin (dark sidebar) surface ---- */
  --color-admin-bg: #10161F;
  --color-admin-bg-alt: #1A2330;
  --color-admin-border: #2B3644;
  --color-admin-text: #E7ECEF;
  --color-admin-text-muted: #9AA6B2;

  /* ---- Typography ---- */
  --font-heading: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.0625rem;    /* 17px, up to 18px desktop */
  --text-xl: 1.1875rem;    /* 19px, up to 20px desktop */
  --display-sm: 1.375rem;  /* 22px, up to 24px desktop */
  --display-md: 1.625rem;  /* 26px, up to 30px desktop */
  --display-lg: 2rem;      /* 32px, up to 40px desktop */
  --display-xl: 2.125rem;  /* 34px, up to 56px desktop */

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Containers ---- */
  --container-marketing: 1200px;
  --container-narrow: 720px;
  --container-wide: 1320px;
  --gutter: 20px;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(16, 22, 31, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 22, 31, 0.08);
  --shadow-lg: 0 16px 40px rgba(16, 22, 31, 0.14);

  /* ---- Motion timing (docs/motion.md §4) ---- */
  --motion-instant: 80ms;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 220ms;
  --motion-slower: 280ms;

  /* ---- Easing (docs/motion.md §5) ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Layout ---- */
  --header-height-mobile: 64px;
  --header-height-desktop: 72px;
  --sidebar-width: 260px;
  --ai-panel-width: 320px;
}

@media (min-width: 1024px) {
  :root {
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --display-sm: 1.5rem;
    --display-md: 1.875rem;
    --display-lg: 2.5rem;
    --display-xl: 3.5rem;
    --gutter: 48px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  :root {
    --gutter: 32px;
  }
}

/* ---- Global reduced-motion contract (docs/motion.md §18, binding) ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}