/* ============================================================
   Delay Buddy Design System — Colors & Type
   Source: Delay Buddy UI Kit.fig (Figma)
   ============================================================ */

:root {
  /* ── Brand Colors ──────────────────────────────────────── */
  --db-purple:          #9747FF;  /* primary action, focus, highlight */
  --db-purple-deep:     #6F18E0;  /* pressed / darker accent */
  --db-purple-soft:     #DCD7FF;  /* user message bubble, tint */
  --db-navy:            #443D73;  /* logo wordmark, deep brand */
  --db-gold:            #EDB900;  /* active step, progress fill, highlight */
  --db-gold-hover:      #FFCB1F;  /* hover — slightly brighter, warmer */
  --db-gold-accent:     #D9A300;  /* pressed / accent — softly deepened */
  --db-gold-cream:      #FFFAE9;  /* gold tint */

  /* ── Hero overlay tokens ───────────────────────────────── */
  --overlay-dark-65:    rgba(0,0,0,0.65);
  --overlay-dark-55:    rgba(0,0,0,0.55);
  --overlay-dark-35:    rgba(0,0,0,0.35);
  --overlay-dark-25:    rgba(0,0,0,0.25);
  --overlay-dark-0:     rgba(0,0,0,0);

  /* ── Neutrals (warm lavender-grey ramp) ────────────────── */
  --db-ink:             #3B3A40;  /* primary text */
  --db-ink-muted:       #A5A0CF;  /* placeholder, secondary text */
  --db-ink-subtle:      #B8B3D4;  /* hairline, divider text */
  --db-border:          #D1CEE6;  /* default input border */
  --db-border-soft:     #EBEAF1;  /* subtle card border */
  --db-track:           #E1DFEF;  /* progress track, disabled fill */
  --db-surface:         #FCFCFF;  /* input / subtle surface */
  --db-surface-alt:     #F6F5FA;  /* page-level alt */
  --db-white:           #FFFFFF;
  --db-black:           #000000;

  /* ── Semantic ─────────────────────────────────────────── */
  --db-success:         #00B73A;
  --db-info:            #2E6DFF;
  --db-danger:          #E0455A;

  /* ── Foreground / Background tokens ───────────────────── */
  --fg1: var(--db-ink);
  --fg2: var(--db-ink-muted);
  --fg3: var(--db-ink-subtle);
  --fg-on-primary: var(--db-white);
  --fg-on-dark: var(--db-white);
  --fg-on-dark-92: rgba(255,255,255,0.92);
  --fg-on-dark-72: rgba(255,255,255,0.72);
  --fg-on-dark-18: rgba(255,255,255,0.18);
  --bg1: var(--db-white);
  --bg2: var(--db-surface);
  --bg3: var(--db-surface-alt);

  /* ── Radii ────────────────────────────────────────────── */
  --r-xs: 4px;     /* section card */
  --r-sm: 8px;
  --r-md: 16px;    /* buttons, inputs, chat bubbles, cards */
  --r-lg: 24px;
  --r-xl: 40px;    /* circle chips, large header avatars */
  --r-pill: 999px; /* progress bars, status chips */

  /* ── Spacing scale (4pt grid) ─────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ── Shadows ──────────────────────────────────────────── */
  --sh-card:     0px -1px 15px 0px rgba(94,88,130,0.13);
  --sh-card-down:0px  2px 15px 0px rgba(94,88,130,0.13);
  --sh-primary:  0px 1px 6.2px 0px rgba(56,18,106,0.18),
                 0px 4px 7.5px 0px rgba(190,139,255,0.51);
  --sh-primary-pressed: 0px 1px 6.2px 0px rgba(71,7,153,0.36),
                        0px 4px 7.5px 0px rgba(56,18,106,0.36);
  --sh-focus:    0 0 0 4px rgba(151,71,255,0.20);

  /* ── Typography ───────────────────────────────────────── */
  --font-sans:  "Manrope", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, system-ui, sans-serif;
  --font-label: "Manrope", system-ui, sans-serif;

  /* Type scale (px) */
  --fs-display:    28px;
  --fs-h1:         24px;
  --fs-h2:         20px;
  --fs-h3:         16px;
  --fs-body:       14px;
  --fs-body-lg:    16px;
  --fs-caption:    12px;
  --fs-micro:      10px;

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

  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-body:       1.45;
  --lh-loose:      1.7;
}

/* ── Base / Semantic element styles ──────────────────────── */
html, body {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--fg1);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 22px;
  color: var(--db-black);
}
h3, .h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--fg1);
}
p, .body {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--fg1);
}
.caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--fg2);
}
.label {
  font-family: var(--font-label);
  font-size: var(--fs-body);
  letter-spacing: 0.16px;
  color: var(--fg1);
}
.muted { color: var(--fg2); }
.subtle { color: var(--fg3); }
code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}

/* ── Focus ring ──────────────────────────────────────────── */
:where(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-color: var(--db-purple);
}