/* FORMA — Design Tokens v1.0 */

:root {
  /* ——— PRIMARY PALETTE ——— */
  --forma-grafite: #151B28;      /* base institucional */
  --forma-light-grey: #F3F3F3;   /* base clara */

  /* ——— SECONDARY PALETTE ——— */
  --forma-verde: #0B4550;        /* apoio/respiro */
  --forma-cinza: #BFC8CA;        /* neutro intermediário */
  --forma-safety: #E5FF39;       /* acento, CTA, destaque */

  /* ——— DERIVED SURFACES (dark product) ——— */
  --surface-0: #0D1119;          /* base app */
  --surface-1: #151B28;          /* grafite oficial */
  --surface-2: #1C2434;          /* card elevation */
  --surface-3: #252E40;          /* hover / elevated */
  --stroke-subtle: rgba(243,243,243,0.08);
  --stroke: rgba(243,243,243,0.14);
  --stroke-strong: rgba(243,243,243,0.24);

  /* ——— DERIVED SURFACES (light) ——— */
  --paper-0: #FFFFFF;
  --paper-1: #F3F3F3;
  --paper-2: #E8EAEA;

  /* ——— INK ——— */
  --ink-primary-dark: #F3F3F3;        /* on dark */
  --ink-secondary-dark: #BFC8CA;
  --ink-tertiary-dark: rgba(243,243,243,0.55);

  --ink-primary-light: #151B28;       /* on light */
  --ink-secondary-light: #3B4658;
  --ink-tertiary-light: #7A8290;

  /* ——— FEEDBACK ——— */
  --signal-success: #7BD389;
  --signal-warn: #F0B542;
  --signal-alert: #E5603C;

  /* ——— TYPOGRAPHY ——— */
  --font-display: "Space Grotesk", "Everett", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Space Grotesk", "Everett", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Type scale — optical, editorial */
  --t-display:  clamp(48px, 7vw, 96px);
  --t-h1:       44px;
  --t-h2:       32px;
  --t-h3:       24px;
  --t-h4:       18px;
  --t-body-lg:  16px;
  --t-body:     14px;
  --t-small:    12px;
  --t-caption:  11px;
  --t-label:    10px;

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-normal: 1.45;
  --lh-loose: 1.6;

  --track-display: -0.03em;
  --track-heading: -0.02em;
  --track-body: -0.005em;
  --track-label: 0.18em;
  --track-micro: 0.32em;

  /* ——— SPACING (4px base) ——— */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 120px;

  /* ——— RADII ——— */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-6: 28px;
  --r-full: 999px;

  /* ——— ELEVATION ——— */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.24), 0 0 0 1px rgba(243,243,243,0.04);
  --shadow-2: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 1px rgba(243,243,243,0.05);
  --shadow-3: 0 24px 48px rgba(0,0,0,0.40), 0 0 0 1px rgba(243,243,243,0.06);
  --shadow-cta: 0 8px 24px rgba(229,255,57,0.24);

  /* ——— MOTION ——— */
  --ease-std: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 360ms;

  /* ——— GRID ——— */
  --grid-col-mobile: 4;
  --grid-col-tablet: 8;
  --grid-col-web: 12;
  --gutter-mobile: 16px;
  --gutter-web: 24px;
  --container-max: 1280px;
}