/* ============================================================ ArtBackup Design System — tokens (bundled). Gerado por concatenação manual de tokens/{colors,typography,spacing,effects,base}.css nessa ordem, para eliminar a cascata de @import serial no . Fonte de verdade de cada bloco continua em tokens/*.css — ao editar um token lá, reaplique a mudança aqui também (sem build tool no projeto para automatizar essa regeneração). ============================================================ */ /* ===================== colors.css ===================== */ /* ============================================================ ArtBackup — Color tokens (brand-accurate) Vivid signal blue + GREEN call-to-action + deep navy sections, warm orange iconography accent, cool slate neutrals. ============================================================ */ :root { /* ---- Brand blue (primary / links / emphasis) ---- */ --blue-50: #EFF5FF; --blue-100: #DBE8FF; --blue-200: #BAD2FF; --blue-300: #8AB3FF; --blue-400: #5990FB; --blue-500: #3B74F2; --blue-600: #2563EB; /* primary */ --blue-700: #1D4ED8; --blue-800: #1E40AF; --blue-900: #1B3A92; /* ---- Brand green (call-to-action buttons) ---- */ --green-50: #EBFAF0; --green-100: #D1F3DE; --green-200: #A6E7C0; --green-400: #34BC68; --green-500: #17A34A; /* CTA */ --green-600: #128A3E; --green-700: #0E7233; /* ---- Navy (dark surfaces: stat band, infra, footer) ---- */ --navy-700: #142A5C; --navy-800: #0E2150; --navy-900: #0B1B40; /* primary dark surface */ --navy-950: #06122E; /* ---- Orange (iconography accent — duotone line icons) ---- */ --orange-50: #FEF3EA; --orange-100: #FCE2CC; --orange-400: #F8923D; --orange-500: #F47C20; /* accent */ --orange-600: #E1690F; /* ---- Slate neutrals ---- */ --slate-50: #F5F7FB; --slate-100: #EEF1F7; --slate-200: #E0E5EF; --slate-300: #C7D0DF; --slate-400: #97A2B6; --slate-500: #6B768C; --slate-600: #4C566B; --slate-700: #353E51; --slate-800: #232B3B; --slate-900: #121826; --white: #FFFFFF; /* ---- Semantic hues ---- */ --amber-100: #FCEFCB; --amber-500: #E0930C; --amber-600: #C07C06; --red-100: #FCDEDE; --red-500: #E2433B; --red-600: #C5302A; /* ============================================================ Semantic aliases — prefer these in components & layouts ============================================================ */ --brand-primary: var(--blue-600); --brand-primary-hover: var(--blue-700); --brand-primary-active: var(--blue-800); --brand-primary-soft: var(--blue-50); --brand-cta: var(--green-500); /* the main green action button */ --brand-cta-hover: var(--green-600); --brand-cta-soft: var(--green-50); --brand-accent: var(--orange-500); /* iconography only */ --brand-accent-soft: var(--orange-50); --bg-page: var(--white); --bg-subtle: var(--slate-50); --surface-card: var(--white); --surface-muted: var(--slate-100); --surface-feature:var(--slate-50); /* light feature card fill */ --surface-tint: #EAF1FB; /* light blue section band */ --surface-inverse:var(--navy-900); --surface-inverse-2: var(--navy-800); --text-strong: var(--navy-900); --text-body: var(--slate-600); --text-muted: var(--slate-500); --text-faint: var(--slate-400); --text-inverse: var(--white); --text-inverse-muted: #9FB0D0; --text-link: var(--blue-600); --text-on-brand:var(--white); --border-subtle: var(--slate-200); --border-default: var(--slate-300); --border-strong: var(--slate-400); --border-inverse: rgba(255,255,255,0.12); --ring-focus: rgba(37,99,235,0.32); --success: var(--green-500); --success-soft: var(--green-100); --warning: var(--amber-500); --warning-soft: var(--amber-100); --danger: var(--red-500); --danger-soft: var(--red-100); } /* ===================== typography.css ===================== */ /* ============================================================ ArtBackup — Typography tokens Display: Space Grotesk · Body/UI: Plus Jakarta Sans · Mono: IBM Plex Mono ============================================================ */ :root { --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — 1.25 major-third-ish, tuned for marketing + app UI */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base:1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 2.875rem; /* 46px */ --text-4xl: 3.75rem; /* 60px */ --text-5xl: 4.75rem; /* 76px */ /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-extra: 800; /* Line heights */ --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal:1.5; --leading-relaxed:1.65; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-snug: -0.012em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.08em; /* eyebrows / overlines */ /* Semantic roles */ --display-font: var(--font-display); --display-weight: var(--weight-bold); --heading-font: var(--font-display); --body-font: var(--font-sans); } /* ===================== spacing.css ===================== */ /* ============================================================ ArtBackup — Spacing & layout tokens (4px base grid) ============================================================ */ :root { --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* Layout */ --container-max: 1200px; --container-wide: 1320px; --gutter: var(--space-6); --section-y: var(--space-24); } /* ===================== effects.css ===================== */ /* ============================================================ ArtBackup — Radii, shadows, borders, motion Soft but precise: medium radii, cool-tinted shadows that read as "lifted glass", no heavy drop shadows. ============================================================ */ :root { /* Corner radii */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 32px; --radius-pill: 999px; /* Shadows — cool navy tint, never pure black */ --shadow-xs: 0 1px 2px rgba(14, 28, 68, 0.06); --shadow-sm: 0 2px 6px rgba(14, 28, 68, 0.07), 0 1px 2px rgba(14, 28, 68, 0.05); --shadow-md: 0 8px 20px -6px rgba(14, 28, 68, 0.12), 0 2px 6px rgba(14, 28, 68, 0.06); --shadow-lg: 0 20px 40px -12px rgba(14, 28, 68, 0.18), 0 4px 12px rgba(14, 28, 68, 0.08); --shadow-xl: 0 32px 64px -16px rgba(9, 18, 48, 0.28); --shadow-brand: 0 10px 22px -8px rgba(37, 99, 235, 0.40); --shadow-cta: 0 10px 22px -8px rgba(23, 163, 74, 0.42); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6); /* Borders */ --border-width: 1px; --border-card: 1px solid var(--border-subtle); /* Focus ring */ --focus-ring: 0 0 0 3px var(--ring-focus); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ /* Signature gradients (used sparingly — brand is mostly flat) */ --gradient-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 100%); --gradient-ink: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-950) 100%); --gradient-soft: linear-gradient(180deg, var(--white) 0%, var(--slate-50) 100%); } /* ===================== base.css ===================== */ /* ============================================================ ArtBackup — Base element defaults (lightweight, opt-in) Consumers get sensible typographic defaults; structural-only. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--body-font); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--heading-font); color: var(--text-strong); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 0.4em; font-weight: var(--weight-bold); } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--text-link); text-decoration: none; } a:hover { text-decoration: underline; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } ::selection { background: var(--blue-200); color: var(--navy-900); }