/* ============================================================
 * Discovery AI — Design System
 * Color & Type Foundations
 *
 * THIS FILE MIRRORS THE DAIClient CODEBASE
 * (app/globals.css → :root). The product is the source of truth;
 * any divergence between this file and the codebase is a bug.
 *
 * Discovery AI is a document-discovery and AI-agent configuration
 * platform for in-house counsel and General Counsel. The aesthetic
 * is "lightly serious" — professional, restrained, never stiff.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ----------------------------------------------------------
   * PRIMARY — the Discovery AI violet ramp
   * Exactly as defined in DAIClient/app/globals.css
   * ---------------------------------------------------------- */
  --primary:        #6652ff;   /* alias for primary-100 */
  --primary-100:    #6652ff;   /* brand */
  --primary-80:     #9372ff;   /* hover */
  --primary-60:     #b8a4fb;   /* secondary accent */
  --primary-40:     #ccc6ff;   /* borders / dividers */
  --primary-20:     #eaebff;   /* light backgrounds */
  --primary-10:     #eeeefc;   /* subtle backgrounds */

  /* Convenience aliases used by older preview files */
  --brand-600:      var(--primary-100);
  --brand-700:      #2c32ff;
  --brand-500:      var(--primary-60);
  --brand-400:      #8969bd;
  --brand-50:       var(--primary-10);
  --brand-75:       var(--primary-20);
  --brand-100:      var(--primary-10);
  --brand-150:      #eeeefc;
  --brand-200:      #e9e8f3;
  --brand-250:      #dfe1f5;
  --brand-300:      var(--primary-40);
  --brand-350:      #c6c1e9;

  /* ----------------------------------------------------------
   * BLACK RAMP — the neutral foreground/border scale
   * ---------------------------------------------------------- */
  --black-100:      #15141d;   /* headings */
  --black-80:       #333245;   /* body on dark / strong copy */
  --black-60:       #5b5872;   /* DEFAULT foreground / body */
  --black-40:       #928fa7;   /* muted / placeholder */
  --black-20:       #cbc9dc;   /* borders / dividers */
  --black-10:       #e9e8f3;   /* light borders */
  --black-5:        #f5f5fa;   /* page background (light surface) */

  /* Legacy foreground aliases (kept for preview cards) */
  --fg-1:           var(--black-100);
  --fg-2:           var(--black-100);
  --fg-3:           var(--black-80);
  --fg-4:           var(--black-80);
  --fg-5:           var(--black-60);
  --fg-6:           #5a5484;             /* foreground-2 from codebase */
  --fg-7:           var(--black-40);
  --fg-8:           #a7a6ae;
  --fg-on-brand:    #ffffff;

  /* ----------------------------------------------------------
   * SURFACES & BORDERS
   * ---------------------------------------------------------- */
  --surface-0:      #ffffff;            /* card / panel — `--background` is oklch(1 0 0) */
  --surface-1:      var(--black-5);     /* page wash */
  --surface-2:      #f4f4f5;            /* deeper neutral */
  --foreground:     var(--black-60);    /* DEFAULT text color */
  --foreground-2:   #5a5484;

  --border:         #dfe1f5;            /* THE border color — used everywhere */
  --line:           #dfe1f5;
  --menu-hover:     #f6f6fd;            /* sidebar hover bg */
  --border-1:       var(--black-10);
  --border-2:       var(--black-10);
  --border-3:       #dfe1f5;
  --border-4:       var(--primary-40);
  --border-strong:  #72727A;

  /* ----------------------------------------------------------
   * SIGNATURE BACKDROP — the lavender gradient
   * Note: in production the app background is white (--background).
   * The lavender gradient comes from the avatar tokens + decorative
   * surfaces (empty states, marketing). It is the BRAND backdrop,
   * not the app chrome background.
   * ---------------------------------------------------------- */
  --avatar-gradient-start: #f4f4ff;
  --avatar-gradient-end:   #efeffd;
  --brand-gradient: linear-gradient(180deg, #f4f4ff 0%, #efeffd 100%);
  --surface-app:    var(--brand-gradient);

  /* ----------------------------------------------------------
   * SEMANTIC — feedback / status
   * ---------------------------------------------------------- */
  --alert-red:      #e95a50;   /* errors, destructive, overdue */
  --warning-yellow: #f5a623;   /* warnings */
  --success-green:  #52c41a;   /* success */
  --danger:         var(--alert-red);

  /* ----------------------------------------------------------
   * AGENT COLORS — distinct hue per agent type
   * Used as accents in agent tags, score chips, status pills.
   * Brand violet is RESERVED for product chrome; these are the
   * only secondary hues sanctioned by the system.
   * ---------------------------------------------------------- */
  --responsive-100: #7287ff;   /* Responsive / RFP agent */
  --issues-100:     #ff72ff;   /* Issues agent */
  --privilege-100:  #85e25d;   /* Privilege agent */
  --redaction-100:  #ffe44b;   /* Redaction (core feature) */

  /* ----------------------------------------------------------
   * SCORING — relevance score colors
   * Specifically for agent-scored document review.
   * ---------------------------------------------------------- */
  --score-relevant:     #27996a;
  --score-not-relevant: #ed4747;
  --score-partial:      #f2b638;
  --score-unscored:     #c4c6d4;

  /* ----------------------------------------------------------
   * RADII — matches codebase --radius: 0.625rem (10px) base
   * ---------------------------------------------------------- */
  --radius:         10px;
  --radius-sm:      6px;       /* radius - 4 */
  --radius-md:      8px;       /* radius - 2 */
  --radius-lg:      10px;      /* radius */
  --radius-xl:      14px;      /* radius + 4 */
  --radius-pill:    16px;
  --radius-full:    999px;
  --radius-xs:      2px;       /* artboard */

  /* ----------------------------------------------------------
   * ELEVATION — soft, violet-tinted shadows
   * Codebase uses Tailwind defaults; these are the design-system
   * equivalents tuned for the violet-on-lavender palette.
   * ---------------------------------------------------------- */
  --shadow-xs:      0 1px 2px rgba(22, 19, 49, 0.05);
  --shadow-sm:      0 1px 2px rgba(22, 19, 49, 0.06), 0 1px 3px rgba(22, 19, 49, 0.08);
  --shadow-md:      0 4px 8px -2px rgba(22, 19, 49, 0.10), 0 2px 4px -2px rgba(22, 19, 49, 0.06);
  --shadow-lg:      0 12px 24px -4px rgba(22, 19, 49, 0.12), 0 4px 8px -2px rgba(22, 19, 49, 0.06);
  --shadow-focus:   0 0 0 3px rgba(102, 82, 255, 0.18);

  /* ----------------------------------------------------------
   * SPACING — Tailwind 4px base; tokens for readability
   * ---------------------------------------------------------- */
  --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;

  /* ----------------------------------------------------------
   * TYPOGRAPHY — Inter only, exact codebase scale
   * (app/globals.css → text-h1..text-h5, text-body1/2, text-caption, text-xs)
   * ---------------------------------------------------------- */
  --font-inter:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:      var(--font-inter);
  --font-mono:      ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --text-h1:        24px;   --leading-h1:        36px;   /* page titles */
  --text-h2:        20px;   --leading-h2:        32px;   /* section headings */
  --text-h3:        18px;   --leading-h3:        28px;   /* sub-sections */
  --text-h4:        16px;   --leading-h4:        24px;   /* card titles */
  --text-h5:        14px;   --leading-h5:        20px;   /* labels */
  --text-body1:     16px;   --leading-body1:     24px;   /* primary body */
  --text-body2:     14px;   --leading-body2:     20px;   /* secondary body (default) */
  --text-caption:   12px;   --leading-caption:   16px;   /* captions, meta */
  --text-xs:        10px;   --leading-xs:        12px;   /* fine print */

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

  /* Legacy size tokens (used by preview files) */
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px;
  --fs-14: 14px; --fs-16: 16px; --fs-18: 18px;
  --fs-20: 20px; --fs-24: 24px;
}

/* ============================================================
 * Base + semantic typography classes
 * Mirrors the .text-h1 / .text-body2 / .text-caption utilities
 * used throughout the codebase. Add .font-semibold etc. for
 * weight changes — Inter is the only family.
 * ============================================================ */
html, body { font-family: var(--font-inter); color: var(--foreground); }

.text-h1      { font-size: var(--text-h1);      line-height: var(--leading-h1);      font-weight: 600; color: var(--black-100); letter-spacing: -0.005em; }
.text-h2      { font-size: var(--text-h2);      line-height: var(--leading-h2);      font-weight: 600; color: var(--black-100); }
.text-h3      { font-size: var(--text-h3);      line-height: var(--leading-h3);      font-weight: 600; color: var(--black-100); }
.text-h4      { font-size: var(--text-h4);      line-height: var(--leading-h4);      font-weight: 600; color: var(--black-100); }
.text-h5      { font-size: var(--text-h5);      line-height: var(--leading-h5);      font-weight: 500; color: var(--black-80); }
.text-body1   { font-size: var(--text-body1);   line-height: var(--leading-body1);   font-weight: 400; color: var(--black-80); }
.text-body2   { font-size: var(--text-body2);   line-height: var(--leading-body2);   font-weight: 400; color: var(--black-60); }
.text-caption { font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: 400; color: var(--black-60); }
.text-xs-ds   { font-size: var(--text-xs);      line-height: var(--leading-xs);      font-weight: 400; color: var(--black-40); }

/* Legacy semantic classes (preview cards depend on these) */
.t-page-title    { font: 700 24px/36px var(--font-inter); color: var(--black-100); letter-spacing: -0.005em; }
.t-section-title { font: 600 20px/28px var(--font-inter); color: var(--black-80); }
.t-h3            { font: 600 18px/24px var(--font-inter); color: var(--black-80); }
.t-h4            { font: 600 16px/24px var(--font-inter); color: var(--black-80); }
.t-body          { font: 400 14px/20px var(--font-inter); color: var(--black-60); }
.t-body-strong   { font: 500 14px/20px var(--font-inter); color: var(--black-80); }
.t-body-lg       { font: 400 16px/24px var(--font-inter); color: var(--black-80); }
.t-label         { font: 500 14px/20px var(--font-inter); color: var(--black-80); }
.t-label-sm      { font: 500 12px/16px var(--font-inter); color: var(--black-80); }
.t-caption       { font: 400 12px/16px var(--font-inter); color: var(--black-60); }
.t-meta          { font: 400 10px/16px var(--font-inter); color: var(--black-60); }
.t-overline      { font: 400 10px/12px var(--font-inter); color: var(--black-40); }
.t-link          { color: var(--primary-100); text-decoration: none; }
.t-link:hover    { text-decoration: underline; }
.t-danger        { color: var(--alert-red); }