/* ============================================================================
   RetailAssist AI — Design Tokens
   Sourced verbatim from the A!thera visual system. Do not introduce ad-hoc
   colors, sizes, or spacings elsewhere — reference these variables only.
   ========================================================================== */

:root {
  /* --- Primary palette ---------------------------------------------------- */
  --athera-blue: #5fb8d6;
  --athera-blue-light: #a8d9ec;
  --athera-blue-deep: #2a8fb0; /* accessible interactive text / links */
  --athera-charcoal: #374151;
  --athera-charcoal-light: #4b5563;
  --athera-grey: #6b7280;
  --athera-grey-light: #9ca3af;
  --athera-navy: #0f172a;
  --athera-navy-mid: #1e2b42;

  /* --- Surfaces ----------------------------------------------------------- */
  --athera-white: #ffffff;
  --athera-off-white: #f8f7f4;
  --athera-surface: #f1eee8;

  /* --- Extended palette (sparingly; charts + special callouts) ------------ */
  --athera-amber: #c8955a;
  --athera-amber-light: #e8c49a;
  --athera-steel: #8aa5be;
  --athera-mist: #d4dfe8;

  /* --- Lines / dividers --------------------------------------------------- */
  --athera-line: rgba(55, 65, 81, 0.12);
  --athera-line-light: rgba(55, 65, 81, 0.06);
  --athera-line-dark: rgba(255, 255, 255, 0.08);
  --athera-line-dark-light: rgba(255, 255, 255, 0.06);

  /* --- Semantic state colors (derived from palette, used with icon/text) -- */
  --state-positive: #2a8fb0; /* confident / grounded — blue-deep */
  --state-caution: #c8955a; /* review / medium — amber */
  --state-critical: #b4552f; /* escalation — a restrained warm red, amber family */
  --state-positive-tint: rgba(95, 184, 214, 0.12);
  --state-caution-tint: rgba(200, 149, 90, 0.14);
  --state-critical-tint: rgba(180, 85, 47, 0.12);
  --state-neutral-tint: rgba(55, 65, 81, 0.06);

  /* --- Typography families ------------------------------------------------ */
  --athera-display: "Cormorant Garamond", Georgia, serif;
  --athera-sans: "DM Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --athera-mono: "DM Mono", "Consolas", "Monaco", monospace;

  /* --- Type scale (font-size) --------------------------------------------- */
  --fs-display-xl: clamp(64px, 9vw, 120px);
  --fs-display-lg: clamp(40px, 6vw, 72px);
  --fs-display-md: clamp(28px, 4vw, 48px);
  --fs-display-sm: clamp(20px, 3vw, 32px);
  --fs-body-lg: 18px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-label: 10px;
  --fs-mono: 11px;

  /* --- Weights ------------------------------------------------------------ */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* --- Line-heights ------------------------------------------------------- */
  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --lh-relaxed: 1.7;

  /* --- Letter-spacing ----------------------------------------------------- */
  --ls-display: -0.015em;
  --ls-label: 0.2em;
  --ls-label-tight: 0.12em;

  /* --- Spacing scale (8 → 120) -------------------------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;
  --space-8: 120px;

  /* --- Radii -------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* --- Shadows (restrained — the brand is calm) --------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08);

  /* --- Layout ------------------------------------------------------------- */
  --page-max: 1200px;
  --content-max: 760px;
  --page-pad-x: 48px;
  --header-height: 76px;

  /* --- Motion ------------------------------------------------------------- */
  --transition: all 0.2s ease;

  /* --- Focus ring --------------------------------------------------------- */
  --focus-ring: 2px solid var(--athera-blue-deep);
  --focus-offset: 2px;
}

@media (max-width: 640px) {
  :root {
    --page-pad-x: 24px;
  }
}