/* =====================================================================
   DealAgent AI — Design Tokens
   Colors, type, radii, shadows, motion
   ===================================================================== */

/* Fonts — Geist Sans (primary) + Geist Mono. Vercel's typeface; built for tech/SaaS.
   Loaded from Google Fonts. Use weights 400 / 500 / 600 / 700. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* -----------------------------------------------------------------
     COLOR — Primary palette
     ----------------------------------------------------------------- */
  --color-navy-950: #070B1F;   /* Deal Navy — primary text, logo "Deal", premium dark surfaces */
  --color-navy-900: #0B102A;
  --color-navy-800: #11183A;

  --color-blue-700: #005BFF;   /* Signal Blue — gradients, active, AI accents */
  --color-blue-600: #116DFF;   /* Agent Blue — primary CTA, logo "Agent" */
  --color-blue-500: #2D8CFF;
  --color-blue-400: #23A3FF;   /* gradient end */
  --color-blue-200: #BBD5FF;
  --color-blue-100: #EAF2FF;   /* Agent Mist — light surfaces / badges */

  --color-white:    #FFFFFF;   /* Clean White */
  --color-surface:  #F7F8FB;   /* Cloud Surface — page background */

  /* Neutrals */
  --color-gray-900: #111827;
  --color-gray-700: #374151;
  --color-gray-500: #6B7280;   /* Secondary text */
  --color-gray-300: #D1D5DB;
  --color-gray-200: #E5E7EB;   /* Soft Border */
  --color-gray-100: #F3F4F6;

  /* Status — semantic */
  --color-green-600: #14B86A;  /* Margin safe */
  --color-green-100: #E8F8EF;
  --color-amber-500: #F59E0B;  /* Review needed */
  --color-amber-100: #FFF4D6;
  --color-red-500:   #EF4444;  /* Margin risk */
  --color-red-100:   #FEE2E2;

  /* -----------------------------------------------------------------
     SEMANTIC color aliases — use these in product code
     ----------------------------------------------------------------- */
  --fg-1:        var(--color-navy-950);   /* primary text */
  --fg-2:        var(--color-gray-700);
  --fg-muted:    var(--color-gray-500);
  --fg-inverse:  var(--color-white);
  --fg-on-blue:  var(--color-white);

  --bg-page:     var(--color-surface);
  --bg-card:     var(--color-white);
  --bg-subtle:   var(--color-gray-100);
  --bg-soft-blue:var(--color-blue-100);
  --bg-inverse:  var(--color-navy-950);

  --border:      var(--color-gray-200);
  --border-strong: var(--color-gray-300);
  --border-focus: var(--color-blue-600);

  --accent:      var(--color-blue-600);
  --accent-hover:#0F5FE0;
  --accent-press:#0B51C2;

  --status-safe:   var(--color-green-600);
  --status-review: var(--color-amber-500);
  --status-risk:   var(--color-red-500);
  --status-ai:     var(--color-blue-600);

  /* -----------------------------------------------------------------
     GRADIENTS — use sparingly, for AI moments / marketing
     ----------------------------------------------------------------- */
  --gradient-agent: linear-gradient(135deg, #005BFF 0%, #23A3FF 100%);
  --gradient-dark-hero: radial-gradient(circle at top left, #123DFF 0%, #070B1F 45%, #030712 100%);
  --gradient-text-agent: linear-gradient(135deg, #005BFF 0%, #2D8CFF 60%, #23A3FF 100%);

  /* -----------------------------------------------------------------
     TYPE — family, weight, size, leading
     ----------------------------------------------------------------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Type scale (per spec) */
  --fs-display-xl: 64px; --lh-display-xl: 1.05;
  --fs-display-l:  48px; --lh-display-l:  1.08;
  --fs-h1:         36px; --lh-h1:         1.15;
  --fs-h2:         28px; --lh-h2:         1.2;
  --fs-h3:         22px; --lh-h3:         1.3;
  --fs-body-l:     18px; --lh-body-l:     1.55;
  --fs-body:       16px; --lh-body:       1.55;
  --fs-body-s:     14px; --lh-body-s:     1.5;
  --fs-label:      12px; --lh-label:      1.3;
  --fs-metric:     32px; --lh-metric:     1.1;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-label:   0.04em;

  /* -----------------------------------------------------------------
     SPACING — 4px base
     ----------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* -----------------------------------------------------------------
     RADII
     ----------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------------
     SHADOWS — calibrated against navy ink, not pure black
     ----------------------------------------------------------------- */
  --shadow-card:     0 1px 2px rgba(7, 11, 31, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(7, 11, 31, 0.06), 0 1px 2px rgba(7, 11, 31, 0.04);
  --shadow-popover:  0 16px 40px rgba(7, 11, 31, 0.14);
  --shadow-modal:    0 24px 60px rgba(7, 11, 31, 0.20);
  --shadow-focus-ring: 0 0 0 3px rgba(17, 109, 255, 0.20);
  --shadow-blue-glow: 0 8px 24px rgba(17, 109, 255, 0.25);

  /* -----------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 150ms;
  --dur-drawer: 250ms;
  --dur-card: 300ms;
  --dur-ai: 400ms;
}

/* =====================================================================
   Base type styles — apply as component classes
   ===================================================================== */
.ds-body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-display-xl { font-family: var(--font-sans); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.ds-display-l  { font-family: var(--font-sans); font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.ds-h1         { font-family: var(--font-sans); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); color: var(--fg-1); }
.ds-h2         { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 650; letter-spacing: var(--ls-snug); color: var(--fg-1); }
.ds-h3         { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semi); color: var(--fg-1); }
.ds-body-l     { font-family: var(--font-sans); font-size: var(--fs-body-l); line-height: var(--lh-body-l); font-weight: var(--fw-regular); color: var(--fg-2); }
.ds-body-s     { font-family: var(--font-sans); font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: var(--fw-regular); color: var(--fg-2); }
.ds-label      { font-family: var(--font-sans); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-muted); }
.ds-metric     { font-family: var(--font-sans); font-size: var(--fs-metric); line-height: var(--lh-metric); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--fg-1); font-feature-settings: "tnum" 1; }
.ds-mono       { font-family: var(--font-mono); font-size: var(--fs-body-s); }

/* "Agent" gradient — used for highlighting the AI word/brand fragment */
.ds-text-agent {
  background: var(--gradient-text-agent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Reset-ish defaults when using this file standalone */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); }
body { margin: 0; }
* { box-sizing: border-box; }