/*
 * RealEngineers.ai design tokens.
 *
 * Source of truth: docs/style-guide.md Sections 3 (Color System), 4
 * (Typography), 5 (Spacing), 9 (Color-Safe state cues), and 21 (Design
 * Token Inventory). Every color, font stack, spacing value, radius,
 * shadow, motion duration, and breakpoint used anywhere in the product
 * MUST come from one of these variables -- constitution Principle XIV
 * (Design Tokens and Cross-Platform Consistency).
 *
 * Token names encode role ("--re-surface-card"), not a fixed visual
 * meaning, since the same token can represent different things in
 * different contexts (style-guide.md Section 3).
 */

:root {
  /* Color -- Core Brand Colors (Section 3) */
  --re-color-primary: #2563eb; /* Circuit Blue */
  --re-color-primary-dark: #0f172a; /* Kernel Navy */
  --re-color-secondary: #06b6d4; /* Compile Cyan */
  --re-color-accent: #22c55e; /* Signal Green */
  --re-surface-page: #f8fafc; /* Interface Gray */
  --re-surface-card: #ffffff; /* Panel White */
  --re-border-card: #e2e8f0; /* Trace Line */
  --re-surface-nav-active: #dbeafe; /* Active Blue Wash */
  --re-color-nav-text: #cbd5e1; /* Nav Mist */
  --re-color-text-primary: #111827; /* Graphite */

  /* Color -- Layout Surface Colors (Section 3) */
  --re-surface-card-featured: #0f172a;
  --re-surface-card-hover: #eff6ff;
  --re-surface-card-selected: #dbeafe;
  --re-surface-nav: #0f172a;
  --re-surface-nav-item-active: #2563eb;
  --re-border-nav-divider: #334155;

  /* Color -- Chat and Async Status Surface Colors (Section 3) */
  --re-surface-chat: #ffffff;
  --re-surface-chat-floating: #ffffff;
  --re-border-chat: #e2e8f0;
  --re-color-chat-accent: #06b6d4;
  --re-surface-status-dock: #0f172a;
  --re-color-status-active: #2563eb;
  --re-color-status-complete: #22c55e;

  /* Color -- state cues, paired with text/icon/shape, never used alone
     (Section 9) */
  --re-color-attention: #f59e0b; /* Amber */
  --re-color-warning: #ea580c; /* Orange */
  --re-color-error: #dc2626; /* Red */
  --re-color-success: #22c55e; /* Green */
  --re-color-info: #06b6d4; /* Cyan */
  --re-color-disabled: #64748b; /* Slate */

  /* Color -- Pill and Tag Spectrum (Section 3). Reusable visual tokens,
     not fixed meanings -- define local meaning near the component. */
  --re-pill-color-1: #2563eb; /* Blue */
  --re-pill-color-2: #7c3aed; /* Violet */
  --re-pill-color-3: #0891b2; /* Cyan */
  --re-pill-color-4: #ea580c; /* Orange */
  --re-pill-color-5: #dc2626; /* Red */
  --re-pill-color-6: #0f766e; /* Teal */
  --re-pill-color-7: #db2777; /* Pink */
  --re-pill-color-8: #64748b; /* Slate */
  --re-pill-color-9: #9333ea; /* Purple */
  --re-pill-color-10: #ca8a04; /* Gold */

  /* Typography (Section 4). System-first so the product renders natively
     everywhere without a font download; do not depend on Inter. */
  --re-font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --re-font-heading: var(--re-font-sans);
  --re-font-mono:
    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    Monaco, "Courier New", monospace;
  --re-font-label:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;
  --re-font-print: Arial, Helvetica, sans-serif;

  /* Spacing (Section 5) */
  --re-space-1: 4px;
  --re-space-2: 8px;
  --re-space-3: 12px;
  --re-space-4: 16px;
  --re-space-5: 24px;
  --re-space-6: 32px;
  --re-space-7: 48px;
  --re-space-8: 64px;

  /* Radius and border (Section 21) */
  --re-radius-card: 12px;
  --re-radius-pill: 999px;
  --re-radius-chip: 9px;
  --re-border-focus: 2px solid var(--re-color-primary);

  /* Elevation (Section 21). Subtle by default -- the work should carry
     the weight, not the decoration (Section 5). */
  --re-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --re-shadow-float: 0 12px 24px rgba(15, 23, 42, 0.18);

  /* Motion (Section 11, Section 21) */
  --re-motion-fast: 150ms;
  --re-motion-panel: 210ms;
  --re-motion-spin: 700ms;
  --re-ease-standard: ease-out;

  /* Breakpoints (Section 21), as reference values. Media queries can't
     read custom properties, so any @media rule using these numbers must
     be kept in sync with them by hand. */
  --re-breakpoint-mobile: 480px;
  --re-breakpoint-tablet: 768px;
  --re-breakpoint-desktop: 1200px;
}

/* Reduced motion (Section 11): replace animation with instant state
   changes rather than removing the underlying state information. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --re-motion-fast: 0ms;
    --re-motion-panel: 0ms;
    /* A 0ms infinite animation holds at its end frame -- a static ring, not a
       spinning one -- rather than needing a second rule to remove it outright. */
    --re-motion-spin: 0ms;
  }
}