/*
 * 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-scheme: light;
  /* 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 */
  /* Text that is blue (links, active labels). Its own role because the blue fill under
     white text can't also be read as text on a dark card (specs/067). */
  --re-color-link: var(--re-color-primary);
  --re-color-link-hover: var(--re-color-primary-dark);

  /* 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 -- interaction and overlay roles. Named for what they're for, so a dark
     theme can redefine them without touching components. */
  --re-color-text-on-fill: #ffffff; /* text/icons on navy, primary, pill and featured fills */
  --re-color-primary-hover: #1d4ed8; /* primary button / icon button hover */
  --re-color-error-hover: #b91c1c; /* destructive link hover */
  --re-border-nav-section: rgba(255, 255, 255, 0.16); /* divider inside the navy nav */
  --re-surface-backdrop: rgba(15, 23, 42, 0.55); /* behind an open popover */
  --re-surface-logo: #ffffff; /* behind company logos -- stays light in any theme */
  --re-ring-guidance: rgba(6, 182, 212, 0.9); /* Cobalt's highlight ring */
  --re-ring-guidance-soft: rgba(6, 182, 212, 0.5);
  --re-ring-guidance-clear: rgba(6, 182, 212, 0);

  /* Color -- print. Paper is always white and ink always black, whatever the screen
     theme (constitution Principle XIV: print-safe output). */
  --re-print-paper: #ffffff;
  --re-print-ink: #000000;
  --re-print-fill: #eeeeee;

  /* Color -- state cues, paired with text/icon/shape, never used alone
     (Section 9) */
  --re-color-attention: #f59e0b; /* Amber */
  /* A yellow fill with dark ink: acting as someone else (the header's access box). */
  --re-color-caution-fill: #facc15;
  --re-color-caution-ink: #1c1917;
  --re-color-warning: #ea580c; /* Orange */
  /* Partial evidence and its gap (TDD report, Evaluate, Compare): yellow, not orange -- the
     fill for borders and tints, the ink for text (yellow text alone doesn't read on white). */
  --re-color-partial: #eab308;
  --re-color-partial-ink: #854d0e;
  --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;
  }
}

/*
 * Dark theme (specs/067). Screen only, so print keeps the light palette (FR-005). The same
 * values twice: once for someone who chose dark in the header, once for a device set to
 * dark when nothing was chosen. core/tests/test_dark_mode.py keeps the two identical.
 * Brand fills under white text (primary, pills, caution, logos) don't change.
 */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --re-color-secondary: #22d3ee;
    --re-color-accent: #4ade80;
    --re-surface-page: #0b1120;
    --re-surface-card: #131c2e;
    --re-border-card: #2a3650;
    --re-surface-nav-active: #1e3a5f;
    --re-color-text-primary: #e5e7eb;
    --re-surface-card-featured: #1c2b4a;
    --re-surface-card-hover: #1a2540;
    --re-surface-card-selected: #1e3a5f;
    --re-surface-nav: #070c18;
    --re-border-nav-divider: #1e293b;
    --re-surface-chat: #131c2e;
    --re-surface-chat-floating: #18233a;
    --re-border-chat: #2a3650;
    --re-color-chat-accent: #22d3ee;
    --re-surface-status-dock: #070c18;
    --re-color-status-active: #60a5fa;
    --re-color-status-complete: #4ade80;
    --re-color-link: #60a5fa;
    --re-color-link-hover: #93c5fd;
    --re-color-error-hover: #fca5a5;
    --re-surface-backdrop: rgba(0, 0, 0, 0.65);
    --re-color-attention: #fbbf24;
    --re-color-warning: #fb923c;
    --re-color-partial-ink: #fde047;
    --re-color-error: #f87171;
    --re-color-success: #4ade80;
    --re-color-info: #22d3ee;
    --re-color-disabled: #94a3b8;
    --re-border-focus: 2px solid var(--re-color-link);
    --re-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
    --re-shadow-float: 0 12px 24px rgba(0, 0, 0, 0.5);
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --re-color-secondary: #22d3ee;
    --re-color-accent: #4ade80;
    --re-surface-page: #0b1120;
    --re-surface-card: #131c2e;
    --re-border-card: #2a3650;
    --re-surface-nav-active: #1e3a5f;
    --re-color-text-primary: #e5e7eb;
    --re-surface-card-featured: #1c2b4a;
    --re-surface-card-hover: #1a2540;
    --re-surface-card-selected: #1e3a5f;
    --re-surface-nav: #070c18;
    --re-border-nav-divider: #1e293b;
    --re-surface-chat: #131c2e;
    --re-surface-chat-floating: #18233a;
    --re-border-chat: #2a3650;
    --re-color-chat-accent: #22d3ee;
    --re-surface-status-dock: #070c18;
    --re-color-status-active: #60a5fa;
    --re-color-status-complete: #4ade80;
    --re-color-link: #60a5fa;
    --re-color-link-hover: #93c5fd;
    --re-color-error-hover: #fca5a5;
    --re-surface-backdrop: rgba(0, 0, 0, 0.65);
    --re-color-attention: #fbbf24;
    --re-color-warning: #fb923c;
    --re-color-partial-ink: #fde047;
    --re-color-error: #f87171;
    --re-color-success: #4ade80;
    --re-color-info: #22d3ee;
    --re-color-disabled: #94a3b8;
    --re-border-focus: 2px solid var(--re-color-link);
    --re-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
    --re-shadow-float: 0 12px 24px rgba(0, 0, 0, 0.5);
  }
}