/* =========================================================================
   Plutio Labs — Colors & Type
   Source of truth for design tokens. Import this file before any component CSS.
   ========================================================================= */

/* -------- Fonts (Google Fonts) ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Brand core ----------------------------------------------------- */
  --brand-blue:        #2956FF;   /* primary, electric cobalt — sampled from mark */
  --brand-blue-hover:  #1E47E6;   /* -8% lum */
  --brand-blue-press:  #1638C7;   /* -16% lum */
  --brand-blue-soft:   #E5ECFF;   /* tinted surface (chips, hover bg) */
  --brand-blue-soft-2: #C9D5FF;
  --brand-blue-fade:   #F3F6FF;   /* faintest wash */

  --ink-deep:          #070D2E;   /* "Deep Ink" — dark canvas, sampled from dark mark */
  --ink:               #1E2442;   /* primary text on light, sampled from "Labs" */
  --ink-2:             #3A4163;   /* secondary text */
  --ink-3:             #6A7090;   /* tertiary text / metadata */
  --ink-4:             #9CA1B8;   /* disabled / placeholder */

  --paper:             #EEF1FA;   /* "Paper" — sampled from light backdrop */
  --paper-2:           #F5F7FC;   /* card-on-paper */
  --surface:           #FFFFFF;   /* clean cards */
  --hairline:          #E2E6F2;   /* dividers, borders */
  --hairline-strong:   #CBD2E5;

  /* Dark surfaces (for dark mode + hero sections) */
  --ink-canvas:        #070D2E;
  --ink-card:          #0F1640;
  --ink-card-2:        #18205A;
  --ink-hairline:      #1F2A6B;

  /* ---- Semantic ------------------------------------------------------- */
  --success:           #18A957;
  --success-soft:      #E2F7EB;
  --warning:           #E8A317;
  --warning-soft:      #FCF1D9;
  --danger:            #E5484D;
  --danger-soft:       #FCE5E6;
  --info:              var(--brand-blue);
  --info-soft:         var(--brand-blue-soft);

  /* ---- HVAC accent (status pills used in voice/messaging surfaces) ---- */
  --status-live:       #18A957;   /* call connected */
  --status-queued:     #E8A317;
  --status-missed:     #E5484D;
  --status-idle:       var(--ink-4);

  /* ---- Foreground / Background tokens (light theme) ------------------- */
  --fg-1:              var(--ink);          /* default text */
  --fg-2:              var(--ink-2);
  --fg-3:              var(--ink-3);
  --fg-disabled:       var(--ink-4);
  --fg-on-blue:        #FFFFFF;
  --fg-on-deep:        #FFFFFF;
  --fg-brand:          var(--brand-blue);

  --bg-1:              var(--surface);      /* default card / surface */
  --bg-2:              var(--paper);        /* page background */
  --bg-3:              var(--paper-2);
  --bg-deep:           var(--ink-deep);

  /* ---- Type families ------------------------------------------------- */
  --font-sans:        'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display:     'Inter', ui-sans-serif, system-ui, sans-serif;  /* same family, heavier weight */
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale (px-based; 8pt grid) ------------------------------- */
  --fs-xs:     12px;
  --fs-sm:     13px;
  --fs-base:   15px;   /* body */
  --fs-md:     17px;
  --fs-lg:     20px;
  --fs-xl:     24px;
  --fs-2xl:    32px;
  --fs-3xl:    44px;
  --fs-4xl:    60px;
  --fs-5xl:    80px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-mono:   -0.01em;
  --tracking-caps:   0.08em;

  /* ---- Spacing (4pt grid) -------------------------------------------- */
  --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-20:  80px;
  --space-24:  96px;

  /* ---- Radii ---------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-mark: 22%;   /* logo tile rounding */

  /* ---- Shadows / elevation ------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(7,13,46,0.06), 0 1px 1px rgba(7,13,46,0.04);
  --shadow-2: 0 4px 12px -2px rgba(7,13,46,0.08), 0 2px 4px -2px rgba(7,13,46,0.04);
  --shadow-3: 0 12px 32px -8px rgba(7,13,46,0.14), 0 4px 8px -4px rgba(7,13,46,0.06);
  --shadow-4: 0 24px 56px -16px rgba(7,13,46,0.20), 0 8px 16px -8px rgba(7,13,46,0.08);
  --shadow-blue: 0 8px 24px -8px rgba(41,86,255,0.45);
  --shadow-blue-glow: 0 0 0 4px rgba(41,86,255,0.18);

  --inset-hairline: inset 0 0 0 1px var(--hairline);
  --inset-hairline-strong: inset 0 0 0 1px var(--hairline-strong);

  /* ---- Motion --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-1:  120ms;
  --dur-2:  180ms;
  --dur-3:  260ms;
  --dur-4:  420ms;

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* =========================================================================
   Semantic typography classes
   Use the class OR copy declarations into your component.
   ========================================================================= */

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

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h3, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.h5, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow, .overline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.p, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.small, small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.micro {
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--fg-3);
}

.mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
}

.label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: var(--fg-1);
}