/* ═══════════════════════════════════════════════════════════════════════════ Cubo Três · Design Tokens ──────────────────────────────────────────────────────────────────────────── Conceito: "três faces, um caminho" Tudo deriva do cubo isométrico, três cores principais, três cuts da tipografia, três tiers de superfície, três motivos visuais. Theme contract: (default) ou .dark class é setada em paralelo (compat Tailwind dark:*) theme.js gerencia preferência (localStorage cubo-theme) + sync cross-iframe ═══════════════════════════════════════════════════════════════════════════ */ /* ── Fonts ──────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-VariableFont_wdth_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-stretch: 62.5% 100%; font-style: normal; font-display: swap; } /* Raleway, só display. Eixo de peso apenas: NAO tem eixo de largura, por isso font-stretch nao funciona nela (ver --font-display abaixo). */ @font-face { font-family: 'Raleway'; src: url('fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ═══════════════════════════════════════════════════════════════════════════ STATIC TOKENS, tema-independentes Type, spacing, radii, motion. Definidos uma vez. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Typography ────────────────────────────────────────────────────── */ --font-sans: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; /* Display: Raleway. Corpo: Noto Sans. Decidido em 2026-07-21 apos teste lado a lado. Raleway da personalidade ao titulo; Noto sustenta texto longo (altura de x maior). ATENCAO: Raleway nao tem eixo de largura, entao font-stretch e inerte em qualquer coisa com --font-display. */ --font-display: 'Raleway', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* Type scale (modular, ratio 1.25 from 16px base) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 3.75rem; /* 60px */ --text-6xl: 4.5rem; /* 72px */ --text-7xl: 6rem; /* 96px, display only */ /* Line heights */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing, display gets tighter, eyebrows wider */ --tracking-display: -0.03em; --tracking-headline: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-eyebrow: 0.08em; /* Weight ladder */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* Width axis (Noto Sans variable supports this) */ --width-condensed: 75; --width-semicondensed: 87.5; --width-normal: 100; /* ── Spacing scale ──────────────────────────────────────────────── */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ --space-5xl: 8rem; /* 128px */ /* ── Radii ──────────────────────────────────────────────────────── */ --radius-xs: 0.25rem; /* 4px , chips, inline pills */ --radius-sm: 0.5rem; /* 8px , buttons, inputs */ --radius-md: 0.75rem; /* 12px, cards (default) */ --radius-lg: 1rem; /* 16px, panels */ --radius-xl: 1.5rem; /* 24px, hero panels */ --radius-full: 9999px; /* avatars, dots */ /* ── Motion ─────────────────────────────────────────────────────── */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-deliberate: 600ms; /* Easings, calm, no overshoots. "Voltar amanhã" energy. */ --ease-standard: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ── Fixed brand tokens, não mudam entre temas ─────────────────── */ --color-teal-fixed: 12 70% 22%; /* #12465A, deep teal, marca */ --color-cyan-fixed: 184 100% 41%; /* #00C9D3, cyan, sotaque */ --color-purple-fixed: 252 73% 60%; /* #6E4FE3, purple, raro */ /* Iso-grid angle (30° / 150°) for cube motif backgrounds */ --iso-angle: 30deg; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT MODE, default ═══════════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme='light'] { /* ── Brand palette ────────────────────────────────────────────────── */ --teal-50: 198 65% 96%; --teal-100: 198 60% 88%; --teal-200: 198 55% 76%; --teal-300: 198 50% 60%; --teal-400: 198 60% 42%; --teal-500: 198 66% 30%; --teal-600: 198 70% 22%; /* #12465A, deep teal base */ --teal-700: 198 70% 17%; --teal-800: 198 70% 12%; --teal-900: 198 70% 8%; --teal-950: 198 70% 4%; --cyan-50: 184 80% 95%; --cyan-100: 184 80% 88%; --cyan-200: 184 85% 78%; --cyan-300: 184 95% 65%; --cyan-400: 184 100% 50%; --cyan-500: 184 100% 41%; /* #00C9D3, cyan accent */ --cyan-600: 184 100% 35%; --cyan-700: 184 100% 28%; --cyan-800: 184 100% 20%; --cyan-900: 184 100% 12%; --purple-50: 252 90% 96%; --purple-100: 252 85% 92%; --purple-200: 252 80% 84%; --purple-300: 252 75% 75%; --purple-400: 252 73% 68%; --purple-500: 252 73% 60%; /* #6E4FE3, purple rare */ --purple-600: 252 65% 50%; --purple-700: 252 60% 40%; --purple-800: 252 55% 30%; /* ── Neutrals, cool slate, matiz 210-215 em toda a rampa ────────── */ --neutral-0: 0 0% 100%; /* pure white */ --neutral-50: 210 20% 98%; --neutral-100: 210 14% 95%; --neutral-200: 210 14% 89%; --neutral-300: 214 12% 80%; --neutral-400: 215 10% 65%; --neutral-500: 215 12% 47%; --neutral-600: 215 16% 35%; --neutral-700: 215 20% 25%; --neutral-800: 215 25% 16%; --neutral-900: 215 30% 10%; --neutral-950: 215 35% 6%; /* Creme removido em 2026-07-21: era o unico token quente (36°) numa identidade fria, e brigava com o teal. Virou superficie neutra. */ --surface-soft: var(--neutral-100); /* #F0F2F4, alternativa suave ao branco */ /* ── Semantic ───────────────────────────────────────────────────── */ --success-50: 142 65% 95%; --success-100: 142 70% 88%; --success-300: 142 55% 70%; --success-500: 142 60% 42%; --success-600: 142 65% 36%; --success-700: 142 70% 28%; --success-900: 142 70% 14%; --warning-50: 38 95% 95%; --warning-100: 38 95% 88%; --warning-500: 38 92% 50%; --warning-600: 32 90% 45%; --warning-700: 26 85% 38%; --error-50: 0 85% 95%; --error-100: 0 90% 90%; --error-500: 0 80% 60%; --error-600: 0 75% 50%; --error-700: 0 75% 40%; --info-50: 204 95% 95%; --info-100: 204 90% 90%; --info-500: 199 85% 50%; --info-600: 200 90% 40%; --info-700: 200 90% 32%; /* ── Semantic surface tokens ──────────────────────────────────────── */ --bg-base: var(--neutral-0); --bg-subtle: var(--neutral-50); --bg-muted: var(--neutral-100); --bg-elevated: var(--neutral-100); --bg-inverted: var(--neutral-900); --bg-soft: var(--surface-soft); --bg-cream: var(--bg-soft); /* DEPRECIADO: use --bg-soft */ --surface-card: var(--neutral-0); --surface-panel: var(--neutral-50); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-400); --border-inverted: var(--neutral-900); --text-display: var(--neutral-900); /* hero / display numbers */ --text-heading: var(--neutral-900); --text-body: var(--neutral-700); --text-muted: var(--neutral-500); --text-subtle: var(--neutral-400); --text-inverted: var(--neutral-0); --text-on-brand: var(--neutral-0); /* text over teal/cyan/purple */ /* Aliases */ --color-primary: var(--teal-600); --color-accent: var(--cyan-500); --color-rare: var(--purple-500); --color-on-primary: var(--neutral-0); --color-on-accent: var(--neutral-900); /* ── Shadows, soft, calm, two-layer for realism ───────────────── */ --shadow-overlay: 215 35% 6%; --shadow-xs: 0 1px 2px hsl(var(--shadow-overlay) / 0.06); --shadow-sm: 0 1px 3px hsl(var(--shadow-overlay) / 0.08), 0 1px 2px hsl(var(--shadow-overlay) / 0.04); --shadow-md: 0 4px 12px hsl(var(--shadow-overlay) / 0.08), 0 2px 4px hsl(var(--shadow-overlay) / 0.05); --shadow-lg: 0 12px 32px hsl(var(--shadow-overlay) / 0.10), 0 4px 8px hsl(var(--shadow-overlay) / 0.06); --shadow-xl: 0 24px 48px hsl(var(--shadow-overlay) / 0.14), 0 8px 16px hsl(var(--shadow-overlay) / 0.08); --shadow-focus: 0 0 0 3px hsl(var(--cyan-500) / 0.35); color-scheme: light; } /* ═══════════════════════════════════════════════════════════════════════════ DARK MODE Primary swap: deep teal → cyan (better contrast on dark surfaces) Surface base is teal-tinted black (not pure slate) for warmth ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme='dark'], :root.dark { --neutral-0: 198 30% 6%; /* teal-tinted near-black */ --neutral-50: 198 25% 9%; --neutral-100: 198 22% 13%; --neutral-200: 198 18% 18%; --neutral-300: 198 15% 28%; --neutral-400: 215 12% 50%; --neutral-500: 215 15% 65%; --neutral-600: 215 18% 78%; --neutral-700: 215 22% 86%; --neutral-800: 215 25% 92%; --neutral-900: 215 30% 96%; --neutral-950: 0 0% 100%; --surface-soft: var(--neutral-100); /* par escuro: 198 22% 13% */ /* Brand: cyan becomes primary, teal becomes accent */ --color-primary: var(--cyan-500); --color-accent: var(--teal-300); --color-rare: var(--purple-400); --color-on-primary: 215 30% 10%; /* dark text on bright cyan */ --color-on-accent: var(--neutral-0); /* Semantic surfaces */ --bg-base: var(--neutral-0); --bg-subtle: var(--neutral-50); --bg-muted: var(--neutral-100); --bg-elevated: var(--neutral-200); --bg-inverted: var(--neutral-900); --bg-soft: var(--surface-soft); --bg-cream: var(--bg-soft); /* DEPRECIADO: use --bg-soft */ --surface-card: var(--neutral-50); --surface-panel: var(--neutral-100); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-400); --border-inverted: var(--neutral-900); --text-display: var(--neutral-900); --text-heading: var(--neutral-900); --text-body: var(--neutral-700); --text-muted: var(--neutral-500); --text-subtle: var(--neutral-400); --text-inverted: var(--neutral-0); --text-on-brand: 215 30% 10%; /* Semantic palettes (slight recalibration for dark) */ --success-500: 142 55% 55%; --success-600: 142 60% 65%; --warning-500: 38 92% 60%; --error-500: 0 80% 65%; --info-500: 199 85% 60%; /* Shadows, white-tinted on dark */ --shadow-overlay: 0 0% 100%; --shadow-xs: 0 1px 2px hsl(var(--shadow-overlay) / 0.06); --shadow-sm: 0 1px 3px hsl(var(--shadow-overlay) / 0.08), 0 1px 2px hsl(var(--shadow-overlay) / 0.04); --shadow-md: 0 4px 12px hsl(var(--shadow-overlay) / 0.08), 0 2px 4px hsl(var(--shadow-overlay) / 0.05); --shadow-lg: 0 12px 32px hsl(var(--shadow-overlay) / 0.10), 0 4px 8px hsl(var(--shadow-overlay) / 0.06); --shadow-xl: 0 24px 48px hsl(var(--shadow-overlay) / 0.14), 0 8px 16px hsl(var(--shadow-overlay) / 0.08); --shadow-focus: 0 0 0 3px hsl(var(--cyan-500) / 0.4); color-scheme: dark; } /* ═══════════════════════════════════════════════════════════════════════════ Base styles, applied to body/elements ═══════════════════════════════════════════════════════════════════════════ */ html { color-scheme: light dark; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: hsl(var(--text-body)); background: hsl(var(--bg-base)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'ss01' 1, 'cv11' 1; transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard); } *, *::before, *::after { box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════════════════ TYPE ROLES, semantic class system. Use these instead of raw sizes. ═══════════════════════════════════════════════════════════════════════════ */ .t-display { font-family: var(--font-display); font-size: var(--text-6xl); line-height: var(--leading-none); letter-spacing: var(--tracking-display); font-weight: var(--weight-extrabold); color: hsl(var(--text-display)); } .t-headline { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-headline); font-weight: var(--weight-extrabold); color: hsl(var(--text-heading)); } .t-title { font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); font-weight: var(--weight-semibold); color: hsl(var(--text-heading)); } .t-subtitle { font-size: var(--text-md); line-height: var(--leading-snug); font-weight: var(--weight-medium); color: hsl(var(--text-heading)); } .t-body { font-size: var(--text-base); line-height: var(--leading-relaxed); color: hsl(var(--text-body)); } .t-body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); color: hsl(var(--text-body)); } .t-eyebrow { font-size: var(--text-xs); line-height: var(--leading-none); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--weight-semibold); color: hsl(var(--color-primary)); } .t-caption { font-size: var(--text-xs); line-height: var(--leading-snug); color: hsl(var(--text-muted)); } .t-stat { font-family: var(--font-display); font-size: var(--text-5xl); line-height: var(--leading-none); letter-spacing: var(--tracking-display); font-weight: var(--weight-light); font-variant-numeric: tabular-nums; color: hsl(var(--text-display)); } /* Color modifier on type roles */ .t-on-brand { color: hsl(var(--text-on-brand)); } .t-muted { color: hsl(var(--text-muted)); } .t-subtle { color: hsl(var(--text-subtle)); } .t-cyan { color: hsl(var(--cyan-500)); } .t-teal { color: hsl(var(--teal-600)); }