/* Stonni Design System — tokens concatenados (cópia verbatim de site-oficial-stonni/ds/tokens/, 28/10/2026).
   Ordem do styles.css de lá. O @import de fontes saiu: as fontes vão por <link> no index.html. Não editar à mão. */
/* Stonni webfonts. The official site's wordmark is a custom/licensed geometric face;
   Sora is the nearest Google Fonts match for headings and UI. Barlow covers body copy
   (industrial grotesque, matches the transport/automotive register).
   SUBSTITUTION FLAGGED in readme.md — send the real font files to replace these. */
:root {
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif; /* @kind font */
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif; /* @kind font */
  --font-mono: "JetBrains Mono", ui-monospace, monospace; /* @kind font */
}

/* --- tokens/colors.css --- */
:root {
  /* --- Brand core: sampled from the Stonni mark (cyan -> indigo gradient) --- */
  --stonni-cyan-400: #35C2F0;
  --stonni-cyan-500: #01A9DF; /* lightest point of the mark */
  --stonni-cyan-600: #0090C4;
  --stonni-blue-400: #2E86D8;
  --stonni-blue-500: #1B6BB8; /* mid-gradient */
  --stonni-blue-600: #14539A;
  --stonni-indigo-500: #4131AE; /* deepest point of the mark */
  --stonni-indigo-600: #33268C;

  /* --- Neutrals: cold, near-black navy family (night / road at dark) --- */
  --ink-1000: #05080F;
  --ink-900: #0A1020;
  --ink-800: #101A2E;
  --ink-700: #1A2640;
  --ink-600: #2A3855;
  --ink-500: #465575;
  --ink-400: #6B7A99;
  --ink-300: #9AA7BF;
  --ink-200: #C7D0DF;
  --ink-100: #E4E9F1;
  --ink-050: #F3F6FA;
  --white: #FFFFFF;

  /* --- Semantic --- */
  --success-500: #1FA97A;
  --warning-500: #E8A419;
  --danger-500: #DC3B4B;
  --info-500: var(--stonni-cyan-500);

  /* --- Gradients (the single most recognisable brand device) --- */
  --grad-brand: linear-gradient(115deg, var(--stonni-cyan-500) 0%, var(--stonni-blue-500) 52%, var(--stonni-indigo-500) 100%);
  --grad-brand-soft: linear-gradient(115deg, rgba(1,169,223,.16) 0%, rgba(65,49,174,.16) 100%); /* @kind color */
  --grad-night: linear-gradient(180deg, #0A1020 0%, #101A2E 60%, #15224A 100%); /* @kind color */
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(1,169,223,.35) 0%, rgba(10,16,32,0) 70%); /* @kind color */
  --grad-protect: linear-gradient(180deg, rgba(5,8,15,0) 0%, rgba(5,8,15,.75) 60%, rgba(5,8,15,.94) 100%); /* @kind color */
  --grad-hairline: linear-gradient(90deg, rgba(1,169,223,0) 0%, rgba(1,169,223,.7) 35%, rgba(65,49,174,.7) 65%, rgba(65,49,174,0) 100%); /* @kind color */

  /* --- Semantic aliases: dark surfaces are the default brand mode --- */
  --surface-page: var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-card: rgba(255,255,255,.04);
  --surface-card-hover: rgba(255,255,255,.07);
  --surface-glass: rgba(10,16,32,.72);
  --surface-inverse: var(--white);
  --surface-subtle: var(--ink-050);

  --text-strong: var(--white);
  --text-body: var(--ink-200);
  --text-muted: var(--ink-400);
  --text-accent: var(--stonni-cyan-400);
  --text-on-brand: var(--white);
  --text-strong-on-light: var(--ink-900);
  --text-body-on-light: var(--ink-600);
  --text-muted-on-light: var(--ink-400);

  --border-subtle: rgba(255,255,255,.08);
  --border-default: rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.24);
  --border-on-light: var(--ink-100);
  --border-accent: rgba(1,169,223,.45);

  --focus-ring: 0 0 0 3px rgba(1,169,223,.45);
}
/* Light scope: opt in with class="stonni-light" on any container */
.stonni-light {
  --surface-page: var(--white);
  --surface-raised: var(--ink-050);
  --surface-card: var(--white);
  --surface-card-hover: var(--ink-050);
  --surface-glass: rgba(255,255,255,.78);
  --text-strong: var(--ink-900);
  --text-body: var(--ink-600);
  --text-muted: var(--ink-400);
  --text-accent: var(--stonni-blue-500);
  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
}

/* --- tokens/typography.css --- */
:root {
  /* Scale — display sizes are for 1440px+ marketing layouts */
  --fs-display-1: clamp(40px, 5.4vw, 76px); /* @kind font */
  --fs-display-2: clamp(30px, 4.2vw, 58px); /* @kind font */
  --fs-display-3: clamp(28px, 3.2vw, 44px); /* @kind font */
  --fs-h1: clamp(26px, 2.6vw, 36px); /* @kind font */
  --fs-h2: clamp(22px, 2vw, 28px); /* @kind font */
  --fs-h3: clamp(19px, 1.6vw, 22px); /* @kind font */
  --fs-h4: 18px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  --lh-tight: 1.02; /* @kind font */
  --lh-display: 1.08; /* @kind font */
  --lh-heading: 1.2; /* @kind font */
  --lh-body: 1.6; /* @kind font */
  --lh-loose: 1.75; /* @kind font */

  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 800; /* @kind font */

  --ls-display: -0.03em; /* @kind font */
  --ls-heading: -0.015em; /* @kind font */
  --ls-body: 0em; /* @kind font */
  --ls-eyebrow: 0.18em; /* @kind font */
  --ls-button: 0.02em; /* @kind font */

  /* Semantic roles */
  --type-display: var(--fw-black) var(--fs-display-1) / var(--lh-display) var(--font-display); /* @kind font */
  --type-hero-light: var(--fw-light) var(--fs-display-1) / var(--lh-display) var(--font-display); /* @kind font */
  --type-h1: var(--fw-bold) var(--fs-h1) / var(--lh-heading) var(--font-display); /* @kind font */
  --type-h2: var(--fw-bold) var(--fs-h2) / var(--lh-heading) var(--font-display); /* @kind font */
  --type-h3: var(--fw-semibold) var(--fs-h3) / var(--lh-heading) var(--font-display); /* @kind font */
  --type-h4: var(--fw-semibold) var(--fs-h4) / var(--lh-heading) var(--font-display); /* @kind font */
  --type-body: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font-body); /* @kind font */
  --type-body-lg: var(--fw-regular) var(--fs-body-lg) / var(--lh-body) var(--font-body); /* @kind font */
  --type-body-sm: var(--fw-regular) var(--fs-body-sm) / var(--lh-body) var(--font-body); /* @kind font */
  --type-caption: var(--fw-medium) var(--fs-caption) / 1.45 var(--font-body); /* @kind font */
  --type-button: var(--fw-semibold) var(--fs-body-sm) / 1 var(--font-display); /* @kind font */
  --type-eyebrow: var(--fw-semibold) var(--fs-eyebrow) / 1.2 var(--font-display); /* @kind font */
  --type-stat: var(--fw-black) var(--fs-display-2) / 1 var(--font-display); /* @kind font */
}

/* --- tokens/spacing.css --- */
:root {
  --space-0: 0px;
  --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;
  --space-32: 128px;

  /* Layout */
  --container-max: 1240px; /* @kind spacing */
  --container-narrow: 820px; /* @kind spacing */
  --gutter: var(--space-6);
  --section-y: var(--space-32);
  --section-y-compact: var(--space-20);
  --grid-gap: var(--space-6);
  --header-h: 76px; /* @kind spacing */
}

/* --- tokens/radius.css --- */
:root {
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --radius-control: var(--radius-pill); /* buttons, chips, inputs read as pills */
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-2xl);
  --radius-media: var(--radius-xl);

  --border-w-hair: 1px; /* @kind radius */
  --border-w-thick: 2px; /* @kind radius */
}

/* --- tokens/elevation.css --- */
:root {
  /* Dark-surface elevation is built from glow + inner hairline, not grey drop shadow */
  --shadow-sm: 0 1px 2px rgba(5,8,15,.4);
  --shadow-md: 0 8px 24px -8px rgba(5,8,15,.6);
  --shadow-lg: 0 24px 60px -20px rgba(5,8,15,.75);
  --shadow-card: 0 20px 50px -24px rgba(5,8,15,.8), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-brand: 0 14px 40px -12px rgba(1,169,223,.45);
  --shadow-brand-strong: 0 18px 48px -10px rgba(1,169,223,.6);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-focus: var(--focus-ring);

  --blur-glass: 18px; /* @kind other */
  --blur-soft: 40px; /* @kind other */
  --glass: blur(18px) saturate(140%); /* @kind other */
}

/* --- tokens/motion.css --- */
:root {
  --dur-instant: 90ms; /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --dur-reveal: 700ms; /* @kind other */

  --ease-standard: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --ease-in: cubic-bezier(.5, 0, 1, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(.2, .8, .2, 1); /* @kind other */

  --transition-control: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-card: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); /* @kind other */

  --lift-card: translateY(-4px); /* @kind other */
  --press-scale: scale(.97); /* @kind other */
}

/* --- tokens/base.css --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font: var(--type-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); font-family: var(--font-display); letter-spacing: var(--ls-heading); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--stonni-cyan-500); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
img, svg { display: block; max-width: 100%; }
::selection { background: rgba(1,169,223,.35); color: var(--white); }
.stonni-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); }
.stonni-gradient-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stonni-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }