/* ==========================================================================
Encaixa Design Tokens
==========================================================================
Centralized CSS custom properties for the Encaixa SaaS design system.
Every page should import this file first to guarantee token consistency.
Import order (must be respected):
1. tokens.css ← this file (custom properties only)
2. base.css ← reset + global typography + utilities
3. components.css← reusable UI components
Usage in HTML:
Token categories:
- Colors (brand, secondary, accent, neutrals, states)
- Typography (font families, sizes, weights, line heights)
- Spacing (8px-based scale in rem)
- Border radius
- Shadows / elevation
- Transitions
- Z-index layers
- Layout containers
- Semantic aliases (component-ready variables)
Quick reference — how to use a token:
color: var(--color-brand-600);
padding: var(--space-lg);
border-radius: var(--radius-md);
font-size: var(--text-body-size);
transition: all var(--transition-base);
========================================================================== */
:root {
/* ------------------------------------------------------------------
COLOR PALETTE
------------------------------------------------------------------
All scales follow Tailwind-style 50→900 progression where
50 = lightest tint and 900 = darkest shade.
Use 50/100 for backgrounds, 500 for primary, 600/700 for hover.
------------------------------------------------------------------ */
/* Brand — WhatsApp-aligned green palette.
Base hues derived from WhatsApp's identity (#25D366 / #075E54)
while providing a full 10-step scale for flexibility. */
--color-brand-50: #eafaf1; /* very light mint bg */
--color-brand-100: #d0f0db; /* light bg / badge bg */
--color-brand-200: #a8e4b8; /* subtle highlight */
--color-brand-300: #6fd88a; /* medium-light accent */
--color-brand-400: #3cc963; /* bright interactive */
--color-brand-500: #25c357; /* ★ primary brand (WhatsApp green anchor) */
--color-brand-600: #1da84d; /* default button / links */
--color-brand-700: #168a40; /* hover state */
--color-brand-800: #0f6b31; /* active / pressed */
--color-brand-900: #084a20; /* deep text / borders */
/* Secondary — deep blue/indigo for contrast & trust elements.
Use for informational accents that must not compete with brand. */
--color-secondary-50: #eef2ff;
--color-secondary-100: #dde4fe;
--color-secondary-200: #bbcaff;
--color-secondary-300: #8fa4fd;
--color-secondary-400: #637df9;
--color-secondary-500: #4763eb;
--color-secondary-600: #3b52d4;
--color-secondary-700: #3144b8;
--color-secondary-800: #28379a;
--color-secondary-900: #1e286e;
/* Accent — warm amber for CTAs, highlights, and attention-grabbing elements.
Use sparingly alongside the brand green to create visual hierarchy. */
--color-accent-50: #fff8ed;
--color-accent-100: #ffedd0;
--color-accent-200: #ffd999;
--color-accent-300: #ffc25c;
--color-accent-400: #ffab24;
--color-accent-500: #f59400; /* ★ primary accent */
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #923d0a;
--color-accent-900: #702c0e;
/* Neutral grays — cool-toned, modern slate palette.
Use for text, backgrounds, borders, and disabled states.
50/100 = surfaces, 400/500 = secondary text, 900 = headings. */
--color-gray-50: #f8fafc;
--color-gray-100: #f1f5f9;
--color-gray-200: #e2e8f0;
--color-gray-300: #cbd5e1;
--color-gray-400: #94a3b8;
--color-gray-500: #64748b;
--color-gray-600: #475569;
--color-gray-700: #334155;
--color-gray-800: #1e293b;
--color-gray-900: #0f172a;
/* Semantic / state colors — success, error, warning, info.
Each provides a full 50→900 scale. Use 50/100 for backgrounds,
600/700 for text/icons, matching the semantic meaning. */
--color-success-50: #ecfdf5;
--color-success-100: #d1fae5;
--color-success-200: #a7f3d0;
--color-success-300: #6ee7b7;
--color-success-400: #34d399;
--color-success-500: #10b981;
--color-success-600: #059669;
--color-success-700: #047857;
--color-success-800: #065f46;
--color-success-900: #064e3b;
--color-error-50: #fef2f2;
--color-error-100: #fee2e2;
--color-error-200: #fecaca;
--color-error-300: #fca5a5;
--color-error-400: #f87171;
--color-error-500: #ef4444;
--color-error-600: #dc2626;
--color-error-700: #b91c1c;
--color-error-800: #991b1b;
--color-error-900: #7f1d1d;
--color-warning-50: #fffbeb;
--color-warning-100: #fef3c7;
--color-warning-200: #fde68a;
--color-warning-300: #fcd34d;
--color-warning-400: #fbbf24;
--color-warning-500: #f59e0b;
--color-warning-600: #d97706;
--color-warning-700: #b45309;
--color-warning-800: #92400e;
--color-warning-900: #78350f;
--color-info-50: #eff8ff;
--color-info-100: #dbeafe;
--color-info-200: #bfdbfe;
--color-info-300: #93c5fd;
--color-info-400: #60a5fa;
--color-info-500: #3b82f6;
--color-info-600: #2563eb;
--color-info-700: #1d4ed8;
--color-info-800: #1e40af;
--color-info-900: #1e3a8a;
/* ------------------------------------------------------------------
TYPOGRAPHY
------------------------------------------------------------------
Modern sans-serif stack: Plus Jakarta Sans (loaded via Google Fonts)
with system fallbacks. JetBrains Mono for code blocks.
Line heights are consistent per size tier:
Headings → ~1.2–1.35 (tighter for readability at large sizes)
Body → 1.5–1.7 (comfortable reading)
Caption → 1.3–1.4 (compact but legible)
------------------------------------------------------------------ */
/* Font families — add your own here if you swap fonts later. */
--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas,
'Liberation Mono', Menlo, monospace;
/* Font weights — named for semantic clarity. */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Heading sizes — H1 (page title) → H6 (subtle section label).
Each includes size, line-height, weight, and letter-spacing. */
--text-h1-size: 2.5rem; /* 40px */
--text-h1-line-height: 1.2;
--text-h1-weight: var(--font-weight-extrabold);
--text-h1-letter-spacing: -0.02em;
--text-h2-size: 2rem; /* 32px */
--text-h2-line-height: 1.25;
--text-h2-weight: var(--font-weight-bold);
--text-h2-letter-spacing: -0.01em;
--text-h3-size: 1.5rem; /* 24px */
--text-h3-line-height: 1.3;
--text-h3-weight: var(--font-weight-bold);
--text-h3-letter-spacing: 0;
--text-h4-size: 1.25rem; /* 20px */
--text-h4-line-height: 1.35;
--text-h4-weight: var(--font-weight-semibold);
--text-h4-letter-spacing: 0;
--text-h5-size: 1.125rem; /* 18px */
--text-h5-line-height: 1.4;
--text-h5-weight: var(--font-weight-semibold);
--text-h5-letter-spacing: 0;
--text-h6-size: 1rem; /* 16px */
--text-h6-line-height: 1.4;
--text-h6-weight: var(--font-weight-semibold);
--text-h6-letter-spacing: 0;
/* Body text — comfortable reading sizes. */
--text-body-lg-size: 1.125rem; /* 18px — hero subtitles, lead paragraphs */
--text-body-lg-lh: 1.7;
--text-body-size: 1rem; /* 16px — default body */
--text-body-lh: 1.6;
--text-body-sm-size: 0.875rem; /* 14px — form labels, hints */
--text-body-sm-lh: 1.5;
/* Captions & small text — metadata, timestamps, footnotes. */
--text-caption-size: 0.75rem; /* 12px */
--text-caption-lh: 1.4;
--text-xs-size: 0.6875rem; /* 11px — micro-labels */
--text-xs-lh: 1.3;
/* Link style — inherit from brand for consistency. */
--text-link-color: var(--color-brand-600);
--text-link-hover: var(--color-brand-700);
/* ------------------------------------------------------------------
SPACING SCALE (8px base → rem)
------------------------------------------------------------------
All values are multiples of 4px (0.25rem), creating a consistent
rhythm across layouts. Use these everywhere instead of hardcoded
pixel/rem values.
Scale mapping:
3xs = 2px | ultra-tight (icon gaps)
2xs = 4px | tight (inline element spacing)
xs = 6px | compact (form inner gaps)
sm = 8px | standard small
md = 12px | standard medium
base= 16px | standard base
lg = 20px | relaxed
xl = 24px | section gaps
2xl = 32px | component outer gaps
3xl = 40px | section margins
4xl = 48px | large separations
5xl = 64px | hero spacing
6xl = 80px | page-level
7xl = 96px | major sections
8xl = 128px | extreme separation
------------------------------------------------------------------ */
--space-3xs: 0.125rem; /* 2px — icon gaps, tight inline */
--space-2xs: 0.25rem; /* 4px — tight spacing */
--space-xs: 0.375rem; /* 6px — compact */
--space-sm: 0.5rem; /* 8px — standard small */
--space-md: 0.75rem; /* 12px — standard medium */
--space-base: 1rem; /* 16px — standard base */
--space-lg: 1.25rem; /* 20px — relaxed */
--space-xl: 1.5rem; /* 24px — section gaps */
--space-2xl: 2rem; /* 32px — component outer gaps */
--space-3xl: 2.5rem; /* 40px — section margins */
--space-4xl: 3rem; /* 48px — large separations */
--space-5xl: 4rem; /* 64px — hero spacing */
--space-6xl: 5rem; /* 80px — page-level */
--space-7xl: 6rem; /* 96px — major sections */
--space-8xl: 8rem; /* 128px — extreme separation */
/* ------------------------------------------------------------------
BORDER RADIUS
------------------------------------------------------------------
Use for buttons, cards, inputs, badges, and any rounded element.
Smaller radii (sm/md) for dense UI; larger (lg/xl) for cards.
Use full for pills/badges.
------------------------------------------------------------------ */
--radius-none: 0; /* sharp corners */
--radius-sm: 0.25rem; /* 4px — tight inputs, tags */
--radius-md: 0.5rem; /* 8px — standard inputs */
--radius-base: 0.75rem; /* 12px — buttons, dropdowns */
--radius-lg: 1rem; /* 16px — elevated cards */
--radius-xl: 1.25rem; /* 20px — feature cards */
--radius-2xl: 1.5rem; /* 24px — modal-like surfaces */
--radius-full: 9999px; /* pill / avatar shape */
/* ------------------------------------------------------------------
SHADOWS / ELEVATION
------------------------------------------------------------------
Shadow scale follows Material-inspired elevation levels.
Use sm for subtle depth, base for card elevation, lg+ for modals.
Colored shadows (--shadow-brand, --shadow-accent) add a subtle
hue tint on interactive hover/focus states.
------------------------------------------------------------------ */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07),
0 2px 4px -2px rgba(15, 23, 42, 0.06);
--shadow-base: 0 10px 15px -3px rgba(15, 23, 42, 0.08),
0 4px 6px -4px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1),
0 8px 10px -6px rgba(15, 23, 42, 0.06);
--shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
/* Colored shadows for interactive elements (hover/focus glow). */
--shadow-brand: 0 4px 14px rgba(14, 169, 139, 0.25);
--shadow-accent: 0 4px 14px rgba(245, 148, 0, 0.30);
/* ------------------------------------------------------------------
TRANSITIONS
------------------------------------------------------------------
Standard timing functions ensure smooth, performant animations.
Use will-change sparingly; hardware-accelerated properties only
(transform, opacity, box-shadow). Avoid animating layout props.
Timing guide:
fast (150ms) — hover states, micro-interactions
base (250ms) — card lifts, panel reveals
slow (350ms) — page transitions, complex reveals
spring (400ms) — playful bounce effects
------------------------------------------------------------------ */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 350ms ease;
--transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* Properties commonly animated together. */
--transition-property-default: color, background-color, border-color,
box-shadow, transform, opacity;
/* ------------------------------------------------------------------
LAYOUT
------------------------------------------------------------------
Container max-widths for responsive breakpoints.
Section padding uses spacing tokens for vertical rhythm.
------------------------------------------------------------------ */
/* Container max widths — match common grid breakpoints. */
--container-sm: 640px; /* narrow content */
--container-md: 768px; /* tablet */
--container-base: 1024px; /* desktop default */
--container-lg: 1200px; /* wide desktop */
--container-xl: 1400px; /* extra-wide */
/* Section padding — applied by .section utility class. */
--section-padding-y: var(--space-7xl); /* 96px vertical */
--section-padding-x: var(--space-base); /* 16px horizontal */
/* ------------------------------------------------------------------
Z-INDEX LAYERS
------------------------------------------------------------------
Ordered stacking context names. Never use raw numbers outside
these tokens — always reference the named variable.
------------------------------------------------------------------ */
--z-dropdown: 100; /* menus, popovers */
--z-sticky: 200; /* sticky navbars */
--z-overlay: 300; /* modals backdrops, drawers */
--z-modal: 400; /* modal dialogs */
--z-toast: 500; /* toast notifications */
--z-tooltip: 600; /* tooltips */
/* ------------------------------------------------------------------
DARK MODE (light override via media query or data attribute)
------------------------------------------------------------------
Light mode is the default. These variables are set for light mode
and overridden inside the prefers-color-scheme: dark block below.
Components should reference these semantic names, not raw colors.
------------------------------------------------------------------ */
--bg-primary: #ffffff;
--bg-secondary: var(--color-gray-50);
--bg-elevated: #ffffff;
--bg-muted: var(--color-gray-100);
--text-primary: var(--color-gray-900);
--text-secondary: var(--color-gray-600);
--text-muted: var(--color-gray-400);
--text-inverse: #ffffff;
--border-color: var(--color-gray-200);
--border-strong: var(--color-gray-300);
}
/* Dark mode overrides — automatically applies when user's OS prefers dark. */
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: var(--color-gray-900);
--bg-secondary: var(--color-gray-800);
--bg-elevated: var(--color-gray-800);
--bg-muted: var(--color-gray-700);
--text-primary: var(--color-gray-50);
--text-secondary: var(--color-gray-300);
--text-muted: var(--color-gray-500);
--text-inverse: var(--color-gray-900);
--border-color: var(--color-gray-700);
--border-strong: var(--color-gray-600);
}
}
/* --------------------------------------------------------------------------
SEMANTIC ALIASES — Component-ready variables
--------------------------------------------------------------------------
These map raw tokens to semantic names used directly by UI components.
They provide an abstraction layer so components don't need to know about
the underlying color scale or spacing value. If you change a raw token,
update its alias here rather than hunting through component files.
How to use:
.btn-primary { background: var(--btn-primary-bg); }
.card { background: var(--bg-card); }
.form-input { border-color: var(--input-border); }
-------------------------------------------------------------------------- */
:root {
/* Page & surface backgrounds */
--bg-page: var(--bg-primary);
--bg-card: var(--bg-elevated);
--bg-input: var(--bg-elevated);
--bg-badge: var(--bg-muted);
/* Text roles */
--text-heading: var(--text-primary);
--text-body: var(--text-secondary);
--text-label: var(--text-secondary);
--text-placeholder: var(--text-muted);
/* Primary button — filled CTA */
--btn-primary-bg: var(--color-brand-600);
--btn-primary-fg: #ffffff;
--btn-primary-hover-bg: var(--color-brand-700);
--btn-primary-border: transparent;
/* Secondary button — outlined / ghost style */
--btn-secondary-bg: transparent;
--btn-secondary-fg: var(--color-brand-600);
--btn-secondary-hover-bg: var(--color-brand-50);
--btn-secondary-border: var(--color-brand-600);
/* Accent button — warm highlight CTA */
--btn-accent-bg: var(--color-accent-500);
--btn-accent-fg: #ffffff;
--btn-accent-hover-bg: var(--color-accent-600);
/* Focus ring — accessibility outline */
--focus-ring-color: var(--color-brand-400);
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--focus-ring-style: solid;
/* Input defaults */
--input-border: var(--border-color);
--input-border-focus: var(--color-brand-500);
--input-radius: var(--radius-md);
--input-padding-y: var(--space-sm);
--input-padding-x: var(--space-md);
}