@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* =============================================================================
   LEXO DESIGN SYSTEM — Foundations: Color + Type
   -----------------------------------------------------------------------------
   Direction: "Sovereign Counsel". An evolution of the original Lexo AI brand
   (shadcn blue / dark SaaS) toward a sober, trustworthy identity that speaks to
   the legal profession — warm parchment, sovereign navy ink, antique brass, and
   a serif display face for gravitas. UI body type stays Inter for clarity.

   Load order in an HTML file:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================== */

:root {
  /* ---- Brand fonts ---------------------------------------------------- */
  /* Direction "Technique" (default): engineered grotesque display + mono accents
     for a tech/security read, while Inter keeps body legibility. The serif
     "Édition" direction (Spectral) is still available via the Typographie tweak. */
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* =========================================================================
     COLOR — Base palette (raw values; reference via semantic tokens below)
     ====================================================================== */

  /* Parchment / paper neutrals (warm) */
  --paper-0:  #FCFBF8;   /* brightest surface */
  --paper-50: #F8F5EF;
  --paper-100:#F4F0E8;   /* canvas / page background */
  --paper-200:#ECE6D9;   /* sunken wells, rails */
  --paper-300:#E0D8C7;   /* hairline borders (warm) */
  --paper-400:#CFC6B2;

  /* Sovereign navy ink (authority — "la robe noire") */
  --navy-900: #131D29;
  --navy-800: #18242F;   /* primary text on parchment */
  --navy-700: #1E3349;   /* PRIMARY brand */
  --navy-600: #274660;
  --navy-500: #355B79;
  --navy-300: #8AA0B4;
  --navy-100: #D6DEE6;
  --navy-50:  #EDF1F5;

  /* Antique brass (seals, scales of justice, accent) — champagne, cool & light */
  --brass-700:#8A7340;
  --brass-600:#9E854B;
  --brass-500:#B0985C;   /* ACCENT brand */
  --brass-400:#C8B381;
  --brass-200:#EADEC4;
  --brass-100:#F4EDDC;
  --brass-50: #FAF5EC;

  /* Slate text neutrals (cool, for app chrome) */
  --slate-900:#1B2430;
  --slate-700:#3C4654;
  --slate-500:#5E6878;
  --slate-400:#828B98;
  --slate-300:#AEB5C0;
  --slate-200:#D3D8DF;
  --slate-100:#E8EBEF;
  --slate-50: #F4F6F8;
  --white: #FFFFFF;

  /* Status hues (muted, never neon) */
  --bordeaux-600:#7E332F;
  --bordeaux-500:#9A3B36;  /* danger / urgent */
  --bordeaux-100:#F1E0DD;
  --forest-600: #355C46;
  --forest-500: #3F6B52;   /* success / validated */
  --forest-100: #E2EBE4;
  --amber-600:  #9E7426;
  --amber-500:  #B5862F;   /* warning / pending */
  --amber-100:  #F5EAD2;

  /* =========================================================================
     COLOR — Semantic tokens  (USE THESE in components)
     ====================================================================== */
  --bg:            var(--paper-100);   /* page canvas */
  --surface:       var(--paper-0);     /* cards, sheets */
  --surface-sunken:var(--paper-200);   /* wells, inputs-on-card */
  --surface-rail:  var(--paper-50);    /* sidebars, headers */

  --fg:            var(--navy-800);    /* primary text */
  --fg-muted:      var(--slate-500);   /* secondary text */
  --fg-subtle:     var(--slate-400);   /* tertiary / captions */
  --fg-on-dark:    var(--paper-50);    /* text on navy/dark */

  --border:        var(--paper-300);   /* warm hairline on parchment */
  --border-strong: var(--paper-400);
  --border-cool:   var(--slate-200);   /* hairline on cool app chrome */

  --primary:           var(--navy-700);
  --primary-hover:     var(--navy-800);
  --primary-active:    var(--navy-900);
  --primary-foreground:var(--paper-50);
  --primary-tint:      var(--navy-50);

  --accent:            var(--brass-500);
  --accent-hover:      var(--brass-600);
  --accent-foreground: var(--navy-900);  /* dark text on light gold — reads like a seal */
  --accent-tint:       var(--brass-100);

  --ring:          color-mix(in oklab, var(--navy-700) 45%, transparent);

  --success: var(--forest-500); --success-tint: var(--forest-100);
  --warning: var(--amber-500);  --warning-tint: var(--amber-100);
  --danger:  var(--bordeaux-500);--danger-tint: var(--bordeaux-100);

  /* Email triage categories (sober legal palette) */
  --tag-urgent-fg: var(--bordeaux-600); --tag-urgent-bg: var(--bordeaux-100);
  --tag-client-fg: var(--navy-700);     --tag-client-bg: var(--navy-50);
  --tag-admin-fg:  var(--brass-700);    --tag-admin-bg:  var(--brass-100);
  --tag-info-fg:   var(--slate-700);    --tag-info-bg:   var(--slate-100);

  /* =========================================================================
     RADIUS · SHADOW · SPACING
     ====================================================================== */
  --radius-sm: 5px;
  --radius:    8px;     /* default — measured, not bubbly */
  --radius-md: 11px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* Warm, low, navy-tinted elevation */
  --shadow-xs: 0 1px 2px rgba(24,36,47,.06);
  --shadow-sm: 0 1px 2px rgba(24,36,47,.06), 0 2px 6px rgba(24,36,47,.05);
  --shadow-md: 0 2px 4px rgba(24,36,47,.05), 0 8px 20px rgba(24,36,47,.08);
  --shadow-lg: 0 4px 8px rgba(24,36,47,.06), 0 20px 44px rgba(24,36,47,.12);
  --shadow-ring: 0 0 0 1px var(--border);

  --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;

  /* =========================================================================
     TYPE SCALE  (display = serif Spectral, ui/body = Inter)
     ====================================================================== */
  --text-display: 600 56px/1.05 var(--font-display);
  --text-h1:      600 40px/1.12 var(--font-display);
  --text-h2:      600 30px/1.18 var(--font-display);
  --text-h3:      600 22px/1.28 var(--font-display);
  --text-title:   600 18px/1.35 var(--font-sans);   /* UI section titles */
  --text-body-lg: 400 18px/1.6  var(--font-sans);
  --text-body:    400 15px/1.6  var(--font-sans);
  --text-sm:      400 13.5px/1.5 var(--font-sans);
  --text-caption: 500 12px/1.4  var(--font-sans);
  --text-overline:600 11.5px/1.3 var(--font-sans);
}

/* =============================================================================
   SEMANTIC ELEMENT DEFAULTS  (opt-in: scope under .lexo or apply globally)
   ========================================================================== */
.lexo, body.lexo {
  background: var(--bg);
  color: var(--fg);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lexo :where(h1), .lexo .h1 { font: var(--text-h1); letter-spacing: -0.01em; color: var(--fg); margin: 0; }
.lexo :where(h2), .lexo .h2 { font: var(--text-h2); letter-spacing: -0.005em; color: var(--fg); margin: 0; }
.lexo :where(h3), .lexo .h3 { font: var(--text-h3); color: var(--fg); margin: 0; }
.lexo .display       { font: var(--text-display); letter-spacing: -0.02em; margin: 0; }
.lexo p  { margin: 0; }
.lexo a  { color: var(--primary); text-decoration: none; }
.lexo a:hover { color: var(--accent-hover); }
.lexo code, .lexo pre { font-family: var(--font-mono); font-size: 0.92em; }

/* Utility type classes */
.t-display { font: var(--text-display); letter-spacing: -0.02em; }
.t-h1 { font: var(--text-h1); letter-spacing: -0.01em; }
.t-h2 { font: var(--text-h2); }
.t-h3 { font: var(--text-h3); }
.t-title { font: var(--text-title); }
.t-body-lg { font: var(--text-body-lg); }
.t-body { font: var(--text-body); }
.t-sm { font: var(--text-sm); }
.t-caption { font: var(--text-caption); color: var(--fg-muted); }
.t-overline {
  font: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent);
}
.t-muted { color: var(--fg-muted); }
.t-subtle { color: var(--fg-subtle); }