/* =================================================================
   Cobalto Design System — Core Tokens
   Cobalto: Infraestrutura de Inteligência Artificial autônoma
   para lojas de carro.
   ================================================================= */

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

:root {
  /* ---- Color · Surface (mostly dark) ---------------------------- */
  --c-bg:            #000000;   /* canvas — pure black */
  --c-bg-elev-1:     #0a0e1a;   /* slight rise */
  --c-bg-elev-2:     #151f3b;   /* chat/card surface (rgb 21,31,59) */
  --c-bg-light:      #ffffff;   /* alt light surface */
  --c-overlay-10:    rgba(255,255,255,0.10);
  --c-overlay-05:    rgba(255,255,255,0.05);
  --c-scrim:         rgba(0,0,0,0.50);

  /* ---- Color · Foreground -------------------------------------- */
  --c-fg-1:          #ffffff;
  --c-fg-2:          rgba(255,255,255,0.70);
  --c-fg-3:          rgba(255,255,255,0.40);
  --c-fg-on-light:   #000000;
  --c-fg-on-light-2: #30363d;       /* rgb 48,54,61 */

  /* ---- Color · Brand (cobalt) ---------------------------------- */
  --c-cobalt:        #283ff7;       /* rgb 40,63,247 — primary */
  --c-cobalt-deep:   #2639db;       /* rgb 38,57,219 */
  --c-cobalt-dark:   #1e0e4a;       /* gradient deep-end */
  --c-cobalt-hover:  #4159ff;
  --c-cobalt-press:  #1c2dc7;
  --c-cobalt-glow:   rgba(40,63,247,0.45);

  /* ---- Color · Accents ----------------------------------------- */
  --c-cyan:          #00bff0;       /* rgb 0,191,240 — legacy "ciano" cyan */
  --c-cyan-2:        #2daae9;       /* rgb 45,160,234 */
  --c-cyan-bright:   #73e7e8;
  --c-green:         #3bd977;       /* rgb 59,217,119 — agent / WhatsApp */
  --c-green-deep:    #2eb360;       /* rgb 46,179,96 */
  --c-red:           #f15063;       /* rgb 241,80,99 — destructive */
  --c-yellow:        #cac773;       /* rgb 202,199,115 — cosmic-gradient hi */

  /* ---- Color · Border ------------------------------------------ */
  --c-border-strong: #ffffff;
  --c-border-soft:   #333333;
  --c-border-card:   #5a6175;       /* rgb 90,97,117 */
  --c-border-cobalt: var(--c-cobalt);

  /* ---- Status -------------------------------------------------- */
  --c-online:        var(--c-green);
  --c-warning:       #ffb84d;
  --c-error:         var(--c-red);
  --c-info:          var(--c-cyan);

  /* ---- Gradients ----------------------------------------------- */
  --grad-cobalt-night:
      linear-gradient(180deg, #030617 0%, #283ff7 100%);
  --grad-cobalt-radial:
      radial-gradient(circle at 50% 50%, #0290fa 0%, #031cdb 58%, #000 100%);
  --grad-cosmic:
      radial-gradient(circle at 50% 100%,
        #cac773 0%, #76a4a9 12%, #4078bf 24%,
        #222ead 38%, #1e0e4a 58%, #000 80%);
  --grad-orb:
      radial-gradient(circle at 35% 30%,
        #73e7e8 0%, #283ff7 45%, #030617 100%);

  /* ---- Typography · Family ------------------------------------- */
  --font-sans:    "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ---- Typography · Scale (1440-design) ------------------------ */
  --t-mega:    104px;   /* hero numerics, R$ pricing */
  --t-d1:      64px;    /* display 1 */
  --t-d2:      48px;
  --t-h1:      40px;    /* section headlines */
  --t-h2:      32px;
  --t-h3:      24px;
  --t-h4:      20px;
  --t-body:    16px;
  --t-small:   14px;
  --t-eyebrow: 13px;    /* uppercase labels, button text */
  --t-micro:   11px;

  /* ---- Typography · Other -------------------------------------- */
  --tracking-tight:  -0.05em;        /* default body/headline */
  --tracking-eyebrow: -0.05em;
  --tracking-display: -0.05em;       /* same as body — Inter at all sizes */
  --leading-tight:   1.0;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relax:   1.65;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Spacing scale (8-pt with tight steps under 16) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Radii (sharp by default) -------------------------------- */
  --r-0:      0px;       /* default — sharp corners */
  --r-1:      2px;       /* hairline rounding */
  --r-2:      4px;
  --r-pill:   999px;     /* status pills only */
  --r-bubble: 28px;      /* hero AI-prompt bubble, large */

  /* ---- Borders ------------------------------------------------- */
  --bw-hair:  0.5px;
  --bw-1:     1px;
  --bw-2:     2px;

  /* ---- Shadows / Glows (used very sparingly) ------------------- */
  --sh-card:   0 4px 24px rgba(0,0,0,0.40);
  --sh-deep:   0 8px 64px rgba(0,0,0,0.65);
  --sh-glow:   0 0 24px var(--c-cobalt-glow);
  --sh-orb:    0 0 80px rgba(40,63,247,0.55);

  /* ---- Motion -------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);    /* expo-out feel */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* =================================================================
   Semantic element styles
   ================================================================= */

html, body {
  background: var(--c-bg);
  color: var(--c-fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.h-mega, .h1, .h2, .h3, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

.h-mega { font-size: var(--t-mega); font-weight: var(--weight-bold); }
.h1     { font-size: var(--t-h1); }
.h2     { font-size: var(--t-h2); }
.h3     { font-size: var(--t-h3); }
.h4     { font-size: var(--t-h4); }

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.eyebrow,
.btn-label {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--leading-normal);
}

.body  { font-size: var(--t-body);  line-height: var(--leading-relax); }
.small { font-size: var(--t-small); line-height: var(--leading-normal); color: var(--c-fg-2); }
.micro { font-size: var(--t-micro); letter-spacing: 0; color: var(--c-fg-3); }
.mono  { font-family: var(--font-mono); letter-spacing: 0; }

/* ---- Surfaces & Panels ----------------------------------------- */
.surface-night   { background: var(--c-bg);          color: var(--c-fg-1); }
.surface-card    { background: var(--c-bg-elev-2);   color: var(--c-fg-1); border: var(--bw-1) solid var(--c-border-card); }
.surface-light   { background: var(--c-bg-light);    color: var(--c-fg-on-light); }
.surface-cobalt  { background: var(--c-cobalt);      color: var(--c-fg-1); }

/* ---- Buttons (split-style "começe agora") ---------------------- */
.btn-split {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  border: var(--bw-1) solid var(--c-fg-1);
  background: var(--c-bg);
  color: var(--c-fg-1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-size: var(--t-eyebrow);
  font-weight: var(--weight-medium);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-split__label { padding: 6px 14px; display: inline-flex; align-items: center; }
.btn-split__cap   { width: 44px; background: var(--c-fg-1); color: var(--c-bg);
                    display: inline-flex; align-items: center; justify-content: center; }
.btn-split:hover  { background: var(--c-cobalt); border-color: var(--c-cobalt); }
.btn-split:hover .btn-split__cap { background: var(--c-fg-1); color: var(--c-cobalt); }

/* ---- Pill (online / status) ----------------------------------- */
.dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: var(--r-pill); background: var(--c-online);
}