/* ========================================================================== SecurApp Design System — Design Tokens (variables.css) Skiper UI-inspired / Apple + Linear aesthetics ========================================================================== */ /* -------------------------------------------------------------------------- 1. ROOT — Shared tokens (theme-agnostic) -------------------------------------------------------------------------- */ /* scroll-behavior handled via JS to avoid scroll-restoration bugs */ :root { /* --- Brand palette ---------------------------------------------------- */ --color-primary: #5170FF; --color-primary-hover: #3D5CE5; --color-primary-light: #5170ff1a; /* 10% opacity */ --color-primary-muted: #5170ff33; /* 20% opacity */ --color-secondary: #CE32FF; --color-secondary-hover: #b820e6; --color-secondary-light: #ce32ff1a; --color-secondary-muted: #ce32ff33; --color-accent: #FF3E89; --color-accent-hover: #e6306f; --color-accent-light: #ff3e891a; --color-accent-muted: #ff3e8933; /* --- Semantic colours ------------------------------------------------- */ --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #3b82f6; /* WhatsApp */ --color-whatsapp: #25D366; --color-whatsapp-hover: #1fb855; /* Gradient end — deeper vibrant blue */ --color-gradient-end: #3D5CE5; /* --- Typography — font families -------------------------------------- */ --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, monospace; /* --- Typography — weights -------------------------------------------- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-extrabold: 800; /* --- Typography — scale (fluid with clamp) --------------------------- */ --text-2xs: clamp(0.5625rem, 0.525rem + 0.15vw, 0.625rem); /* ~9-10px (device chrome, kbd) */ --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem); /* ~11-12px */ --text-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* ~12-14px */ --text-base: clamp(0.875rem, 0.825rem + 0.25vw, 1rem); /* ~14-16px */ --text-md: clamp(1rem, 0.925rem + 0.35vw, 1.125rem); /* ~16-18px */ --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* ~18-20px */ --text-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem); /* ~20-24px */ --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* ~24-32px */ --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); /* ~30-40px */ --text-4xl: clamp(2.25rem, 1.75rem + 2vw, 3rem); /* ~36-48px */ --text-5xl: clamp(2.75rem, 2rem + 3vw, 4rem); /* ~44-64px */ --text-hero: clamp(2rem, 1.25rem + 4vw, 5rem); /* ~35-80px */ /* --- Line heights ----------------------------------------------------- */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* --- Letter spacing --------------------------------------------------- */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* --- Spacing — 4px base with multipliers ----------------------------- */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; /* 1x base */ --space-1-5: 6px; --space-2: 8px; /* 2x */ --space-3: 12px; /* 3x */ --space-4: 16px; /* 4x */ --space-5: 20px; --space-6: 24px; /* 6x */ --space-8: 32px; /* 8x */ --space-10: 40px; --space-12: 48px; /* 12x */ --space-16: 64px; /* 16x */ --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- Border radii ----------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; /* --- Z-index scale ---------------------------------------------------- */ --z-behind: -1; --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-popover: 50; --z-toast: 60; --z-tooltip: 70; --z-max: 9999; /* --- Easing functions ------------------------------------------------- */ --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-out: cubic-bezier(0, 0.55, 0.45, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.34, 1.8, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-slide: cubic-bezier(0.32, 0.72, 0, 1); --ease-tooltip: cubic-bezier(0.16, 1, 0.3, 1); /* --- Transition durations --------------------------------------------- */ --duration-instant: 75ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-slowest: 800ms; /* --- Transition shorthands -------------------------------------------- */ --transition-fast: all var(--duration-fast) var(--ease-default); --transition-normal: all var(--duration-normal) var(--ease-default); --transition-slow: all var(--duration-slow) var(--ease-smooth); --transition-spring: all var(--duration-normal) var(--ease-spring); /* --- Container widths ------------------------------------------------- */ --container-max: 1280px; --container-wide: 1440px; --container-narrow: 720px; /* --- Liquid Glass — legacy (used by cards, hero device, other surfaces) -- */ --glass-blur: 40px; --glass-saturate: 200%; --glass-blur-soft: 12px; /* Cards, overlays — frosted sutil */ --glass-backdrop: blur(var(--glass-blur)) saturate(var(--glass-saturate)); --glass-backdrop-soft: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate)); /* --- Liquid Glass — iOS 26 reflex system (fooontic technique) ----------- */ /* Tint + light/dark colors for color-mix() multi-layer shadows */ --glass-color: #bbbbbc; --glass-light: #fff; --glass-dark: #000; --glass-reflex-light: 1; /* Multiplier: light inset highlights */ --glass-reflex-dark: 1; /* Multiplier: dark inset/outer shadows */ /* Computed backgrounds */ --glass-bg: color-mix(in srgb, var(--glass-color) 12%, transparent); --glass-bg-hover: color-mix(in srgb, var(--glass-color) 22%, transparent); --glass-bg-strong: color-mix(in srgb, var(--glass-color) 36%, transparent); /* 10-layer box-shadow: 4 light insets + 4 dark insets + 2 outer */ /* Adapts automatically via --glass-reflex-light / --glass-reflex-dark */ --glass-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 8%), transparent); /* --- Liquid Glass — interactive button tokens (swiper, dashboard, etc.) */ --glass-btn-bg: color-mix(in srgb, #3D5CE5 6%, transparent); --glass-btn-border: rgba(61, 92, 229, 0.15); --glass-btn-color: #3D5CE5; /* --- Device Mockups — MacBook (aluminium bezel) ----------------------- */ --device-bezel: #c8c8cc; --device-bezel-border: #d4d4d8; --device-bezel-accent: #b8b8bc; --device-bezel-cam: #a8a8ac; --device-base-top: #d4d4d8; --device-base-bottom: #c0c0c4; --device-base-indent: #b8b8bc; /* --- Device Mockups — Browser (traffic light dots) -------------------- */ --device-dot-close: #ff5f57; --device-dot-minimize: #febc2e; --device-dot-maximize: #28c840; /* --- Device Mockups — iPhone ------------------------------------------ */ --device-phone-frame: #1a1a1a; --device-phone-border: #2a2a2a; --device-phone-island: #1a1a1a; /* Dynamic Island */ --device-phone-button: #d4d4d8; /* Side buttons, power, home indicator */ --device-phone-frame-lt: #e8e8ec; /* Light mode frame override */ --device-phone-border-lt:#d4d4d8; /* Light mode border override */ /* --- Breakpoints (for reference — used in media queries) -------------- */ /* --bp-mobile: 639px (max-width) */ /* --bp-tablet: 640px (min-width) */ /* --bp-desktop: 1024px (min-width) */ /* --bp-wide: 1440px (min-width) */ } /* -------------------------------------------------------------------------- 2. LIGHT MODE (default) -------------------------------------------------------------------------- */ :root, [data-theme="light"] { /* --- Surface / Background — all white, fluid ------------------------- */ --bg-primary: #ffffff; --bg-secondary: #ffffff; --bg-tertiary: #ffffff; --bg-elevated: #ffffff; --bg-inset: #f8f8fa; /* --- Text ------------------------------------------------------------- */ --text-primary: #09090b; --text-secondary: #3f3f46; --text-tertiary: #71717a; --text-muted: #a1a1aa; --text-inverted: #fafafa; --text-on-primary: #ffffff; /* --- Borders ---------------------------------------------------------- */ --border-default: #e8e8ec; --border-subtle: #f0f0f2; --border-strong: #d4d4d8; --border-focus: var(--color-primary); /* --- Gradients -------------------------------------------------------- */ --gradient-primary: linear-gradient(135deg, #5170FF 0%, #3D5CE5 100%); --gradient-subtle: linear-gradient(180deg, #ffffff 0%, #ffffff 100%); --gradient-card: linear-gradient(135deg, rgba(81,112,255,0.04) 0%, rgba(61,92,229,0.04) 100%); --gradient-text: linear-gradient(135deg, #5170FF, #22D3EE); --gradient-fill: linear-gradient(155deg, #0f1a4d 0%, #1e2e7a 40%, #5170FF 100%); --gradient-border: linear-gradient(135deg, rgba(81,112,255,0.3), rgba(61,92,229,0.15)); --gradient-active-from: #0f1a4d; --gradient-active-mid: #1e2e7a; --gradient-active-to: #5170FF; /* --- Shadows ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03); --shadow-glow: 0 0 20px rgba(81, 112, 255, 0.2), 0 0 60px rgba(81, 112, 255, 0.1); /* --- Overlay / Backdrop ----------------------------------------------- */ --overlay: rgba(9, 9, 11, 0.5); --backdrop-blur: blur(12px); /* --- Card-specific ---------------------------------------------------- */ --card-bg: rgba(255, 255, 255, 0.8); --card-border: rgba(228, 228, 231, 0.8); --card-hover-border: rgba(81, 112, 255, 0.3); /* --- Nav (Liquid Glass) ----------------------------------------------- */ --nav-bg: rgba(255, 255, 255, 0.55); --nav-border: rgba(228, 228, 231, 0.6); /* --- Selection -------------------------------------------------------- */ --selection-bg: rgba(81, 112, 255, 0.15); --selection-text: #09090b; /* --- Scrollbar -------------------------------------------------------- */ --scrollbar-track: #ffffff; --scrollbar-thumb: #d4d4d8; --scrollbar-hover: #a1a1aa; } /* -------------------------------------------------------------------------- 3. DARK MODE Applied to [data-theme="dark"] always, and [data-theme="auto"] when the OS prefers dark. Single source — no duplication. -------------------------------------------------------------------------- */ [data-theme="dark"] { /* --- Liquid Glass — reflex multipliers (dark) -------------------------- */ --glass-reflex-light: 0.3; --glass-reflex-dark: 2; /* --- Surface / Background — deep blue-tinted (Vexel atmosphere) ------ */ --bg-primary: #060610; --bg-secondary: #0c0c18; --bg-tertiary: #141420; --bg-elevated: #1a1a28; --bg-inset: #050510; /* --- Text ------------------------------------------------------------- */ --text-primary: #fafafa; --text-secondary: #d4d4d8; --text-tertiary: #a1a1aa; --text-muted: #71717a; --text-inverted: #09090b; --text-on-primary: #ffffff; /* --- Borders — blue-tinted ------------------------------------------- */ --border-default: #1e1e30; --border-subtle: #161624; --border-strong: #2e2e42; --border-focus: var(--color-primary); /* --- Gradients --------------------------------------------------------- */ --gradient-primary: linear-gradient(135deg, #5170FF 0%, #3a5cff 100%); --gradient-subtle: linear-gradient(180deg, #060610 0%, #141420 100%); --gradient-card: linear-gradient(135deg, rgba(81,112,255,0.06) 0%, rgba(58,92,255,0.06) 100%); --gradient-text: linear-gradient(135deg, #CE32FF, #FF3E89); --gradient-fill: linear-gradient(155deg, #0d0620 0%, #2a1050 40%, #8B2FC9 100%); --gradient-border: linear-gradient(135deg, rgba(81,112,255,0.4), rgba(58,92,255,0.2)); --gradient-active-from: #D94FFF; --gradient-active-mid: #CE32FF; --gradient-active-to: #FF5599; /* --- Liquid Glass — interactive button tokens (dark) ------------------- */ --glass-btn-bg: color-mix(in srgb, #b820e6 8%, transparent); --glass-btn-border: rgba(184, 32, 230, 0.2); --glass-btn-color: #b820e6; /* --- Shadows ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3); --shadow-glow: 0 0 20px rgba(81, 112, 255, 0.25), 0 0 60px rgba(81, 112, 255, 0.12); /* --- Overlay / Backdrop ----------------------------------------------- */ --overlay: rgba(0, 0, 0, 0.7); --backdrop-blur: blur(16px); /* --- Card-specific ---------------------------------------------------- */ --card-bg: rgba(12, 12, 24, 0.8); --card-border: rgba(30, 30, 48, 0.6); --card-hover-border: rgba(206, 50, 255, 0.35); /* --- Nav (Liquid Glass) ----------------------------------------------- */ --nav-bg: rgba(6, 6, 16, 0.45); --nav-border: rgba(30, 30, 48, 0.5); /* --- Selection -------------------------------------------------------- */ --selection-bg: rgba(81, 112, 255, 0.2); --selection-text: #fafafa; /* --- Scrollbar -------------------------------------------------------- */ --scrollbar-track: #141420; --scrollbar-thumb: #2e2e42; --scrollbar-hover: #3a3a50; /* --- Device Mockups — MacBook (dark bezel) ----------------------------- */ --device-bezel: #0a0a0a; --device-bezel-border: #1a1a1a; --device-bezel-accent: #888888; --device-bezel-cam: #1f1f1f; --device-base-top: #c0c0c0; --device-base-bottom: #a8a8a8; --device-base-indent: #999999; /* --- Device Mockups — iPhone (dark = same frame, lighter buttons) ----- */ --device-phone-frame: #1a1a1a; --device-phone-border: #2a2a2a; --device-phone-island: #1a1a1a; --device-phone-button: #3a3a3a; --device-phone-frame-lt: #1a1a1a; /* Not used in dark, stays dark */ --device-phone-border-lt:#2a2a2a; } /* -------------------------------------------------------------------------- 4. AUTO THEME — Respects OS preference Reuses the same tokens as [data-theme="dark"] via combined selector. The dark mode block above (section 3) already defines all values. We only need to apply them when OS prefers dark + auto is selected. -------------------------------------------------------------------------- */ /* The JS theme system handles this: when theme is "auto", it reads prefers-color-scheme and applies either "light" or "dark" to data-theme. This means the CSS only needs [data-theme="dark"] and [data-theme="light"] selectors — no duplication needed. If JS is disabled, auto falls back to light (section 2 default). */ /* -------------------------------------------------------------------------- 6. SECTION OVERRIDES — Forced themes per-section -------------------------------------------------------------------------- */ /* Force dark surfaces regardless of global theme */ .section--dark { --bg-primary: #060610; --bg-secondary: #0c0c18; --bg-tertiary: #141420; --text-primary: #fafafa; --text-secondary: #d4d4d8; --text-tertiary: #a1a1aa; --text-muted: #71717a; --border-default: #1e1e30; --border-subtle: #161624; --card-bg: rgba(12, 12, 24, 0.8); --card-border: rgba(30, 30, 48, 0.6); --card-hover-border: rgba(206, 50, 255, 0.35); --shadow-glow: 0 0 20px rgba(81, 112, 255, 0.25), 0 0 60px rgba(81, 112, 255, 0.12); --gradient-primary: linear-gradient(135deg, #5170FF 0%, #3a5cff 100%); --gradient-text: linear-gradient(135deg, #CE32FF, #FF3E89); --gradient-fill: linear-gradient(155deg, #0d0620 0%, #2a1050 40%, #8B2FC9 100%); --gradient-active-from: #D94FFF; --gradient-active-mid: #CE32FF; --gradient-active-to: #FF5599; color: var(--text-primary); background-color: var(--bg-primary); } /* Force light surfaces regardless of global theme */ .section--light { --bg-primary: #ffffff; --bg-secondary: #ffffff; --bg-tertiary: #ffffff; --text-primary: #09090b; --text-secondary: #3f3f46; --text-tertiary: #71717a; --text-muted: #a1a1aa; --border-default: #e8e8ec; --border-subtle: #f0f0f2; --card-bg: rgba(255, 255, 255, 0.8); --card-border: rgba(228, 228, 231, 0.8); --card-hover-border: rgba(81, 112, 255, 0.3); --shadow-glow: 0 0 20px rgba(81, 112, 255, 0.2), 0 0 60px rgba(81, 112, 255, 0.1); --gradient-primary: linear-gradient(135deg, #5170FF 0%, #3D5CE5 100%); --gradient-text: linear-gradient(135deg, #5170FF, #22D3EE); --gradient-fill: linear-gradient(155deg, #0f1a4d 0%, #1e2e7a 40%, #5170FF 100%); --gradient-active-from: #0f1a4d; --gradient-active-mid: #1e2e7a; --gradient-active-to: #5170FF; color: var(--text-primary); background-color: var(--bg-primary); }