/* =========================================================
   Disclosure Toolkit — Core Foundations
   Colors, typography, spacing, elevation, radii
   Source of truth: Chatbot UI Mockup Brief v1.0 (Offploy CIC)
   ========================================================= */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  /* ---------- Brand palette (hex values from Wix site + SVG logo assets) ---------- */
  --dt-navy:           #172643;  /* Primary. Text, headers, CTAs, bot avatar bg */
  --dt-orange:         #EF835C;  /* Accent. Chatbot icon bg, hover, progress */
  --dt-lavender:       #ABA9FC;  /* Secondary. Bot bubbles, secondary buttons */
  --dt-lavender-light: #DFD4FC;  /* Section backgrounds, subtle emphasis */
  --dt-sand:           #F1E4D4;  /* User bubble bg, cards, disclaimer panels */
  --dt-teal:           #C8FDFF;  /* Links, accents, icon highlights, success */
  --dt-pale-blue:      #E8EFFE;  /* Page background behind chat, dividers */
  --dt-purple:         #5B45B5;  /* Deeper purple variant (from logo set) */

  /* Neutrals */
  --dt-white:          #FFFFFF;
  --dt-black:          #000000;
  --dt-grey-900:       #111111;
  --dt-grey-700:       #333333;  /* Bot message text */
  --dt-grey-500:       #666666;  /* Disclaimer / small print */
  --dt-grey-400:       #999999;  /* Input placeholder */
  --dt-grey-300:       #AAAAAA;  /* Timestamps */
  --dt-grey-200:       #CCCCCC;  /* Input border */
  --dt-grey-100:       #EDEDED;
  --dt-grey-50:        #F7F7F7;

  /* ---------- Semantic tokens ---------- */
  --dt-bg-page:        var(--dt-pale-blue);
  --dt-bg-surface:     var(--dt-white);
  --dt-bg-panel-warm:  var(--dt-sand);
  --dt-bg-panel-soft:  var(--dt-lavender-light);

  --dt-fg-primary:     var(--dt-navy);
  --dt-fg-body:        var(--dt-grey-700);
  --dt-fg-muted:       var(--dt-grey-500);
  --dt-fg-subtle:      var(--dt-grey-400);
  --dt-fg-on-navy:     var(--dt-white);

  --dt-bubble-bot:     var(--dt-lavender-light);
  --dt-bubble-user:    var(--dt-sand);
  --dt-avatar-bot:     var(--dt-orange);

  --dt-link:           var(--dt-navy);
  --dt-link-accent:    var(--dt-teal);
  --dt-success:        var(--dt-teal);
  --dt-warning:        var(--dt-orange);

  --dt-border-soft:    #E3E8F2;
  --dt-border-input:   var(--dt-grey-200);

  /* ---------- Typography ---------- */
  --dt-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale — values drawn directly from brief */
  --dt-size-h1:        32px;     /* Page heading */
  --dt-size-h2:        24px;
  --dt-size-h3:        20px;
  --dt-size-body:      16px;     /* Bot message text */
  --dt-size-body-sm:   15px;
  --dt-size-button:    15px;
  --dt-size-input:     14px;
  --dt-size-small:     13px;     /* Disclaimer / small print */
  --dt-size-xs:        11px;     /* Timestamps */

  --dt-weight-light:     300;
  --dt-weight-regular:   400;
  --dt-weight-medium:    500;
  --dt-weight-semibold:  600;
  --dt-weight-bold:      700;

  --dt-leading-tight:  1.25;
  --dt-leading-normal: 1.45;
  --dt-leading-chat:   1.55;   /* Message bubbles 1.5–1.6 per brief */
  --dt-leading-loose:  1.7;

  /* ---------- Spacing (4pt grid) ---------- */
  --dt-space-1:  4px;
  --dt-space-2:  8px;
  --dt-space-3:  12px;
  --dt-space-4:  16px;
  --dt-space-5:  20px;
  --dt-space-6:  24px;
  --dt-space-8:  32px;
  --dt-space-10: 40px;
  --dt-space-12: 48px;
  --dt-space-16: 64px;

  /* ---------- Radii ---------- */
  --dt-radius-sm:     6px;
  --dt-radius-md:     8px;     /* Input field */
  --dt-radius-lg:     12px;    /* Message bubbles, cards */
  --dt-radius-xl:     16px;    /* Large surfaces */
  --dt-radius-pill:   999px;   /* CTA pills, nav */

  /* ---------- Elevation ---------- */
  --dt-shadow-xs: 0 1px 2px rgba(23, 38, 67, 0.06);
  --dt-shadow-sm: 0 2px 8px rgba(23, 38, 67, 0.08);
  --dt-shadow-md: 0 8px 24px rgba(23, 38, 67, 0.10);
  --dt-shadow-lg: 0 16px 40px rgba(23, 38, 67, 0.14);

  /* Focus */
  --dt-focus-ring: 0 0 0 3px rgba(171, 169, 252, 0.55);

  /* ---------- Layout ---------- */
  --dt-chat-max:   800px;
  --dt-page-max: 1200px;
}

/* ---------- Semantic element styles ---------- */
html, body {
  font-family: var(--dt-font-sans);
  color: var(--dt-fg-body);
  background: var(--dt-bg-page);
  font-size: var(--dt-size-body);
  line-height: var(--dt-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .dt-h1 {
  font-family: var(--dt-font-sans);
  font-weight: var(--dt-weight-bold);
  font-size: var(--dt-size-h1);
  line-height: var(--dt-leading-tight);
  color: var(--dt-fg-primary);
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .dt-h2 {
  font-family: var(--dt-font-sans);
  font-weight: var(--dt-weight-bold);
  font-size: var(--dt-size-h2);
  line-height: var(--dt-leading-tight);
  color: var(--dt-fg-primary);
  margin: 0;
}
h3, .dt-h3 {
  font-family: var(--dt-font-sans);
  font-weight: var(--dt-weight-semibold);
  font-size: var(--dt-size-h3);
  line-height: var(--dt-leading-tight);
  color: var(--dt-fg-primary);
  margin: 0;
}
p, .dt-body {
  font-size: var(--dt-size-body);
  line-height: var(--dt-leading-normal);
  color: var(--dt-fg-body);
}
.dt-small {
  font-size: var(--dt-size-small);
  font-weight: var(--dt-weight-light);
  color: var(--dt-fg-muted);
  line-height: var(--dt-leading-normal);
}
.dt-timestamp {
  font-size: var(--dt-size-xs);
  font-weight: var(--dt-weight-light);
  color: var(--dt-grey-300);
}
.dt-placeholder {
  font-size: var(--dt-size-input);
  font-style: italic;
  color: var(--dt-grey-400);
  font-weight: var(--dt-weight-regular);
}