/* ============================================================
TRIVOLO — Design Tokens
Terra & Craft · artesanal com tecnologia
Foundation layer: color, type, spacing, radii, shadow, motion.
Load this first, everywhere.
============================================================ */
/* ---- Fonts (Google Fonts) ----
Plus Jakarta Sans → interface (300–800)
Cormorant Garamond → display / editorial / títulos grandes
Space Grotesk → valores numéricos (saldo, preços, tabelas) — figuras tabulares, leitura rápida
Import in HTML :
*/
:root {
/* ============================================
1. CORE PALETTE — Terra & Craft (raw values)
============================================ */
--terracota: #D63A6F; /* AÇÃO · CTAs · links · destaques */
--bege-areia: #FBEDE6; /* fundos rebaixados · chips inativos */
--verde-musgo: #2F9E6B; /* suporte · sucesso */
--off-white: #FFF8F3; /* fundo principal (neutro quente) */
--escuro: #2E1B2C; /* ameixa · superfícies escuras · sidebar */
--dourado: #F2A93B; /* âmbar de apoio · premium pontual */
--medio: #75626E; /* textos secundários */
--claro: #AC99A4; /* textos terciários · placeholders */
/* ---- "Terracota" scale → AÇÃO (magenta) ---- */
--terracota-700: #8F2249; /* pressed */
--terracota-600: #B32C5C; /* hover (action-deep) */
--terracota-500: #D63A6F; /* base (action) */
--terracota-400: #E85D8C; /* focus / mid accent */
--terracota-300: #F08BAE; /* soft accents */
--terracota-100: #FBE4EC; /* tinted surfaces (action-soft) */
--terracota-050: #FDF2F6; /* faint wash */
/* ---- Verde scale ---- */
--verde-700: #1F7A50;
--verde-600: #268A5C;
--verde-500: #2F9E6B;
--verde-100: #DDF1E7;
--verde-050: #EDF8F1;
/* ---- "Dourado" scale → ÂMBAR ---- */
--dourado-600: #A96F12;
--dourado-500: #F2A93B;
--dourado-100: #FBEDD5;
/* ---- Neutral / sand scale (neutros quentes, base ameixa) ---- */
--sand-000: #FFFFFF;
--sand-050: #FFF8F3; /* = off-white */
--sand-100: #FBEDE6; /* = bege areia / sunken */
--sand-200: #F5E2DA;
--sand-300: #E9D2C8;
--sand-400: #AC99A4; /* = claro */
--sand-500: #9A8592;
--sand-600: #75626E; /* = medio */
--sand-700: #4A3444;
--sand-800: #2E1B2C; /* = escuro (plum) */
/* ---- Status hues ---- */
--success: #2F9E6B;
--success-100: #DDF1E7;
--warning: #F2A93B;
--warning-100: #FBEDD5;
--danger: #CC3A31;
--danger-100: #FBE2DE;
--info: #1F8189;
--info-100: #DDF0F1;
/* ============================================
2. SEMANTIC COLOR TOKENS — use these in UI
============================================ */
/* Surfaces */
--bg: var(--off-white); /* app background */
--bg-raised: #FFFFFF; /* cards on top of bg */
--bg-sunken: var(--bege-areia); /* wells, secondary panels */
--bg-inset: #FBF1EC; /* inputs, inset fields */
--sidebar-bg: var(--escuro); /* dark navigation rail */
--overlay: rgba(46, 27, 44, 0.46); /* modal scrim */
/* Text */
--text: #3D2A38; /* primary text (ink) */
--text-2: var(--medio); /* secondary text */
--text-3: var(--claro); /* tertiary · placeholders */
--text-on-dark: #F4ECF1; /* text on plum/dark */
--text-on-dark-2:#B7A6B2; /* muted text on dark */
--text-brand: var(--terracota); /* links · branded text */
--text-on-brand: #FFFFFF; /* text on action fills */
/* Borders / lines */
--border: #F1E0D6; /* default hairline (line) */
--border-strong: #E6CEC1; /* emphasized border */
--border-input: #E6D3C8; /* form control border */
--ring: rgba(214, 58, 111, 0.30); /* focus ring (action) */
/* Brand intent */
--accent: var(--terracota);
--accent-hover: var(--terracota-600);
--accent-press: var(--terracota-700);
--premium: var(--dourado);
/* ============================================
2b. ALIASES "ATELIÊ VIVO" — papéis novos
Marca (teal) e Ação (magenta): papéis DISTINTOS,
nunca trocar entre si.
============================================ */
--brand: #1F8189; --brand-deep: #15646B; --brand-soft: #DDF0F1;
--brand-lite: #8ED0D4; /* wordmark sobre fundo escuro */
--action: #D63A6F; --action-deep:#B32C5C; --action-soft:#FBE4EC;
--amber: #F2A93B; --amber-deep: #A96F12; --amber-soft: #FBEDD5;
--green: #2F9E6B; --green-soft: #DDF1E7;
--choc: #5C4033; /* cor dos títulos */
--plum: #2E1B2C; /* superfícies escuras */
--glow: 0 8px 22px rgba(214,58,111,.32); /* exclusiva de CTA */
--r-pill: 999px; --r-card: 22px; --r-big: 26px;
/* ============================================
3. TYPOGRAPHY
============================================ */
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: 'Baloo 2', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif; /* títulos */
--font-script: 'Pacifico', 'Segoe Script', cursive; /* palavra-carinho, uso único */
--font-numeric: 'Space Grotesk', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; /* valores · figuras tabulares */
--font-mono: 'Space Grotesk', ui-monospace, 'SF Mono', Menlo, monospace; /* URLs/meta técnicas */
/* Weights */
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-semibold: 600;
--w-bold: 700;
--w-extra: 800;
/* Type scale — interface (Plus Jakarta) */
--text-xs: 0.75rem; /* 12px · micro labels, table meta */
--text-sm: 0.8125rem; /* 13px · captions, helper text */
--text-base: 0.9375rem; /* 15px · body, controls */
--text-md: 1.0625rem; /* 17px · emphasized body */
--text-lg: 1.25rem; /* 20px · card titles */
--text-xl: 1.5rem; /* 24px · section titles */
/* Display scale — editorial (Cormorant) */
--display-sm: 2rem; /* 32px */
--display-md: 2.75rem; /* 44px */
--display-lg: 3.75rem; /* 60px */
--display-xl: 5rem; /* 80px · hero numbers */
/* Line heights */
--leading-tight: 1.12;
--leading-snug: 1.28;
--leading-normal: 1.55;
--leading-relaxed: 1.7;
/* Letter spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-caps: 0.12em; /* uppercase eyebrows / labels */
/* ============================================
4. SPACING — generous, 4px base
============================================ */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* ============================================
5. RADII — generous, organic (10–24px)
============================================ */
--radius-sm: 10px; /* tags, small chips */
--radius-md: 14px; /* inputs, buttons */
--radius-lg: 18px; /* cards */
--radius-xl: 22px; /* large cards, modals (--r-card) */
--radius-2xl: 26px; /* hero panels, overlays (--r-big) */
--radius-pill: 999px; /* pills, avatars, toggle, buttons */
/* ============================================
6. SHADOWS — warm, brown-toned (never cold grey)
Built on the dark earth color (42,31,20).
============================================ */
--shadow-xs: 0 1px 2px rgba(46, 27, 44, 0.06);
--shadow-sm: 0 2px 4px rgba(46, 27, 44, 0.05),
0 4px 10px rgba(46, 27, 44, 0.04);
--shadow-md: 0 3px 8px rgba(46, 27, 44, 0.05),
0 14px 34px rgba(46, 27, 44, 0.09);
--shadow-lg: 0 8px 20px rgba(46, 27, 44, 0.08),
0 28px 60px rgba(46, 27, 44, 0.12);
--shadow-xl: 0 12px 28px rgba(46, 27, 44, 0.10),
0 40px 90px rgba(46, 27, 44, 0.16);
/* warm focus glow for inputs */
--shadow-focus: 0 0 0 3px var(--ring);
/* subtle inner well for inset surfaces */
--shadow-inset: inset 0 1px 2px rgba(46, 27, 44, 0.05);
/* ============================================
7. MOTION — soft, 200–300ms ease
============================================ */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 150ms;
--dur: 220ms;
--dur-slow: 300ms;
--transition: all var(--dur) var(--ease);
/* ============================================
8. LAYOUT
============================================ */
--sidebar-w: 224px;
--topbar-h: 68px;
--container: 1200px;
--content-pad: var(--space-8);
/* ============================================
9. NOISE TEXTURE — subtle grain for backgrounds
Apply with: background-image: var(--noise);
Pair with a base color; the SVG is monochrome alpha.
============================================ */
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
/* ============================================================
SEMANTIC ELEMENT DEFAULTS
Optional base layer — import to get sensible HTML defaults.
============================================================ */
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text);
background-color: var(--bg);
background-image: var(--noise);
font-weight: var(--w-regular);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Display / editorial headings — Cormorant */
.display-xl, .display-lg, .display-md, .display-sm {
font-family: var(--font-display);
font-weight: var(--w-medium);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text);
}
.display-xl { font-size: var(--display-xl); }
.display-lg { font-size: var(--display-lg); }
.display-md { font-size: var(--display-md); }
.display-sm { font-size: var(--display-sm); }
/* Interface headings — Plus Jakarta */
h1, .h1 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--w-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
h2, .h2 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--w-semibold); line-height: var(--leading-snug); }
h3, .h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--w-semibold); line-height: var(--leading-snug); }
p, .body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-2); }
/* Eyebrow / overline label */
.eyebrow {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--w-semibold);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--text-3);
}
/* Mono — codes, SKUs, technical meta */
.mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0; }
/* Numeric — monetary values, metrics. Tabular figures for fast reading + clean column alignment. */
.num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}