/* ============================================================ WapiGrow — tokens.css (Single Source of Truth — UI/UX Pro Max v2.0) Design System: Plus Jakarta Sans, wg- tokens, consolidated colors ============================================================ */ @layer tokens { :root { /* ── Brand Colors ── */ --color-primary: #2563EB; /* Design System Primary Blue */ --color-primary-dark: #1D4ED8; --color-primary-soft: #E0F2FE; --color-primary-glow: rgba(37, 211, 102, 0.15); --color-green: #25D366; /* WapiGrow Green */ --color-green-dark: #128C7E; --color-green-light: #E9FBF0; --color-green-glow: rgba(37, 211, 102, 0.15); --color-green-50: #F0FDF4; --color-green-100: #DCFCE7; --color-green-200: #BBF7D0; --color-green-300: #86EFAC; --color-green-400: #4ADE80; --color-green-500: #22C55E; --color-green-600: #16A34A; --color-green-700: #15803D; --color-green-800: #166534; --color-green-900: #14532D; /* ── Navy / Dark ── */ --color-navy: #0F1923; --color-navy-mid: #1A3A2A; --color-navy-dark: #1A1A2E; --color-navy-mid2: #16213E; /* ── Neutrals ── */ --color-white: #FFFFFF; --color-off-white: #F8FAF9; --color-gray-50: #F7F8F7; --color-gray-100: #EAEEEA; --color-gray-200: #D4DAD4; --color-gray-300: #CBD5E1; --color-gray-400: #8FA48F; --color-gray-500: #6B7280; --color-gray-600: #4A5E4A; --color-gray-700: #374151; --color-gray-800: #1E2E1E; --color-gray-900: #1A1A2E; --color-ink-100: #F3F4F6; --color-ink-200: #E5E7EB; --color-ink-300: #D1D5DB; --color-ink-400: #9CA3AF; --color-ink-500: #6B7280; --color-ink-600: #4B5563; --color-ink-700: #374151; --color-ink-800: #1F2937; --color-ink-900: #0F1923; /* ── Semantic Color Aliases ── */ --color-accent: #FF3D00; /* CTA Orange - improved contrast */; --color-error: #DC2626; /* form validation / required-field red — matches the hardcoded #dc2626 already used inline for this exact purpose in several admin pages */ --color-text: var(--color-ink-900); --color-text-secondary: var(--color-ink-700); --color-text-muted: var(--color-ink-500); --color-text-inverse: var(--color-white); --color-border: var(--color-gray-300); --color-border-light: var(--color-gray-200); --color-bg: var(--color-white); --color-bg-soft: var(--color-off-white); --color-bg-muted: var(--color-gray-50); --color-bg-inverse: var(--color-navy-dark); /* ── Legacy Token Aliases (backward compat for PHP inline styles) ── */ --clr-green: var(--color-green); --clr-green-dk: var(--color-green-dark); --clr-green-50: var(--color-green-50); --clr-green-100: var(--color-green-100); --clr-green-200: var(--color-green-200); --clr-green-700: var(--color-green-700); --clr-green-800: var(--color-green-800); --clr-navy: var(--color-navy); --clr-navy-2: var(--color-navy-mid); --clr-white: var(--color-white); --clr-off-white: var(--color-off-white); --clr-border: var(--color-border); --ink-100: var(--color-ink-100); --ink-200: var(--color-ink-200); --ink-300: var(--color-ink-300); --ink-400: var(--color-ink-400); --ink-500: var(--color-ink-500); --ink-600: var(--color-ink-600); --ink-700: var(--color-ink-700); --ink-800: var(--color-ink-800); --ink-900: var(--color-ink-900); --white: var(--color-white); --off-white: var(--color-off-white); --border: var(--color-border); --green-50: var(--color-green-50); --green-100: var(--color-green-100); --green-200: var(--color-green-200); --green-400: var(--color-green-400); --green-500: var(--color-green-500); --green-600: var(--color-green-600); --green-800: var(--color-green-800); --primary: var(--color-primary); --primary-dark: var(--color-primary-dark); --text-muted: var(--color-text-muted); --bg-soft: var(--color-bg-soft); --font-display: var(--font-family); /* ── Typography ── */ --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.15; --line-height-snug: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --line-height-loose: 1.75; --letter-spacing-tight: -0.03em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; /* ── Spacing Scale ── */ --space-0: 0; --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-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Legacy spacing aliases */ --space-xs: var(--space-2); --space-sm: var(--space-4); --space-md: var(--space-6); --space-lg: var(--space-8); --space-xl: var(--space-12); --space-2xl: var(--space-16); /* ── Border Radius ── */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* Legacy radius aliases */ --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-xl); --r-full: var(--radius-full); /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.14), 0 12px 32px rgba(0, 0, 0, 0.08); --shadow-green: 0 8px 32px rgba(37, 211, 102, 0.25); --shadow-green-lg: 0 16px 48px rgba(37, 211, 102, 0.30); --shadow-green-xl: 0 24px 64px rgba(37, 211, 102, 0.35); /* Legacy shadow aliases */ --shadow-sm-legacy: var(--shadow-sm); --shadow-md-legacy: var(--shadow-md); --shadow-lg-legacy: var(--shadow-lg); /* ── Transitions ── */ --transition-fast: 150ms; --transition-base: 250ms; --transition-slow: 400ms; --transition-slower: 600ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* ── Container ── */ --container-max: 1200px; --container-narrow: 960px; --container-wide: 1280px; /* ── Icon System ── */ --icon-size-xs: 16px; --icon-size-sm: 20px; --icon-size-base: 22px; --icon-size-lg: 24px; --icon-size-xl: 28px; --icon-size-2xl: 32px; --icon-box-sm: 32px; --icon-box-base: 40px; --icon-box-lg: 48px; --icon-box-xl: 56px; --icon-box-2xl: 60px; /* ── Z-Index Scale ── */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; /* ── Breakpoints ── */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; } /* Dark Mode intentionally NOT implemented: a stray @media (prefers-color-scheme: dark) block here used to flip these text/bg tokens for OS/browser dark-mode users, but nothing else in the codebase (cards, alert boxes, chat bubbles, badges — hundreds of hardcoded light backgrounds across every page) was ever built with a matching dark counterpart. The result was text silently turning white while it sat on backgrounds that stayed light, making it unreadable for any dark-mode visitor, on every page, public and admin. Removed rather than completed, since building a real second theme for every component was never asked for — this keeps one consistent, correct light appearance for all visitors regardless of their OS setting. */ /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-slower: 0ms; } } }