@layer tokens, base, layout, components, page, utilities;

@layer tokens {
  :root {

    --rio-negro: #10262B;
    --rio-negro-2: #16333A;
    --areia: #C9A26B;
    --areia-escura: #7B5B2D;
    --papel: #F2EDE4;
    --papel-2: #E9E0D0;
    --aco: #3E6E75;

    --surface: #fff;

    --ink-12: rgba(16, 38, 43, .12);
    --ink-78: rgba(16, 38, 43, .78);
    --ink-82: rgba(16, 38, 43, .82);
    --papel-20: rgba(242, 237, 228, .16);
    --papel-70: rgba(242, 237, 228, .70);
    --areia-45: rgba(201, 162, 107, .45);

    --rio-negro-92: rgba(16, 38, 43, .92);

    --haste: var(--rio-negro);
    --arco: var(--areia);

    --accent-text: var(--areia-escura);

    --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Roboto Mono", monospace;
    --font-size-base: 17px;
    --line-height: 1.6;

    --size-h1: clamp(2.4rem, 5.4vw, 4.1rem);
    --size-h1-page: clamp(2rem, 4.4vw, 3.1rem);
    --size-h2: clamp(1.7rem, 3.2vw, 2.4rem);
    --size-h3: 1.18rem;
    --size-lead: 1.14rem;
    --size-card-body: .97rem;
    --size-sm: .95rem;
    --size-xs: .9rem;
    --tracking-display: -0.02em;
    --tracking-eyebrow: .14em;

    --space-section: clamp(64px, 9vw, 110px);
    --space-cards: 20px;
    --gutter: 28px;

    --radius-card: 16px;
    --radius-card-sm: 14px;
    --radius-pill: 999px;

    --grid-line-minor: rgba(242, 237, 228, .03);
    --grid-line-major: rgba(242, 237, 228, .06);
    --grid-step-minor: 28px;
    --grid-step-major: 140px;

    --shadow-lift: 0 10px 28px rgba(16, 38, 43, .10);
    --shadow-btn: 0 6px 16px rgba(16, 38, 43, .18);

    --max-width: 1080px;
    --max-width-prose: 760px;

    --wave-height: 64px;

    --header-height: 68px;

    --transition: .15s;
    --duracao-onda: 26s;
  }
}