/* ============================================================
   MiDocuIA — Foundations: Color + Type
   "A premium conversational library powered by intelligence."
   ============================================================ */

/* -------- Web fonts ---------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant/CormorantGaramond-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---------- Brand palette (from brief) ---------- */
  --color-plum:           #4B2E83;  /* primary — deep intellectual purple */
  --color-vellum:         #D8D2C8;  /* secondary — warm editorial gray */
  --color-paper:          #FAF9F7;  /* base background — soft white */
  --color-ink:            #2A2A2A;  /* base type — minimal dark */

  /* ---------- Plum scale (primary) ---------- */
  --plum-50:   #F4F0FB;
  --plum-100:  #EDE7F8;
  --plum-200:  #D7CAEC;
  --plum-300:  #B6A1DA;
  --plum-400:  #8867BD;
  --plum-500:  #4B2E83;   /* base */
  --plum-600:  #3D2569;
  --plum-700:  #2F1C50;
  --plum-800:  #221538;
  --plum-900:  #150D23;

  /* ---------- Paper / Vellum scale (neutral, warm) ---------- */
  --paper-0:   #FFFFFF;
  --paper-50:  #FAF9F7;   /* base canvas */
  --paper-100: #F4F1EC;   /* panel */
  --paper-200: #ECE7DE;   /* divider field */
  --paper-300: #D8D2C8;   /* vellum — strong neutral */
  --paper-400: #B8B1A4;
  --paper-500: #95908A;   /* ink-subtle */
  --paper-600: #6B6660;   /* ink-muted */
  --paper-700: #4A4642;
  --paper-800: #2A2A2A;   /* ink */
  --paper-900: #1A1917;

  /* ---------- Accents (editorial, restrained) ---------- */
  --accent-copper:    #B07A4B;   /* citation / highlight */
  --accent-copper-50: #F6EDE2;
  --accent-sage:      #6B7F5E;   /* positive / annotation */
  --accent-sage-50:   #ECEFE5;
  --accent-oxblood:   #8B3A3A;   /* destructive */
  --accent-oxblood-50:#F4E4E1;

  /* ---------- Foreground (semantic ink) ---------- */
  --fg-1:        var(--paper-800);   /* primary text */
  --fg-2:        var(--paper-700);   /* secondary text */
  --fg-3:        var(--paper-600);   /* muted text / meta */
  --fg-4:        var(--paper-500);   /* placeholder, captions */
  --fg-on-plum:  var(--paper-50);
  --fg-link:     var(--plum-500);

  /* ---------- Background (semantic surfaces) ---------- */
  --bg-canvas:   var(--paper-50);    /* app canvas */
  --bg-surface:  var(--paper-0);     /* cards, sheets */
  --bg-panel:    var(--paper-100);   /* sidebars, secondary panels */
  --bg-sunken:   var(--paper-200);   /* code, inputs */
  --bg-plum:     var(--plum-500);
  --bg-plum-soft:var(--plum-50);
  --bg-highlight:var(--accent-copper-50);  /* doc highlight */

  /* ---------- Borders ---------- */
  --border-hairline: rgba(42, 42, 42, 0.08);  /* 1px on paper */
  --border-quiet:    rgba(42, 42, 42, 0.12);
  --border-strong:   rgba(42, 42, 42, 0.20);
  --border-plum:     var(--plum-500);

  /* ---------- Semantic ---------- */
  --semantic-success-fg: var(--accent-sage);
  --semantic-success-bg: var(--accent-sage-50);
  --semantic-warning-fg: var(--accent-copper);
  --semantic-warning-bg: var(--accent-copper-50);
  --semantic-danger-fg:  var(--accent-oxblood);
  --semantic-danger-bg:  var(--accent-oxblood-50);

  /* ============================================================
     TYPE
     ============================================================ */
  --font-serif: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-sans:  "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale (px → rem at 16px root) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  /* Line heights */
  --lh-tight:  1.08;
  --lh-snug:   1.22;
  --lh-normal: 1.48;
  --lh-prose:  1.62;

  /* Tracking */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal: 0;
  --tr-wide:   0.04em;
  --tr-eyebrow:0.18em;   /* uppercase eyebrows */

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============================================================
     SPACE / RADIUS / SHADOW / MOTION
     ============================================================ */
  --space-0:  0;
  --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;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* default — "subtle rounded corners" */
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Soft, paper-like shadows */
  --shadow-1: 0 1px 2px rgba(42, 42, 42, 0.04), 0 1px 1px rgba(42, 42, 42, 0.03);
  --shadow-2: 0 2px 6px rgba(42, 42, 42, 0.05), 0 1px 2px rgba(42, 42, 42, 0.04);
  --shadow-3: 0 8px 24px rgba(42, 42, 42, 0.06), 0 2px 6px rgba(42, 42, 42, 0.04);
  --shadow-4: 0 24px 48px rgba(42, 42, 42, 0.08), 0 6px 12px rgba(42, 42, 42, 0.05);
  --shadow-inset-quiet: inset 0 0 0 1px var(--border-hairline);
  --shadow-focus: 0 0 0 3px rgba(75, 46, 131, 0.18);

  /* Motion — restrained, editorial */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 0.6, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use as a starting point; components may override.
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-canvas);
  font-feature-settings: "ss01", "cv11";   /* Inter editorial alts */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display,
h1.display {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(var(--fs-48), 6vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  color: var(--fg-2);
  text-wrap: pretty;
}
.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

.meta, small, .caption {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

a {
  color: var(--fg-link);
  text-decoration-color: var(--plum-200);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-2) var(--ease-standard);
}
a:hover { color: var(--plum-700); text-decoration-color: var(--plum-400); }

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

::selection {
  background: var(--accent-copper-50);
  color: var(--fg-1);
}

/* Editorial blockquote — used for AI citations */
.quote, blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 2px solid var(--plum-500);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  margin: var(--space-4) 0;
}

/* Citation chip — inline source pill */
.cite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--plum-700);
  background: var(--plum-50);
  border: 1px solid var(--plum-200);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  vertical-align: 1px;
}

/* Document highlight (passage callout) */
mark, .doc-highlight {
  background: linear-gradient(transparent 55%, var(--accent-copper-50) 55%);
  color: inherit;
  padding: 0 2px;
}