/* ==========================================================================
   Mosaic by LeadersAtlas — Design Tokens
   Source: leadersatlas/mosaic codebase (widgets/interviewer + curator),
   uploaded brand guide, brand-spec.yaml.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat.ttf') format('truetype-variations'),
       url('fonts/Montserrat.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto.ttf') format('truetype-variations'),
       url('fonts/Roboto.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Poppins — Regular only is self-hosted; other weights pulled from Google. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');

:root {
  /* ---------- Brand Color (single primary) ---------- */
  --brand-primary:        #052A8B;  /* LeadersAtlas deep navy blue — header bg, primary buttons, links */
  --brand-primary-hover:  #184CD4;  /* hover/active state of primary */
  --brand-primary-tint:   rgba(5, 42, 139, 0.06);   /* selected card bg, focused-input bg */
  --brand-primary-glow:   rgba(5, 42, 139, 0.10);   /* focus ring */
  --brand-primary-shadow: rgba(5, 42, 139, 0.30);   /* button hover shadow */

  /* Logomark fills (lifted from full-color logomark gradient) */
  --brand-logo-blue:      #1F75D1;   /* mid blue in mosaic mark */
  --brand-logo-blue-deep: #0F4D9A;
  --brand-logo-blue-light:#5BA9F0;

  /* User-bubble tint pair used by Curator */
  --user-bubble-bg:       #D2E0FF;
  --user-bubble-fg:       #003297;

  /* ---------- Brand Gradients ---------- */
  /* Four canonical gradients. Use 135deg by default (top-left → bottom-right). */
  --gradient-royal:    linear-gradient(135deg, #02288c 0%, #013cda 100%);  /* primary brand gradient */
  --gradient-sky:      linear-gradient(135deg, #799bf5 0%, #c4dbff 100%);  /* light, pale-blue */
  --gradient-midnight: linear-gradient(135deg, #000237 0%, #02288c 100%);  /* deep navy → royal */
  --gradient-deep:     linear-gradient(135deg, #000237 0%, #013cda 100%);  /* deepest contrast */

  /* ---------- Foreground (text) — LIGHT default ---------- */
  --fg-1: #131641;
  --fg-2: #1A1A2E;
  --fg-3: #374151;
  --fg-4: #6B7280;
  --fg-5: #9CA3AF;
  --fg-on-dark: #FFFFFF;
  --fg-on-brand: #FFFFFF;

  /* ---------- Surfaces — LIGHT default ---------- */
  --bg-page:    #FFFFFF;
  --bg-soft:    #FAFBFC;
  --bg-muted:   #F8F9FB;
  --bg-divider: #F3F4F6;
  --bg-elevated:#FFFFFF;

  --border-1: #E5E7EB;
  --border-2: #C4CAD4;
  --border-strong: var(--brand-primary);

  /* Semantic */
  --danger:    #DC2626;
  --danger-bg: #FEF2F2;
  --danger-border: #FECACA;
  --success:   #059669;
  --success-bg: #ECFDF5;
  --success-border: #A7F3D0;
  --warning:   #FBBF24;
  --info:      var(--brand-primary);

  /* ---------- Type — Family ---------- */
  /* Three-family system:
     - Montserrat ExtraBold for titles / display
     - Poppins for headings (h1–h4)
     - Roboto for body / UI text
     --font-sans is the body default; --font-display and --font-heading are used
     by the heading recipes below. */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', 'Courier New', 'Consolas', monospace;

  /* ---------- Type — Weight ---------- */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ---------- Type — Scale (px-anchored) ---------- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;   /* body default */
  --fs-15: 15px;
  --fs-16: 16px;   /* body emphasized / mobile input (no zoom) */
  --fs-17: 17px;
  --fs-18: 18px;   /* h1 in widget header */
  --fs-20: 20px;
  --fs-24: 24px;   /* start-overlay title */
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;

  /* ---------- Line Height ---------- */
  --lh-tight:  1.2;
  --lh-snug:   1.3;
  --lh-normal: 1.4;
  --lh-relaxed:1.5;
  --lh-loose:  1.6;

  /* ---------- Letter Spacing ---------- */
  --tracking-tight: -0.3px;   /* widget titles */
  --tracking-flat:  0;
  --tracking-wide:  0.05em;   /* uppercase eyebrow labels */

  /* ---------- Spacing ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  10px;
  --sp-4:  12px;
  --sp-5:  14px;
  --sp-6:  16px;
  --sp-7:  20px;
  --sp-8:  24px;
  --sp-9:  32px;
  --sp-10: 40px;

  /* ---------- Radii ---------- */
  --r-xs:    4px;   /* code chips, tiny pills */
  --r-sm:    6px;   /* small buttons inside messages */
  --r-md:    8px;   /* tertiary inputs, NPS comment field */
  --r-lg:   12px;   /* cards, error blocks, widget container */
  --r-xl:   16px;   /* message bubbles (most), bot bubbles */
  --r-2xl:  18px;   /* user-message bubbles */
  --r-pill: 24px;   /* input field, primary action pills */
  --r-pill-lg: 50px;/* response-button pills (interviewer) */
  --r-circle:50%;   /* send button, NPS dots, start icon */

  /* Tail-clipped radii (chat bubbles) */
  --r-bubble-tail: 4px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 2px 8px rgba(19, 22, 65, 0.06);    /* bot bubble */
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.08);      /* widget container */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-button-hover: 0 6px 16px var(--brand-primary-shadow);
  --shadow-popover: 0 8px 32px rgba(30, 80, 200, 0.15);

  /* ---------- Motion ---------- */
  --easing: ease;
  --easing-out: ease-out;
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.4s;

  /* ---------- Layout primitives ---------- */
  --hit-min: 44px;   /* min tappable target */
  --widget-max-w: 720px;
}

/* =============================================================
   Semantic recipes — apply tokens to actual elements
   ============================================================= */

/* =============================================================
   Theme: DARK — applies to any subtree marked [data-theme="dark"]
   ============================================================= */
[data-theme="dark"] {
  --brand-primary:        #4D7BFF;
  --brand-primary-hover:  #7397FF;
  --brand-primary-tint:   rgba(77, 123, 255, 0.10);
  --brand-primary-glow:   rgba(77, 123, 255, 0.20);
  --brand-primary-shadow: rgba(77, 123, 255, 0.40);

  --user-bubble-bg:       #1A3A8A;
  --user-bubble-fg:       #D2E0FF;

  --fg-1: #F4F6FF;
  --fg-2: #E5E9F5;
  --fg-3: #C4CCDD;
  --fg-4: #8A93AA;
  --fg-5: #5A6478;

  --bg-page:    #000237;
  --bg-soft:    #0A0E3A;
  --bg-muted:   #11164A;
  --bg-divider: #1A1F55;
  --bg-elevated:#11164A;

  --border-1: #1E3355;
  --border-2: #2A3F66;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 2px 8px rgba(0,4,60,0.40);
  --shadow-3: 0 4px 16px rgba(0,4,60,0.50);
  --shadow-card: 0 4px 16px rgba(0,4,60,0.50), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-popover: 0 8px 32px rgba(77,123,255,0.25);
}

/* =============================================================
   Theme: BRAND — for surfaces sitting directly on the brand
   gradient (hero, splash). Use sparingly.
   ============================================================= */
[data-theme="brand"] {
  --bg-page:    transparent;
  --bg-soft:    rgba(255,255,255,0.06);
  --bg-muted:   rgba(255,255,255,0.10);
  --bg-divider: rgba(255,255,255,0.16);
  --bg-elevated:rgba(255,255,255,0.10);

  --fg-1: #FFFFFF;
  --fg-2: #FFFFFF;
  --fg-3: rgba(255,255,255,0.85);
  --fg-4: rgba(255,255,255,0.65);
  --fg-5: rgba(255,255,255,0.45);

  --border-1: rgba(255,255,255,0.18);
  --border-2: rgba(255,255,255,0.28);

  --brand-primary:        #FFFFFF;
  --brand-primary-hover:  #F0F4FF;
  --brand-primary-tint:   rgba(255,255,255,0.14);
  --brand-primary-glow:   rgba(255,255,255,0.30);
  --brand-primary-shadow: rgba(0,4,60,0.40);
  --fg-on-brand:          #02288c;
}

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}

/* Display / Headings — ranged from poster to UI scale */
.display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-weight: var(--w-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--w-semibold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-weight: var(--w-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* In-bubble headings render brand-blue h3 — Mosaic widget pattern */
.h3-accent {
  font-family: var(--font-heading);
  font-weight: var(--w-semibold);
  font-size: var(--fs-15);
  color: var(--brand-primary);
  line-height: var(--lh-snug);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--fg-3);
}

.body-lg {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
}

.body-sm {
  font-size: var(--fs-13);
  line-height: var(--lh-relaxed);
  color: var(--fg-4);
}

.caption {
  font-size: var(--fs-12);
  font-weight: var(--w-regular);
  color: var(--fg-4);
  line-height: var(--lh-normal);
}

.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--brand-primary);
}

.label {
  font-size: var(--fs-13);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}

.subtitle {
  font-size: var(--fs-13);
  font-weight: var(--w-light);
  opacity: 0.9;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  background: var(--bg-divider);
  color: var(--fg-3);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}

a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--easing);
}
a:hover { color: var(--brand-primary-hover); }