/* ClinTech Design System — Colors & Type
 * Source of truth: reference/DESIGN_SYSTEM.md
 * Codebase refs: ClinTech-dev/issued3, ClinTech-dev/FairTake
 *
 * Light-mode-first. Sage neutrals (warm gray w/ ~3% green saturation),
 * brand green for structural "you-are-here", AI purple ONLY for AI content,
 * Flag amber for AI informational nudges.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap");

:root {
  /* ─────────── Sage neutrals (replace raw gray-*) ─────────── */
  --sage-50:  #f9fafa;  /* page background */
  --sage-100: #f1f3f2;  /* card/panel surface, hover bg */
  --sage-200: #e2e5e3;  /* borders, dividers */
  --sage-300: #cfd3d1;  /* disabled text, faint borders, drag handles */
  --sage-400: #9a9f9c;  /* placeholder text */
  --sage-500: #6f7572;  /* secondary text, metadata */
  --sage-600: #515654;  /* body text */
  --sage-700: #3e4240;  /* heading text, emphasis */
  --sage-800: #2a2d2b;  /* high-emphasis text */
  --sage-900: #1b1d1c;  /* near-black, foreground */
  --sage-950: #111312;  /* dark-mode backgrounds */

  /* ─────────── Brand green (primary) ───────────
   * Used STRUCTURALLY: active nav, primary buttons, issue borders, "you are here". */
  --primary:             #344c3e;
  --primary-hover:       #2a3e32;
  --primary-light:       #648e75;  /* secondary accent, labels, links */
  --primary-muted:       #e8f0eb;  /* active backgrounds, light green fills */
  --primary-foreground:  #ffffff;

  /* ─────────── AI purple (AI-generated only) ───────────
   * RESERVED for AI content. Do not use elsewhere.
   * Muted plum-slate — desaturated to sit alongside sage neutrals
   * without competing with the brand green. ~30% less chroma
   * than the original electric purple. */
  --ai:          #6b5b95;  /* desaturated plum, was #6b5ce7 */
  --ai-hover:    #594a82;  /* was #5a4bd6 */
  --ai-surface:  #f6f4fa;  /* was #f5f3ff — warmer, less cool */
  --ai-border:   #d9d2e6;  /* was #ddd6fe */
  --ai-text:     #3d3261;  /* was #4c1d95 — deeper, less violet */

  /* ─────────── Flag amber (AI informational) ───────────
   * Stale issues, plan-review hints, untracked concerns. */
  --flag:         #d97706;
  --flag-surface: #fffbeb;
  --flag-border:  #fde68a;
  --flag-text:    #92400e;

  /* ─────────── Semantic actions (standard tailwind) ─────────── */
  --accept-bg:        #f0fdf4;  /* green-50 */
  --accept-bg-hover:  #dcfce7;  /* green-100 */
  --accept-text:      #15803d;  /* green-700 */
  --reject-text:      #dc2626;  /* red-600 */
  --reject-bg-hover:  #fef2f2;  /* red-50 */

  /* ─────────── Shadcn-style semantic aliases ─────────── */
  --background:           #ffffff;
  --foreground:           var(--sage-900);
  --card:                 #ffffff;
  --card-foreground:      var(--sage-900);
  --popover:              #ffffff;
  --popover-foreground:   var(--sage-900);
  --secondary:            var(--sage-100);
  --secondary-foreground: var(--sage-700);
  --muted:                var(--sage-100);
  --muted-foreground:     var(--sage-500);
  --accent:               var(--sage-100);
  --destructive:          #ef4444;
  --destructive-foreground: #ffffff;
  --border:               var(--sage-200);
  --input:                var(--sage-200);
  --ring:                 var(--primary);

  /* ─────────── Radii ─────────── */
  --radius-sm: 0.25rem;  /* 4px — pills, small pills, sub-elements */
  --radius:    0.375rem; /* 6px — inputs, buttons */
  --radius-md: 0.5rem;   /* 8px — cards, dialogs */
  --radius-lg: 0.75rem;  /* 12px — AI cards (rounded-xl) */
  --radius-xl: 1rem;     /* 16px — modals */
  --radius-pill: 9999px;

  /* ─────────── Shadows ─────────── */
  --shadow-sm: 0 1px 2px rgba(17, 19, 18, 0.04);
  --shadow:    0 1px 3px rgba(17, 19, 18, 0.08), 0 1px 2px rgba(17, 19, 18, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(17, 19, 18, 0.08), 0 2px 4px -2px rgba(17, 19, 18, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(17, 19, 18, 0.10), 0 4px 6px -4px rgba(17, 19, 18, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(17, 19, 18, 0.12), 0 8px 10px -6px rgba(17, 19, 18, 0.08);

  /* ─────────── Spacing scale (Tailwind defaults; tokenized) ─────────── */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ─────────── Layout tokens ─────────── */
  --sidebar-w-expanded: 220px;
  --sidebar-w-collapsed: 56px;
  --right-panel-landscape: 420px;
  --topbar-h: 40px;          /* Issued: 2.5rem (h-10) */
  --touch-target-min: 44px;  /* iPad ward-rounds minimum */

  /* ─────────── Type families ─────────── */
  --font-sans:   "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --font-serif:  "Lora", ui-serif, Georgia, Cambria, "Times New Roman", serif; /* scratchpad */

  /* ─────────── Type scale (UI) ─────────── */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.875rem;  /* 30px */
  --fs-4xl:  2.25rem;   /* 36px */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

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

  /* ─────────── Motion ─────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
}

/* Dark mode (secondary) — only essentials inverted */
.dark {
  --background:         var(--sage-950);
  --foreground:         var(--sage-50);
  --card:               var(--sage-900);
  --card-foreground:    var(--sage-50);
  --muted:              var(--sage-800);
  --muted-foreground:   var(--sage-400);
  --border:             var(--sage-800);
  --input:              var(--sage-800);
}

/* ─────────── Semantic typography ─────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--sage-700);
}
h2, .h2 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--sage-700);
}
h3, .h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--sage-700);
}
h4, .h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--sage-700);
}
p, .body {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--sage-600);
}
small, .caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--sage-500);
}
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.scratchpad, .serif {
  font-family: var(--font-serif);
}
.label-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage-500);
}
.label-ai {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai);
}