/* ==========================================================================
   AgentVista — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Never hard-code a value elsewhere — always reference these variables.
   Dark is the default; [data-theme="light"] overrides only what differs.
   ========================================================================== */

:root {
  /* Native UI (scrollbars, selects, form controls) follows the dark theme */
  color-scheme: dark;

  /* ---- Surfaces (near-black stack) ---- */
  --bg:            #08090b;
  --bg-elev:       #0c0e12;
  --surface:       #101216;
  --surface-2:     #16181d;
  --surface-3:     #1c1f26;

  /* ---- Borders ---- */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(59, 130, 246, 0.45);

  /* ---- Text ---- */
  --text:       #f2f4f7;
  --text-muted: #9aa1ab;
  --text-faint: #6b7280;

  /* ---- Accent: blue ---- */
  --accent:     #3b82f6;                 /* links / marks on dark — 5.7:1 */
  --accent-hi:  #60a5fa;                 /* hover / emphasis */
  --accent-solid: #2563eb;               /* button bg — 5.3:1 vs white */
  --accent-solid-hover: #1d4ed8;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-glow: rgba(59, 130, 246, 0.22);

  /* ---- Status ---- */
  --ok:        #4ade80;
  --ok-soft:   rgba(34, 197, 94, 0.14);
  --warn:      #facc15;
  --warn-soft: rgba(234, 179, 8, 0.14);
  --err:       #f87171;
  --err-soft:  rgba(239, 68, 68, 0.14);

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

  --fs-xs:   0.75rem;                      /* 12 */
  --fs-sm:   0.875rem;                     /* 14 */
  --fs-base: 1rem;                         /* 16 */
  --fs-md:   1.125rem;                     /* 18 */
  --fs-lg:   1.375rem;                     /* 22 */
  --fs-xl:   1.75rem;                      /* 28 */
  --fs-2xl:  clamp(1.75rem, 3.2vw, 2.25rem);   /* 28 -> 36 */
  --fs-3xl:  clamp(2rem, 4.4vw, 3rem);         /* 32 -> 48 */
  --fs-hero: clamp(2.5rem, 6vw, 4.25rem);      /* 40 -> 68 */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.62;

  --ls-tight: -0.03em;
  --ls-snug:  -0.02em;
  --ls-wide:  0.12em;

  /* ---- Spacing: 8pt grid ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 80px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* ---- Layout ---- */
  --container: 1120px;
  --gutter: 24px;
  --nav-h: 68px;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* ---- Surfaces that vary by theme ---- */
  --nav-bg:       rgba(8, 9, 11, 0.72);
  --nav-bg-solid: rgba(8, 9, 11, 0.88);
  --hover-wash:   rgba(255, 255, 255, 0.025);
  --hover-fill:   rgba(255, 255, 255, 0.06);
  --hover-line:   rgba(255, 255, 255, 0.28);
  --field-bg:     var(--surface);
  --field-border: var(--border);
  --sent-border:  rgba(34, 197, 94, 0.35);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 390ms;
  --dur-slow: 810ms;
}

/* ==========================================================================
   Light theme — only what differs from dark.
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg:            #ffffff;
  --bg-elev:       #f6f7f9;
  --surface:       #ffffff;
  --surface-2:     #eef0f3;
  --surface-3:     #e4e7eb;

  --border:        rgba(10, 12, 16, 0.12);
  --border-strong: rgba(10, 12, 16, 0.24);
  --border-accent: rgba(37, 99, 235, 0.45);

  --text:       #0a0c10;
  --text-muted: #565d69;
  --text-faint: #8a919d;

  --accent:     #2563eb;                /* links on white — 5.3:1 */
  --accent-hi:  #1d4ed8;
  --accent-solid: #2563eb;
  --accent-solid-hover: #1e40af;
  --accent-soft: rgba(37, 99, 235, 0.09);
  --accent-glow: rgba(37, 99, 235, 0.12);

  --ok:      #15803d;
  --ok-soft: rgba(21, 128, 61, 0.10);

  --shadow-sm: 0 1px 2px rgba(10, 12, 16, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 12, 16, 0.10);
  --shadow-lg: 0 24px 60px rgba(10, 12, 16, 0.14);

  --nav-bg:       rgba(255, 255, 255, 0.75);
  --nav-bg-solid: rgba(255, 255, 255, 0.92);
  --hover-wash:   rgba(10, 12, 16, 0.03);
  --hover-fill:   rgba(10, 12, 16, 0.05);
  --hover-line:   rgba(10, 12, 16, 0.22);
  --field-bg:     #ffffff;
  --field-border: rgba(10, 12, 16, 0.16);
  --sent-border:  rgba(21, 128, 61, 0.35);
}