/* * FormVault Design Tokens * ──────────────────────────────────────────────────────────────────────────── * These custom properties cascade down into every component file. * Blocksy Pro palette is mapped to FormVault semantics in the body block so * changes to Blocksy's palette are automatically inherited. * * Usage: import this file first, then component stylesheets. * Load: enqueued by class-assets.php as 'formvault-tokens' */ /* ── Light mode (default) ───────────────────────────────────────────────── */ :root { /* SURFACE ---------------------------------------------------------------- */ --fv-page: #FAFAFA; --fv-surface: #FFFFFF; --fv-surface-sunken: #F1F5F9; --fv-overlay: rgba(15, 23, 42, 0.48); /* INK -------------------------------------------------------------------- */ --fv-ink-950: #0F172A; --fv-ink-700: #334155; --fv-ink-500: #64748B; --fv-ink-300: #94A3B8; --fv-ink-100: #E2E8F0; --fv-ink-050: #F8FAFC; /* PRIMARY — Confident Blue ----------------------------------------------- */ --fv-blue-600: #2563EB; --fv-blue-700: #1D4ED8; --fv-blue-800: #1E40AF; --fv-blue-100: #DBEAFE; --fv-blue-050: #EFF6FF; --fv-primary: var(--fv-blue-600); --fv-primary-hover: var(--fv-blue-700); --fv-primary-active: var(--fv-blue-800); --fv-primary-subtle: var(--fv-blue-050); --fv-primary-muted: var(--fv-blue-100); /* SUCCESS — Download Green ------------------------------------------------ */ --fv-green-600: #16A34A; --fv-green-700: #15803D; --fv-green-100: #DCFCE7; --fv-green-050: #F0FDF4; --fv-success: var(--fv-green-600); --fv-success-hover: var(--fv-green-700); --fv-success-subtle: var(--fv-green-050); --fv-success-muted: var(--fv-green-100); /* PREMIUM — Warm Amber --------------------------------------------------- */ --fv-amber-600: #D97706; --fv-amber-700: #B45309; --fv-amber-100: #FDE68A; --fv-amber-050: #FFFBEB; --fv-premium: var(--fv-amber-600); --fv-premium-hover: var(--fv-amber-700); --fv-premium-subtle: var(--fv-amber-050); --fv-premium-muted: var(--fv-amber-100); /* FILE-TYPE BADGE COLORS ------------------------------------------------- */ --fv-badge-pdf-bg: #FEE2E2; --fv-badge-pdf-fg: #B91C1C; --fv-badge-doc-bg: #DBEAFE; --fv-badge-doc-fg: #1D4ED8; --fv-badge-docx-bg: #DBEAFE; --fv-badge-docx-fg: #1D4ED8; --fv-badge-xls-bg: #DCFCE7; --fv-badge-xls-fg: #15803D; --fv-badge-xlsx-bg: #DCFCE7; --fv-badge-xlsx-fg: #15803D; --fv-badge-ppt-bg: #FFEDD5; --fv-badge-ppt-fg: #C2410C; --fv-badge-pptx-bg: #FFEDD5; --fv-badge-pptx-fg: #C2410C; --fv-badge-zip-bg: #F1F5F9; --fv-badge-zip-fg: #475569; /* TYPOGRAPHY ------------------------------------------------------------- */ --fv-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --fv-font-body: 'Inter', system-ui, sans-serif; --fv-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --fv-text-xs: 0.75rem; /* 12 px */ --fv-text-sm: 0.875rem; /* 14 px */ --fv-text-base: 1rem; /* 16 px */ --fv-text-lg: 1.125rem; /* 18 px */ --fv-text-xl: 1.25rem; /* 20 px */ --fv-text-2xl: 1.5rem; /* 24 px */ --fv-text-3xl: 1.875rem; /* 30 px */ --fv-text-4xl: 2.25rem; /* 36 px */ --fv-text-5xl: 3rem; /* 48 px */ --fv-lh-tight: 1.2; --fv-lh-snug: 1.35; --fv-lh-normal: 1.5; --fv-lh-relaxed: 1.65; --fv-weight-normal: 400; --fv-weight-medium: 500; --fv-weight-semibold: 600; --fv-weight-bold: 700; /* SPACING (4-pt grid) ---------------------------------------------------- */ --fv-sp-1: 0.25rem; /* 4 px */ --fv-sp-2: 0.5rem; /* 8 px */ --fv-sp-3: 0.75rem; /* 12 px */ --fv-sp-4: 1rem; /* 16 px */ --fv-sp-5: 1.25rem; /* 20 px */ --fv-sp-6: 1.5rem; /* 24 px */ --fv-sp-8: 2rem; /* 32 px */ --fv-sp-10: 2.5rem; /* 40 px */ --fv-sp-12: 3rem; /* 48 px */ --fv-sp-16: 4rem; /* 64 px */ --fv-sp-20: 5rem; /* 80 px */ --fv-sp-24: 6rem; /* 96 px */ /* RADIUS ----------------------------------------------------------------- */ --fv-radius-sm: 6px; --fv-radius-md: 10px; --fv-radius-lg: 16px; --fv-radius-xl: 24px; --fv-radius-full: 9999px; /* SHADOWS ---------------------------------------------------------------- */ --fv-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --fv-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03); --fv-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --fv-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05); --fv-shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.07); /* Colored glows for primary/success CTA hover */ --fv-shadow-blue: 0 4px 14px rgba(37, 99, 235, 0.30); --fv-shadow-green: 0 4px 14px rgba(22, 163, 74, 0.30); --fv-shadow-amber: 0 4px 14px rgba(217,119, 6, 0.30); /* TRANSITIONS ------------------------------------------------------------ */ --fv-ease: cubic-bezier(0.25, 0.1, 0.25, 1.0); --fv-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0); --fv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --fv-t-fast: 120ms; --fv-t-base: 180ms; --fv-t-slow: 280ms; /* LAYOUT ----------------------------------------------------------------- */ --fv-container: 1280px; --fv-container-text: 768px; --fv-header-h: 60px; --fv-sidebar-w: 260px; --fv-gutter: clamp(1rem, 4vw, 2rem); /* Z-INDEX STACK ---------------------------------------------------------- */ --fv-z-base: 1; --fv-z-dropdown: 100; --fv-z-sticky: 200; --fv-z-overlay: 300; --fv-z-modal: 400; --fv-z-toast: 500; } /* ── Dark mode ──────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --fv-page: #0B1120; --fv-surface: #141E2E; --fv-surface-sunken: #0F172A; --fv-overlay: rgba(0, 0, 0, 0.65); --fv-ink-950: #F1F5F9; --fv-ink-700: #CBD5E1; --fv-ink-500: #94A3B8; --fv-ink-300: #475569; --fv-ink-100: #1E293B; --fv-ink-050: #1A2637; --fv-primary: #60A5FA; --fv-primary-hover: #93C5FD; --fv-primary-active: #BFDBFE; --fv-primary-subtle: #1E3A5F; --fv-primary-muted: #1E3A8A; --fv-success: #4ADE80; --fv-success-hover: #86EFAC; --fv-success-subtle: #14532D; --fv-success-muted: #166534; --fv-premium: #FCD34D; --fv-premium-hover: #FDE68A; --fv-premium-subtle: #451A03; --fv-premium-muted: #78350F; --fv-badge-pdf-bg: #3B1414; --fv-badge-pdf-fg: #FCA5A5; --fv-badge-doc-bg: #1E2F5F; --fv-badge-doc-fg: #93C5FD; --fv-badge-docx-bg: #1E2F5F; --fv-badge-docx-fg: #93C5FD; --fv-badge-xls-bg: #14352B; --fv-badge-xls-fg: #86EFAC; --fv-badge-xlsx-bg: #14352B; --fv-badge-xlsx-fg: #86EFAC; --fv-badge-ppt-bg: #3B1E0C; --fv-badge-ppt-fg: #FDBA74; --fv-badge-pptx-bg: #3B1E0C; --fv-badge-pptx-fg: #FDBA74; --fv-badge-zip-bg: #1E293B; --fv-badge-zip-fg: #94A3B8; --fv-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --fv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.20); --fv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25); --fv-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.30); --fv-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35); } } /* Explicit class-toggle (JS dark-mode override) */ [data-fv-theme="dark"] { color-scheme: dark; } [data-fv-theme="light"] { color-scheme: light; }