/* ============================================================
   Discussly.ai — Colors & Type Foundation
   Source of truth: the Discussly codebase (public/index.html,
   public/widget.js, public/admin.html). Every token below is
   lifted from real product CSS, not invented.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---- Brand fonts ----
     Inter is the brand typeface (confirmed — matches the original codebase).
     Nunito is uploaded + self-hosted below and available as an optional
     rounded/friendly display alternate, but Inter leads. */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display-alt: "Nunito", "Inter", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* ============ COLOR — BASE PALETTE ============ */

  /* Surfaces (white + very light gray) */
  --bg:            #f8fafc;   /* app / page background        */
  --surface:       #ffffff;   /* cards, menus, inputs         */
  --surface-2:     #f1f5f9;   /* subtle fills, hover rows     */

  /* Ink (dark navy typography) */
  --ink-900:       #0f172a;   /* darkest navy (shadows base)  */
  --ink-800:       #111827;   /* primary text                */
  --ink-700:       #172033;   /* alt heading / menu text      */
  --ink-500:       #475569;   /* body secondary              */
  --ink-450:       #526070;   /* muted prose                 */
  --ink-400:       #64748b;   /* muted / captions            */

  /* Brand gradient stops */
  --blue:          #2563eb;   /* primary blue                */
  --violet:        #7c3aed;   /* gradient violet end         */
  --indigo:        #4f46e5;   /* badge / accent text         */
  --indigo-50:     #eef2ff;   /* badge / chip background     */

  /* Lines */
  --border:        #e5e7eb;   /* default hairline border     */
  --border-soft:   #f1f5f9;   /* faint table dividers        */

  /* Semantic status */
  --danger:        #dc2626;
  --success:       #16a34a;

  /* ============ SIGNATURE GRADIENT ============ */
  --gradient: linear-gradient(135deg, #2563eb, #7c3aed);
  --gradient-soft: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(124,58,237,0.12));

  /* ============ SEMANTIC COLOR ROLES ============ */
  --color-text:        var(--ink-800);
  --color-text-muted:  var(--ink-400);
  --color-text-soft:   var(--ink-500);
  --color-heading:     var(--ink-900);
  --color-link:        var(--blue);
  --color-bg:          var(--bg);
  --color-card:        var(--surface);
  --color-border:      var(--border);

  /* ============ RADII ============ */
  --radius-pill:   999px;   /* buttons, badges, selects     */
  --radius-lg:     20px;    /* cards                        */
  --radius-md:     16px;    /* menus, popovers              */
  --radius-sm:     12px;    /* inputs, small tiles          */

  /* ============ SHADOWS (soft, navy-tinted) ============ */
  --shadow-card:    0 18px 50px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 22px 60px rgba(15, 23, 42, 0.08);
  --shadow-menu:    0 22px 55px rgba(15, 23, 42, 0.18);
  --shadow-primary: 0 16px 40px rgba(37, 99, 235, 0.25);
  --shadow-primary-hover: 0 18px 42px rgba(37, 99, 235, 0.34);
  --shadow-soft:    0 10px 24px rgba(15, 23, 42, 0.04);

  /* Focus ring (blue, 4px halo) */
  --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.12);

  /* ============ SPACING SCALE (4px base) ============ */
  --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-24: 96px;

  /* ============ MOTION ============ */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.2s;

  /* ============ TYPE SCALE ============ */
  /* Display / hero — tight tracking, weight 800-900 */
  --display-size: clamp(42px, 8vw, 78px);
  --display-line: 1.02;
  --display-track: -0.06em;
  --display-weight: 800;

  --h1-size: 42px;   --h1-line: 1.15;  --h1-track: -0.04em;  --h1-weight: 800;
  --h2-size: 28px;   --h2-line: 1.2;   --h2-track: -0.03em;  --h2-weight: 700;
  --h3-size: 20px;   --h3-line: 1.3;   --h3-track: -0.02em;  --h3-weight: 700;
  --lead-size: 20px; --lead-line: 1.6;
  --body-size: 16px; --body-line: 1.65;
  --small-size: 14px;
  --caption-size: 13px;
  --metric-size: 34px; --metric-track: -0.06em; --metric-weight: 750;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply these classes (or use as a reset starting point).
   ============================================================ */

.ds-display {
  font: var(--display-weight) var(--display-size)/var(--display-line) var(--font-sans);
  letter-spacing: var(--display-track);
  color: var(--ink-800);
  margin: 0;
}
.ds-gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1, .ds-h1 {
  font: var(--h1-weight) var(--h1-size)/var(--h1-line) var(--font-sans);
  letter-spacing: var(--h1-track);
  color: var(--ink-800);
}
h2, .ds-h2 {
  font: var(--h2-weight) var(--h2-size)/var(--h2-line) var(--font-sans);
  letter-spacing: var(--h2-track);
  color: var(--ink-800);
}
h3, .ds-h3 {
  font: var(--h3-weight) var(--h3-size)/var(--h3-line) var(--font-sans);
  letter-spacing: var(--h3-track);
  color: var(--ink-800);
}
.ds-lead {
  font: 400 var(--lead-size)/var(--lead-line) var(--font-sans);
  color: var(--ink-500);
}
.ds-body, p {
  font: 400 var(--body-size)/var(--body-line) var(--font-sans);
  color: var(--ink-500);
}
.ds-small  { font-size: var(--small-size); }
.ds-caption{ font-size: var(--caption-size); color: var(--ink-400); }
.ds-mono   { font-family: var(--font-mono); }
.ds-metric {
  font: var(--metric-weight) var(--metric-size)/1 var(--font-sans);
  letter-spacing: var(--metric-track);
  color: var(--ink-800);
}