/* ============================================================
   SALTO DESIGN SYSTEM — TOKENS
   ============================================================
   Derived from the palette measured off the approved deck:
   taupe oliva #908D7C, menta #D5FDCA, paper #F8FFF6,
   surface #E7EDE3, step #BBBCAE, ink #615F54.

   The visual language is the technical drawing: hairline rules,
   dimension terminals, near-zero radii, no shadows, no gradients.
   The reader spends his day reading drawings. This system speaks
   that language back to him.
   ============================================================ */

/* ---------- OLIVA — the dominant axis ----------
   Measured anchors: 50, 100, 300, 500, 700.
   400, 600, 800, 900 were interpolated along the same hue to give
   the scale a dark end. 800 exists specifically so menta can carry
   text on it: #D5FDCA on #494840 = 8.2:1 (AAA). */
:root {
  --oliva-50:  #F8FFF6;  /* measured — page */
  --oliva-100: #E7EDE3;  /* measured — surface */
  --oliva-200: #D3DACD;  /* border, quiet fill */
  --oliva-300: #BBBCAE;  /* measured — diagram step */
  --oliva-400: #A3A290;
  --oliva-500: #908D7C;  /* measured — dominant field */
  --oliva-600: #767463;
  --oliva-700: #615F54;  /* measured — body ink */
  --oliva-800: #494840;  /* primary action, deep field */
  --oliva-900: #2B2A25;  /* deepest ink, rules on light */

  /* ---------- MENTA — the accent axis ----------
     Anchored on the measured #D5FDCA. Menta is a highlight and an
     ink for dark fields. It is never a filled action: to a skeptical
     reader a bright fill reads as a sales badge, a dark fill with
     menta type reads as a stamped instruction. */
  --menta-100: #EDFEE9;
  --menta-200: #E1FDD9;
  --menta-300: #D5FDCA;  /* measured — the brand accent */
  --menta-400: #BCEFAE;
  --menta-500: #9FDC8F;

  /* ---------- OXIDE — the one new colour ----------
     Nothing in the measured palette can say "this is wrong". A system
     with a portal, forms and an alert state needs that. Oxide is the
     red of primer paint on structural steel — literal to this reader,
     and it sits in the same warm, desaturated register as the taupes
     instead of importing a generic UI red.
     #A6432B on paper = 5.96:1 (AA). */
  --oxide-400: #C2604A;
  --oxide-500: #A6432B;
  --oxide-100: #F4DFD9;

  /* ============================================================
     SEMANTIC — SURFACES
     ============================================================ */
  --bg-page:      var(--oliva-50);
  --bg-surface:   var(--oliva-100);   /* grouped area, card */
  --bg-raised:    #FFFFFF;            /* the only true white; rare */
  --bg-sunken:    var(--oliva-200);
  /* The text-bearing field. #F8FFF6 on oliva-600 = 4.64:1, so it can
     carry body and annotation. The measured #908D7C sits one step
     lighter at --bg-field-graphic: it only reaches 3.28:1 against
     paper, so nothing under 24px may sit on it. */
  --bg-field:     var(--oliva-600);
  --bg-field-graphic: var(--oliva-500);  /* diagram, cover graphic — no small text */
  --bg-field-deep:var(--oliva-800);   /* dark field that carries menta */
  --bg-inverse:   var(--oliva-900);
  --bg-accent:    var(--menta-300);   /* emphasis panel, light */

  /* ============================================================
     SEMANTIC — TEXT
     ============================================================ */
  --fg-primary:    var(--oliva-700);  /* 6.30:1 on page */
  --fg-strong:     var(--oliva-900);  /* headlines, 14.1:1 */
  --fg-secondary:  var(--oliva-700);  /* meta, captions: 6.30:1 na página, 5.38:1 na superfície (oliva-600 dava 3.96:1 na superfície) */
  --fg-muted:      var(--oliva-400);  /* disabled, placeholder only */
  --fg-on-field:   var(--oliva-50);   /* on --bg-field, 4.64:1 */
  /* No muted tint on the field: oliva-100 there is only 3.96:1.
     Hierarchy on a field comes from size and from serif vs condensed. */
  --fg-on-field-secondary: var(--oliva-50);
  --fg-on-deep:    var(--menta-300);  /* on --bg-field-deep, 8.2:1 */
  --fg-on-deep-secondary: var(--oliva-200);
  --fg-on-accent:  var(--oliva-800);  /* on menta, 8.2:1 */

  /* ============================================================
     SEMANTIC — RULES
     ============================================================
     This system separates with rules, not with shadows. Three
     weights, and that is the whole vocabulary. */
  --rule-hair:      rgba(97, 95, 84, 0.22);   /* structure, table rows */
  --rule-soft:      rgba(97, 95, 84, 0.38);   /* input, card edge */
  --rule-strong:    var(--oliva-900);          /* dimension line, emphasis */
  --rule-on-field:  rgba(248, 255, 246, 0.34);
  --rule-on-deep:   rgba(213, 253, 202, 0.28);

  /* ============================================================
     SEMANTIC — ACTION
     ============================================================ */
  --action-primary-bg:      var(--oliva-800);
  --action-primary-fg:      var(--menta-300);
  --action-primary-hover:   var(--oliva-900);
  --action-primary-press:   #1C1B17;

  --action-secondary-bg:     transparent;
  --action-secondary-fg:     var(--oliva-800);
  --action-secondary-rule:   var(--oliva-800);
  --action-secondary-hover:  var(--oliva-800);
  --action-secondary-hover-fg: var(--menta-300);

  --action-quiet-hover: rgba(97, 95, 84, 0.10);

  --focus-ring: var(--oliva-900);
  --focus-halo: var(--menta-300);

  /* ============================================================
     SEMANTIC — SYSTEM STATES
     ============================================================ */
  --state-ok:       #4A7A4E;
  --state-ok-bg:    var(--menta-200);
  --state-attn:     var(--oliva-600);
  --state-attn-bg:  var(--oliva-100);
  --state-error:    var(--oxide-500);
  --state-error-bg: var(--oxide-100);

  /* ============================================================
     TYPE — two families
     ============================================================
     SPECTRAL carries authority without charm. It was cut for
     screen-read long documents: low contrast, sturdy slab-ish
     serifs, a narrow-ish set width. It looks like the typeface of
     a technical standard, not of a lifestyle magazine — which is
     the difference between this reader trusting the page and
     bouncing off it. Numerals are why it is here: figures set in
     Spectral read as measured quantities.
     Alternative if Spectral is unavailable: Source Serif 4.

     ARCHIVO is a grotesque drawn for high-performance print and
     small sizes, with a condensed width in the same family.
     Narrow does the work no serif can: dimension annotations,
     diagram labels, table headers — dense, legible, and visually
     identical to the lettering on an engineering drawing.
     ============================================================ */
  --font-serif: "Spectral", "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-cond:  "Archivo Narrow", "Archivo", "Helvetica Neue Condensed", Arial, sans-serif;

  /* Scale — 1.25 for display, tighter in the UI range. */
  --fs-display-xl: clamp(52px, 7vw, 104px); /* @kind font */
  --fs-display-l:  clamp(42px, 5.4vw, 74px); /* @kind font */
  --fs-display-m:  clamp(34px, 4vw, 54px); /* @kind font */
  --fs-h1: 44px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 21px;
  --fs-h5: 18px;
  --fs-body-lg: 19px;
  --fs-body:    17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-micro:   13px;  /* annotation, condensed, not uppercase-tracked (piso de 13px) */

  --lh-tight:  1.06; /* @kind font */
  --lh-snug:   1.20; /* @kind font */
  --lh-normal: 1.42; /* @kind font */
  --lh-relax:  1.62; /* @kind font */

  /* Tracking. Note there is no 0.18em eyebrow track in this system —
     the tracked all-caps label above every heading is exactly the
     tell the brief asked us to avoid. Annotation is set in Archivo
     Narrow at small size instead, which is how a drawing labels
     things. */
  --tr-tight:  -0.018em; /* @kind font */
  --tr-normal:  0em; /* @kind font */
  --tr-annot:   0.04em; /* @kind font */

  --fw-reg: 400; /* @kind font */
  --fw-med: 500; /* @kind font */
  --fw-sbd: 600; /* @kind font */
  --fw-bld: 700; /* @kind font */

  /* ============================================================
     SPACING — 4-based, 12 steps
     ============================================================ */
  --space-0: 0px;
  --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;
  --space-11: 192px;

  /* ============================================================
     RADII — a drawing has corners
     ============================================================
     The whole scale tops out at 4px. Pill is reserved for status
     chips and nothing else; a pill-shaped primary button is the
     single fastest way to make this page look like a SaaS landing. */
  --radius-none: 0px;
  --radius-xs: 1px;
  --radius-sm: 2px;   /* default: buttons, inputs, cards */
  --radius-md: 3px;
  --radius-lg: 4px;
  /* Botão: arredondamento leve, acima do teto das superfícies. */
  --radius-button: 6px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION — two entries, deliberately
     ============================================================
     The four-level warm shadow scale from the previous system was
     removed. Nothing in a technical document casts a shadow, and a
     soft grey shadow on every card at every hierarchy level is the
     look the brief ruled out. Cards get a hairline. Only things
     that genuinely float above the page get a shadow. */
  --shadow-hair:  inset 0 0 0 1px var(--rule-hair);
  --shadow-panel: 0 12px 32px rgba(43, 42, 37, 0.14), 0 2px 6px rgba(43, 42, 37, 0.08);

  /* ============================================================
     MOTION — three durations, one curve
     ============================================================
     Movement answers an action. Nothing enters on scroll, nothing
     loops, nothing reveals itself. The single curve decelerates
     hard and never overshoots, so a state change reads as a
     mechanism settling rather than as an animation playing. */
  --ease: cubic-bezier(.2, 0, 0, 1); /* @kind other */
  --dur-touch: 120ms; /* @kind other */ /* hover, press — the finger's own latency */
  --dur-state: 200ms; /* @kind other */ /* open/close, tab change, value update */
  --dur-panel: 320ms; /* @kind other */ /* drawer, dialog, page-level entry */

  /* ============================================================
     LAYOUT
     ============================================================
     12 columns at 1240px. Everything aligns left to the column
     grid — no centred text blocks outside of a cover. A drawing is
     read from a datum edge; so is this. */
  --container-max: 1240px; /* @kind spacing */
  --container-reading: 66ch; /* @kind spacing */
  --gutter: clamp(20px, 3.4vw, 40px); /* @kind spacing */
  --grid-cols: 12; /* @kind other */

  /* ============================================================
     DIMENSION LINE — the system's one signature
     ============================================================
     Every quantity Salto states is annotated the way a drawing
     annotates a length: a hairline with terminal ticks, the figure
     sitting on it in Archivo Narrow. 8 months. Three stages.
     R$ 5–100 mi. 1 hour a week. It is pure vector and type, it is
     unmistakably this client's, and no page builder produces it.
     This is where the boldness is spent — the rest stays quiet. */
  --dim-stroke: 1.5px; /* @kind spacing */
  --dim-terminal: 9px; /* @kind spacing */
  --dim-gap: 10px; /* @kind spacing */
  --dim-color: var(--oliva-900); /* @kind color */
}

/* ============================================================
   BASE
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--bg-page); color: var(--fg-primary); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relax); }

h1, h2, h3, h4, h5 { font-family: var(--font-serif); color: var(--fg-strong); font-weight: var(--fw-med); letter-spacing: var(--tr-tight); line-height: var(--lh-snug); margin: 0 0 var(--space-4); text-wrap: pretty; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); font-family: var(--font-sans); font-weight: var(--fw-sbd); letter-spacing: var(--tr-normal); }

.display-xl { font-family: var(--font-serif); font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-reg); }
.display-l { font-family: var(--font-serif); font-size: var(--fs-display-l); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-reg); }
.display-m { font-family: var(--font-serif); font-size: var(--fs-display-m); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: var(--fw-reg); }

p { margin: 0 0 var(--space-4); max-width: var(--container-reading); }
p.lede { font-size: var(--fs-body-lg); line-height: var(--lh-relax); color: var(--fg-primary); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-secondary); }

/* Annotation — replaces the tracked uppercase eyebrow. */
.annot { font-family: var(--font-cond); font-size: var(--fs-micro); letter-spacing: var(--tr-annot); color: var(--fg-secondary); font-weight: var(--fw-med); text-transform: none; }
.annot--num { font-variant-numeric: tabular-nums; }

/* Figures. Serif numerals are a load-bearing part of the voice. */
.figure { font-family: var(--font-serif); font-weight: var(--fw-reg); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--tr-tight); color: var(--fg-strong); }

a { color: var(--oliva-800); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule-soft); transition: text-decoration-color var(--dur-touch) var(--ease), color var(--dur-touch) var(--ease); }
a:hover { color: var(--oliva-900); text-decoration-color: currentColor; }

hr { border: 0; height: 1px; background: var(--rule-hair); margin: var(--space-6) 0; }
::selection { background: var(--menta-300); color: var(--oliva-900); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ============================================================
   DIMENSION LINE — utilities
   ============================================================
   Horizontal: a hairline that spans the measured thing, with a
   terminal tick at each end and the figure above it.
   Vertical: the same rotated, used down the left datum of a
   stage list or a timeline. */
.dim { display: inline-flex; flex-direction: column; align-items: stretch; gap: var(--dim-gap); min-width: 120px; }
.dim__value { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--tr-tight); color: var(--fg-strong); font-variant-numeric: tabular-nums lining-nums; }
.dim__value sup, .dim__value .unit { font-family: var(--font-cond); font-size: var(--fs-body-sm); letter-spacing: var(--tr-annot); vertical-align: baseline; margin-left: 0.3em; color: var(--fg-secondary); }
.dim__line { position: relative; height: var(--dim-terminal); }
.dim__line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--dim-stroke); background: var(--dim-color); transform: translateY(-50%); }
.dim__line::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-left: var(--dim-stroke) solid var(--dim-color); border-right: var(--dim-stroke) solid var(--dim-color); }
.dim__label { font-family: var(--font-cond); font-size: var(--fs-micro); letter-spacing: var(--tr-annot); color: var(--fg-secondary); }
.dim--on-field .dim__line::before { background: var(--oliva-50); }
.dim--on-field .dim__line::after { border-left-color: var(--oliva-50); border-right-color: var(--oliva-50); }
.dim--on-field .dim__value, .dim--on-field .dim__label { color: var(--fg-on-field); }
.dim--on-field .dim__value sup, .dim--on-field .dim__value .unit { color: var(--fg-on-field); }
.dim--on-deep .dim__line::before { background: var(--menta-300); }
.dim--on-deep .dim__line::after { border-left-color: var(--menta-300); border-right-color: var(--menta-300); }
.dim--on-deep .dim__value { color: var(--menta-300); }
.dim--on-deep .dim__value sup, .dim--on-deep .dim__value .unit { color: var(--fg-on-deep-secondary); }
.dim--on-deep .dim__label { color: var(--fg-on-deep-secondary); }

/* Vertical datum — for the three stages. */
.datum { position: relative; padding-left: var(--space-6); }
.datum::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--dim-stroke); background: var(--dim-color); }
.datum__tick { position: relative; }
.datum__tick::before { content: ""; position: absolute; left: calc(-1 * var(--space-6)); top: 0.7em; width: var(--dim-terminal); height: var(--dim-stroke); background: var(--dim-color); }