/* ========================================================================== Pytronic Labs — Design Tokens Single source of truth for color, type, space, motion. Dark is the default theme; [data-theme="light"] overrides on . ========================================================================== */ :root { /* ---- Brand -------------------------------------------------------- */ --brand-cyan: #1AB3D3; /* Pytronic, C.A. corporate cyan */ --brand-cyan-bright: #3ED8F7; --brand-cyan-deep: #0B7D96; /* ---- Typography --------------------------------------------------- */ --font-display: "Sora", "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Fluid type scale — min 360px viewport, max 1440px */ --fs-eyebrow: 0.75rem; --fs-xs: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.85rem + 0.14vw, 0.9375rem); --fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --fs-xl: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem); --fs-2xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem); --fs-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); --fs-4xl: clamp(2.75rem, 1.9rem + 3.7vw, 5.25rem); --lh-tight: 1.04; --lh-snug: 1.22; --lh-base: 1.65; --tracking-tight: -0.035em; --tracking-snug: -0.018em; --tracking-wide: 0.16em; /* ---- Spacing (8pt-ish rhythm) ------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6.5rem; --sp-12: 8rem; --section-y: clamp(4.5rem, 3rem + 7vw, 9rem); /* ---- Layout ------------------------------------------------------- */ --container: 1240px; --container-tight: 880px; --gutter: clamp(1.25rem, 0.75rem + 2.4vw, 3rem); --header-h: 74px; /* ---- Radii -------------------------------------------------------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- Motion ------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 620ms; /* ---- Z-index ------------------------------------------------------ */ --z-bg: 0; --z-content: 1; --z-header: 100; --z-drawer: 200; --z-toast: 300; } /* ========================================================================== Dark theme (default) ========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #08090B; --bg-alt: #0B0D10; --surface: #101317; --surface-2: #171B21; --surface-3: #1E242B; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --text: #F0F4F7; --text-muted: #98A4B0; --text-dim: #67727D; --accent: var(--brand-cyan); --accent-bright: var(--brand-cyan-bright); --accent-soft: rgba(26, 179, 211, 0.14); --accent-line: rgba(26, 179, 211, 0.32); --on-accent: #041A21; --glow: rgba(26, 179, 211, 0.30); --glow-far: rgba(26, 179, 211, 0.10); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.8); --shadow-lg: 0 32px 70px -24px rgba(0, 0, 0, 0.9); --shadow-accent: 0 16px 44px -16px var(--glow); --grid-line: rgba(255, 255, 255, 0.035); --noise-opacity: 0.045; } /* ========================================================================== Light theme ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --bg-alt: #F6F8FA; --surface: #FFFFFF; --surface-2: #F2F5F8; --surface-3: #E8EDF2; --border: rgba(9, 20, 30, 0.10); --border-strong: rgba(9, 20, 30, 0.20); --text: #0A0F14; --text-muted: #4E5C68; --text-dim: #7A8794; /* Darkened cyan so it clears 4.5:1 on white */ --accent: #0B7D96; --accent-bright: #0995B4; --accent-soft: rgba(11, 125, 150, 0.10); --accent-line: rgba(11, 125, 150, 0.28); --on-accent: #FFFFFF; --glow: rgba(26, 179, 211, 0.24); --glow-far: rgba(26, 179, 211, 0.08); --shadow-sm: 0 1px 2px rgba(9, 20, 30, 0.06); --shadow-md: 0 14px 34px -14px rgba(9, 20, 30, 0.18); --shadow-lg: 0 34px 70px -28px rgba(9, 20, 30, 0.26); --shadow-accent: 0 16px 44px -18px rgba(11, 125, 150, 0.34); --grid-line: rgba(9, 20, 30, 0.045); --noise-opacity: 0.03; }