/* ============================================================
   Unbox Digital — Colors & Type
   Dark-first design system for the UnboxAi Quote Builder and
   related tooling. Extracted from quote_builder_v9.html.
   ============================================================ */

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

:root {
  color-scheme: dark;

  /* ============== SURFACES (darkest → lightest) ============== */
  --s0: #111113;  /* app background */
  --s1: #161618;  /* sidebar / panel */
  --s2: #1C1C1F;  /* card / bubble */
  --s3: #222225;  /* raised element / button resting */
  --s4: #2A2A2E;  /* button hover */

  /* ============== BORDERS ============== */
  --b1: #252528;  /* subtle hairline */
  --b2: #2E2E32;  /* button / input */

  /* ============== TEXT (brightest → dimmest) ============== */
  --t1: #F0F0F0;  /* primary text, headings */
  --t2: #C4C4C6;  /* body text */
  --t3: #8E8E94;  /* muted / secondary */
  --t4: #5C5C64;  /* labels / captions */
  --t5: #3E3E44;  /* disabled / inactive dots */

  /* ============== ACCENT: COPPER ============== */
  --copper: #C07A50;         /* primary accent — CTAs, bars, status */
  --copper-dim: #A06840;     /* hover / pressed */
  --copper-soft: rgba(192, 122, 80, 0.12);   /* ghost bg, selection */
  --copper-glow: rgba(192, 122, 80, 0.35);   /* focus ring */

  /* ============== SEMANTIC ============== */
  --green: #4ADE80;          /* success, complete, "ok" status dots */
  --amber: #F5B34A;          /* warning / in-progress */
  --red:   #E5484D;          /* destructive / error */

  /* ============== BRAND ============== */
  --brand-accent: var(--copper);
  --brand-fg: var(--t1);

  /* ============== TYPE SCALE ============== */
  --font-sans: 'Geist', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Sizes (rem-free for pixel control in dense UI) */
  --fs-xs:   10px;   /* labels, brand-powered, qc-label */
  --fs-sm:   11px;   /* file chips, meta */
  --fs-base: 12.5px; /* prog-step, scope rows */
  --fs-md:   13px;   /* session name, foot-link, composer button */
  --fs-body: 14px;   /* body, bot/user bubbles */
  --fs-lg:   16px;   /* subheads */
  --fs-xl:   20px;   /* small display */
  --fs-2xl:  28px;   /* heading */
  --fs-3xl:  44px;   /* hero number (quote total) */
  --fs-4xl:  56px;   /* marketing hero */

  /* Weights */
  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.5;
  --lh-loose: 1.7;

  /* Letter spacing */
  --ls-tight: -0.02em;   /* headings, hero numbers */
  --ls-normal: 0;
  --ls-wide: 0.06em;     /* small caps labels (cl-title) */
  --ls-wider: 0.08em;    /* qc-label */
  --ls-widest: 0.1em;    /* sidebar-label, cl-section-label */

  /* ============== SPACING ============== */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 16px;
  --sp-8: 18px;
  --sp-9: 22px;
  --sp-10: 28px;
  --sp-11: 32px;
  --sp-12: 40px;

  /* ============== RADII ============== */
  --r-xs: 2px;    /* sharp corner (bot bubble left) */
  --r-sm: 5px;    /* file chip */
  --r-md: 6px;    /* small button, foot-link, composer send */
  --r-lg: 8px;    /* --radius — default button, brand logo */
  --r-xl: 12px;   /* --radius-lg — quote card */

  /* ============== BORDERS ============== */
  --bw-hair: 1px;
  --bw-accent: 2px;     /* left accent bar on bot bubbles */
  --bw-top: 3px;        /* top accent on quote card */

  /* ============== SHADOWS / ELEVATION ============== */
  /* Dark UI leans on borders + surface steps. Shadows are subtle. */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.5);
  --glow-copper: 0 0 0 3px var(--copper-glow);

  /* ============== MOTION ============== */
  --tr: 0.15s ease;                 /* micro-interactions */
  --tr-slow: 0.25s ease;            /* accent underlines */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);  /* signature curve */
  --dur-msg: 0.4s;
  --dur-bar: 1.8s;
  --dur-card: 0.5s;

  /* ============== LAYOUT ============== */
  --sidebar-w: 260px;
  --checklist-w: 270px;
  --composer-h: 42px;
}

/* ============================================================
   SEMANTIC ELEMENTS
   Apply these directly to raw HTML elements or compose them.
   ============================================================ */

html, body {
  background: var(--s0);
  color: var(--t1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--copper-soft); color: var(--t1); }

h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--t1);
}

h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--t1);
}

h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
  color: var(--t1);
}

h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--t1);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--t2);
}

small, .caption {
  font-size: var(--fs-sm);
  color: var(--t4);
}

.eyebrow, .label-caps {
  font-size: var(--fs-xs);
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  font-weight: var(--fw-semi);
}

.numeric, .tabular {
  font-variant-numeric: tabular-nums;
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a { color: var(--t1); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--copper); }

/* Focus — subtle copper ring, never browser-default */
:focus-visible {
  outline: none;
  box-shadow: var(--glow-copper);
  border-radius: var(--r-md);
}