/* ============================================================ FIGUS 2026 — DESIGN TOKENS (v3) Aligned with FIGUS Design System — approved brand identity Light mode · papel verde-neutro · acento dorado trofeo ============================================================ */ :root { /* ── DS Brand Palette (canonical) ───────────────────────────── */ --figus-green-50: #EAF7EE; --figus-green-100: #D2EFDB; --figus-green-200: #A6DFB7; --figus-green-300: #6FCD90; --figus-green-400: #3CC25B; /* cell green */ --figus-green-500: #1FA245; --figus-green-600: #1A8C3C; /* inner panel */ --figus-green-700: #126D2E; --figus-green-800: #0E5C2D; /* sticker outer */ --figus-green-900: #0B4520; /* dark UI */ --figus-green-950: #072F17; --figus-yellow-50: #FFF8E1; --figus-yellow-100: #FDEDB5; --figus-yellow-200: #FCDC7C; --figus-yellow-300: #FACA47; --figus-yellow-400: #F4B324; /* main accent — checkmark gold */ --figus-yellow-500: #DA9A0F; --figus-yellow-600: #B57E0A; --figus-yellow-700: #8B5F07; --figus-stone-50: #FAFBF9; --figus-stone-100: #F1F3EF; --figus-stone-200: #E3E7E1; --figus-stone-300: #C8CFC5; --figus-stone-400: #9BA59A; --figus-stone-500: #6B776A; --figus-stone-600: #4D584C; --figus-stone-700: #354033; --figus-stone-800: #1E261D; --figus-stone-900: #122014; --figus-paper: #F4F6F2; /* ── DS Semantic aliases ─────────────────────────────────────── */ --color-bg: var(--figus-paper); --color-surface: #FFFFFF; --color-surface-alt: var(--figus-stone-50); --color-surface-sunk: var(--figus-stone-100); --color-border: var(--figus-stone-200); --color-border-strong:var(--figus-stone-300); --color-text: var(--figus-stone-900); --color-text-soft: var(--figus-stone-700); --color-text-muted: var(--figus-stone-500); --color-text-inverse: #FFFFFF; --color-accent: var(--figus-green-800); --color-accent-hover: var(--figus-green-700); --color-highlight: var(--figus-yellow-400); --color-focus-ring: color-mix(in oklab, var(--figus-green-500) 50%, transparent); --color-danger: #C8331E; --color-danger-bg: #FCEBE6; --color-info: #2C7BB2; --color-info-bg: #E5F0F8; /* ── Legacy tokens (app.css compatibility) ──────────────────── */ /* Paper / surface */ --paper: var(--figus-paper); --paper-2: var(--figus-stone-100); --paper-3: var(--figus-stone-200); --card: var(--color-surface); --card-2: var(--figus-stone-50); --ink-line: var(--figus-stone-200); /* Brand greens — updated to DS canonical values */ --field-1: var(--figus-green-800); /* was #0a5c1e */ --field-2: var(--figus-green-600); /* was #1a8a36 */ --field-3: var(--figus-green-400); /* was #16a34a */ --field-glow: rgba(60, 194, 91, 0.30); /* Gold accent — updated to DS canonical values */ --gold-1: var(--figus-yellow-400); /* was #fbbf24 */ --gold-2: var(--figus-yellow-500); /* was #f59e0b */ --gold-3: var(--figus-yellow-600); /* was #d97706 */ --gold-glow: rgba(244, 179, 36, 0.35); /* Status */ --red: #C8331E; --red-soft: #FCEBE6; --blue: #2C7BB2; --blue-soft:#E5F0F8; --info: #2C7BB2; /* Ink / text */ --ink: var(--figus-stone-900); --ink-2: var(--figus-stone-800); --ink-3: var(--figus-stone-600); --ink-4: var(--figus-stone-400); --ink-5: var(--figus-stone-300); --ink-on-color: #FFFFFF; /* text on dark/colored surfaces */ --ink-on-gold: #3a2402; /* dark brown text on gold/warm surfaces */ --ink-on-gold-deep: #2a1a00; /* deeper brown on richest gold */ --amber-warn: #92400e; /* sobre duplicate state — amber-800 */ /* ── Typography ─────────────────────────────────────────────── */ /* Nunito is the DS signature font; Bricolage Grotesque for display heads */ --font-display: "Bricolage Grotesque", "Nunito", "Archivo Black", system-ui, sans-serif; --font-body: "Nunito", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --fs-xs: 0.6875rem; /* 11px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 1rem; /* 16px — accessibility floor */ --fs-md: 1.125rem; /* 18px — 1.125× base */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.625rem; /* 26px — 1.3× lg */ --fs-2xl: 2.25rem; /* 36px — 1.38× xl */ --fs-3xl: 3rem; /* 48px — 1.33× 2xl */ --fs-hero: 4rem; /* 64px — 1.33× 3xl */ --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-wide: 0.12em; /* ── Line heights ────────────────────────────────────────────── */ --lh-tight: 1.08; --lh-snug: 1.25; --lh-base: 1.5; --lh-relaxed: 1.65; /* ── Spacing (4px base) ──────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; /* ── Radii ──────────────────────────────────────────────────── */ --r-chip: 10px; --r-pill: 999px; --r-control: 12px; --r-card: 20px; --r-panel: 24px; /* ── Shadows — green-tinted (DS-aligned) ────────────────────── */ --shadow-1: 0 1px 2px rgba(11, 69, 32, 0.06), 0 1px 1px rgba(11, 69, 32, 0.04); --shadow-2: 0 1px 4px rgba(11, 69, 32, 0.07), 0 1px 2px rgba(11, 69, 32, 0.04); --shadow-3: 0 6px 14px -4px rgba(11, 69, 32, 0.12), 0 2px 4px rgba(11, 69, 32, 0.05); --shadow-4: 0 12px 28px -8px rgba(11, 69, 32, 0.18), 0 4px 8px rgba(11, 69, 32, 0.06); --shadow-5: 0 24px 48px -12px rgba(11, 69, 32, 0.22), 0 8px 16px rgba(11, 69, 32, 0.08); --shadow-have: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 6px -1px rgba(60, 194, 91, 0.40), 0 1px 2px rgba(60, 194, 91, 0.18); --shadow-double: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px -1px rgba(244, 179, 36, 0.45), 0 1px 2px rgba(244, 179, 36, 0.22); --shadow-trophy: 0 0 0 4px rgba(244, 179, 36, 0.18), 0 8px 24px -6px rgba(244, 179, 36, 0.45); /* ── Motion ─────────────────────────────────────────────────── */ --t-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 260ms cubic-bezier(0.22, 1, 0.36, 1); --t-slow: 520ms cubic-bezier(0.22, 1, 0.36, 1); --t-spring: 380ms cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo — was overshoot */ --t-bounce: 520ms cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint — was bounce */ --tc-default: var(--field-2); /* ── Layout ─────────────────────────────────────────────────── */ --header-h: 72px; --content-max: 1240px; } @media (min-width: 720px) { :root { --fs-2xl: 2.625rem; /* 42px */ --fs-3xl: 3.5rem; /* 56px */ --header-h: 88px; } }