/*
 * Atlas V0.6 — design tokens.
 *
 * Borrowed from the TK Store DZ marketplace frontend
 * (`tkstore-frontend-seller/src/app/globals.css` — AlignUI raw colors)
 * at the VALUE level only. Atlas does NOT install Tailwind / Mantine /
 * tiptap / React / Next.js; the dependency chain stays Python-only.
 *
 * Typeface: Cairo (Google Font, weight 400/500/600/700, Latin + Arabic
 * subsets). Loaded via @import in the browser; the Atlas FastAPI
 * process makes ZERO outbound HTTP. The sibling marketplace uses the
 * same posture.
 *
 * Spec source: `08_Reports/V06_Atlas_Design_Direction.md`.
 */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap");

:root {
  /* ─── Neutrals — Slate (primary text + surfaces) ─── */
  --atlas-slate-950: #0e121b;
  --atlas-slate-900: #181b25;
  --atlas-slate-800: #222530;
  --atlas-slate-700: #2b303b;
  --atlas-slate-600: #525866;
  --atlas-slate-500: #717784;
  --atlas-slate-400: #99a0ae;
  --atlas-slate-300: #cacfd8;
  --atlas-slate-200: #eaecf0;
  --atlas-slate-100: #f2f5f8;
  --atlas-slate-50:  #f5f7fa;
  --atlas-slate-0:   #ffffff;

  /* ─── Primary — Blue (Atlas accent + brand) ─── */
  --atlas-blue-700: #2547d0;
  --atlas-blue-500: #335cff;
  --atlas-blue-400: #4d82ff;
  --atlas-blue-100: #d5e2ff;
  --atlas-blue-50:  #ebf1ff;

  /* ─── Success — Green (approved_v1) ─── */
  --atlas-green-700: #178c4e;
  --atlas-green-500: #1fc16b;
  --atlas-green-100: #d6f5e8;
  --atlas-green-50:  #e3f7ec;

  /* ─── Warning — Yellow (pending review, draft) ─── */
  --atlas-yellow-700: #c99a2c;
  --atlas-yellow-500: #f6b51e;
  --atlas-yellow-100: #ffefcc;
  --atlas-yellow-50:  #fffaeb;

  /* ─── Danger — Red (deprecated, refused). Used sparingly. ─── */
  --atlas-red-700: #d02533;
  --atlas-red-500: #fb3748;
  --atlas-red-100: #ffd5d8;
  --atlas-red-50:  #ffebec;

  /* ─── Trust-tier accent colors (used by /chat citation cards) ─── */
  --atlas-orange-700: #ce5e12;
  --atlas-orange-500: #fa7319;
  --atlas-orange-50:  #fff3eb;
  --atlas-purple-500: #7d52f4;
  --atlas-purple-50:  #f4f0ff;

  /* ─── Typography ─── */
  --atlas-font:        "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --atlas-font-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --atlas-text-display: 28px;   /* Hero / dashboard greeting */
  --atlas-text-h1:      22px;
  --atlas-text-h2:      18px;
  --atlas-text-h3:      15px;
  --atlas-text-body:    14px;
  --atlas-text-small:   13px;
  --atlas-text-micro:   11px;

  --atlas-lh-display: 36px;
  --atlas-lh-h1:      30px;
  --atlas-lh-h2:      26px;
  --atlas-lh-h3:      22px;
  --atlas-lh-body:    22px;
  --atlas-lh-small:   20px;
  --atlas-lh-micro:   16px;

  --atlas-weight-regular: 400;
  --atlas-weight-medium:  500;
  --atlas-weight-semibold: 600;
  --atlas-weight-bold:    700;

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

  /* ─── Border-radius (4-tier rhythm) ─── */
  --atlas-radius-pill: 9999px;
  --atlas-radius-chip: 4px;
  --atlas-radius-card: 8px;
  --atlas-radius-elev: 12px;

  /* ─── Shadows ─── */
  --atlas-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
  --atlas-shadow-elev: 0 4px 12px rgba(15, 23, 42, 0.06);
  --atlas-shadow-focus: 0 0 0 2px var(--atlas-blue-100);

  /* ─── Layout ─── */
  --atlas-sidebar-width: 240px;
  --atlas-content-max:   1280px;
  --atlas-content-pad-x: 32px;
  --atlas-content-pad-y: 32px;
  --atlas-header-height: 60px;

  /* ─── Transitions ─── */
  --atlas-transition-fast: 150ms ease-out;
  --atlas-transition-base: 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --atlas-transition-fast: 0ms;
    --atlas-transition-base: 0ms;
  }
}