/* Design tokens for DISCOtech (formerly ecomm-copilot).
 *
 * This file is the single source of truth for color, type, and spacing:
 * components reference these custom properties rather than hardcoding hex or
 * px values, so the palette can be re-themed from one place. Retheming to the
 * DISCOtech brand palette (2026-09-30) changed only the values below — every
 * variable keeps its original name, so no call site elsewhere in this file
 * (or in the JS chart helpers) needed to move.
 *
 * --signal-red is unchanged and keeps its original job: warnings, validation
 * errors, destructive-action hover, decline deltas, and unread/alert badges.
 * Red was deliberately NOT retired in favor of a brand color there — it's the
 * one hue users already read as "something needs attention," and swapping it
 * for magenta/violet would quietly make error states less recognizable.
 * --accent is new: the brand's Electric Blue, used only where the intent was
 * always decorative/identity rather than a warning — the red-rule accent bar,
 * the active-nav-item dot, the landing page's step-number accent, and "this
 * is my brand" highlighting in Competitive Intelligence (which used to be an
 * arbitrary red; tying it to the real brand color is a small coherence win).
 * Everything else that used red for interactive hover feedback (sortable
 * column headers, "add" links, chip close buttons, etc.) was left as-is. */

/* --- Self-hosted Inter, four weights. No CDN: the app must render offline. --- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/Inter-Bold.woff2") format("woff2");
}

:root {
  /* --- Color: DISCOtech brand palette --- */
  --black: #0b1220;          /* Midnight — nav rail bg; primary button fill; primary text on light */
  --graphite: #132a52;       /* Navy — raised surfaces inside the dark rail only */
  --faint-gray: #1e3a66;     /* hairlines inside the dark rail; avatar chip fill */
  --mid-gray: #64748b;       /* Slate — secondary body text on light; secondary numerics */
  --cool-gray: #94a3b8;      /* labels, captions, metadata, muted nav items */
  --canvas: #eaeff7;         /* Light Gray — page background; text color on the dark rail */
  --surface: #ffffff;        /* White — card fill */
  --border: #d7deea;         /* card borders; table header rules on light */
  --divider: #eef2f8;        /* table row dividers (lighter than border) */
  --placeholder: #e7ecf3;    /* image placeholder fill; empty data-bar track */
  --control-border: #c7d2e0; /* outline button borders; chip borders */
  --row-hover: #f6f8fc;      /* table row hover; the highlighted "this is you" row */
  --signal-red: #ff3b30;     /* warnings, validation errors, destructive hover, decline deltas, alert badges */
  --signal-green: #16a34a;   /* positive actions — "Fix and Download" image-fix links (readable on white) */
  --accent: #2e6dff;         /* Electric Blue — brand-identity accent (see file header) */

  /* --- Typography --- */
  --font: "Inter", system-ui, sans-serif;

  /* --- Spacing scale (4px base). Named by px value for direct mapping. --- */
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-12: 12px;
  --space-14: 14px;   /* the uniform card gap in every grid */
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-34: 34px;   /* page padding left/right/top */
  --space-52: 52px;
  --space-60: 60px;   /* page padding bottom */

  /* --- Borders & radii. Nothing rounder than 4px; no shadows anywhere. --- */
  --radius-card: 4px;
  --radius-chip: 2px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fade: 180ms;
}

/* --- Base reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The characteristic tracked-uppercase label. Nearly every card starts with
 * one. The workspace uses 9.5px/+0.11em; the public surface overrides to
 * 10px/+0.12em in its own stylesheet. */
.label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cool-gray);
}

/* The 32x2px rule that sits above a card headline when it needs an accent.
 * This is the only accent-card treatment; no left-border accent cards.
 * Kept the name "red-rule" (it's referenced by that class across every
 * template) even though it now renders in the brand's electric blue. */
.red-rule {
  width: 32px;
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: 9px 0;
}

/* Custom scrollbars, per spec: 10px, square, thumb #d6d6d6. */
* {
  scrollbar-width: thin;
  scrollbar-color: #d6d6d6 transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: #d6d6d6;
  border-radius: 0;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* Respect reduced-motion preferences (quality floor from the design skill). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}