/* ==========================================================================
TOKENS — Yamamoto Clinic Design System
Cópia literal dos quatro arquivos de tokens do design system:
tokens/fonts.css, tokens/colors.css, tokens/typography.css, tokens/spacing.css
Única alteração: o caminho do @font-face aponta para ../fonts/ e o
@import do Baloo 2 virou no do index.html (um @import
dentro do CSS bloqueia a renderização).
NÃO invente cor, raio ou fonte que não esteja aqui.
========================================================================== */
/* ---- tokens/fonts.css ---------------------------------------------------- */
/* Body / UI sans — self-hosted (uploaded) */
@font-face{font-family:"Glacial Indifference";src:url("../fonts/GlacialIndifference-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
/* Display face — SUBSTITUTION: no display font was provided.
Baloo 2 chosen for its soft rounded corners + warmth (see readme.md → Typography).
O @import original foi convertido em +
no do index.html. */
/* ---- tokens/colors.css --------------------------------------------------- */
:root{
/* ---- Base palette ---- */
--c-base:#FDFBF8; /* warm off-white, welcoming — clareado a pedido do
usuário. Este é o limite: os cards são brancos
(#FFF) e a partir daqui param de se destacar do
fundo, passando a depender só da sombra. */
--c-plum:#5B2481; /* vivid plum purple — primary */
--c-moss:#3D5A26; /* vivid moss green — secondary */
--c-moss-light:#DCEBC7; /* light moss — soft fills, icon circles */
--c-lilac:#C39CEE; /* lilac — shapes, hover, text on purple */
--c-apricot:#ED8A22; /* apricot — badges, highlights */
--c-ink:#2A1D33; /* near-black purple — text (never pure #000) */
/* ---- Tints / supporting ---- */
--c-plum-700:#451866; /* darker plum (footer depth, pressed) */
--c-plum-300:#8347B5; /* lifted plum (hover on plum surface) */
--c-lilac-tint:#F1E6FD; /* very light lilac wash */
--c-apricot-tint:#FDE6C9; /* very light apricot wash */
--c-white:#FFFFFF; /* pure white — cards only */
/* ---- Semantic aliases ---- */
--bg-page:var(--c-base);
/* O canto claro precisa subir junto com --c-base, senão o gradiente achata. */
--bg-page-warm:radial-gradient(120% 90% at 0% 0%, #FFFEFC 0%, var(--c-base) 55%);
--surface-card:var(--c-white);
--surface-feature:var(--c-plum); /* feature card / footer */
--surface-soft-moss:var(--c-moss-light);
--surface-soft-lilac:var(--c-lilac-tint);
--text-body:var(--c-ink);
--text-muted:#6B5A7B;
--text-title:var(--c-plum);
--text-on-plum:var(--c-base);
--text-on-plum-soft:var(--c-lilac);
--text-on-moss:var(--c-base);
--accent-primary:var(--c-plum);
--accent-secondary:var(--c-moss);
--accent-lilac:var(--c-lilac);
--accent-apricot:var(--c-apricot);
--border-hair:rgba(91,36,129,0.12);
--focus-ring:var(--c-apricot);
/* Category strip colors (card top strips) — moss is never a box fill */
--strip-plum:var(--c-plum);
--strip-lilac:var(--c-lilac);
--strip-apricot:var(--c-apricot);
}
/* ---- tokens/typography.css ----------------------------------------------- */
:root{
--font-display:"Glacial Indifference",system-ui,-apple-system,sans-serif; /* títulos: Glacial (por escolha do cliente, no lugar da Baloo 2) */
--font-body:"Glacial Indifference",system-ui,-apple-system,sans-serif; /* body, UI, legible */
/* Type scale (fluid-friendly base = 16px) */
--fs-display:clamp(2.75rem,4.5vw,4.25rem);
--fs-h1:clamp(2.25rem,3.4vw,3.25rem);
--fs-h2:clamp(1.75rem,2.4vw,2.375rem);
--fs-h3:1.5rem;
--fs-h4:1.25rem;
--fs-body-lg:1.125rem;
--fs-body:1rem;
--fs-sm:0.9375rem;
--fs-label:0.8125rem;
--lh-tight:1.15;
--lh-snug:1.35;
--lh-body:1.7;
--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-extrabold:800;
--tracking-label:0.08em;
--tracking-tight:-0.01em;
}
/* ---- tokens/spacing.css -------------------------------------------------- */
:root{
/* 4px base rhythm */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
--sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
--sp-20:80px; --sp-24:96px; --sp-32:128px;
--gutter:clamp(24px,5vw,80px);
--section-y:clamp(64px,9vw,140px);
--content-max:1200px;
/* Radii */
--r-sm:10px;
--r-md:16px;
--r-lg:22px; /* cards: 22–24px */
--r-xl:28px;
--r-pill:999px;
--r-blob:42% 58% 63% 37% / 45% 42% 58% 55%;
/* Shadows — colored, never gray */
--shadow-card:0 12px 32px rgba(91,36,129,0.10);
--shadow-card-hover:0 20px 44px rgba(91,36,129,0.16);
--shadow-badge:0 6px 16px rgba(91,36,129,0.14);
--shadow-button:0 8px 20px rgba(91,36,129,0.22);
--shadow-feature:0 24px 60px rgba(91,36,129,0.28);
/* Motion — playful bounce */
--ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
--ease-soft:cubic-bezier(0.22,0.61,0.36,1);
--dur-fast:160ms;
--dur:280ms;
--dur-slow:520ms;
--strip-h:4px; /* card top category strip */
}