/* Netabor Launch 2027 — Design Tokens * Scoped for /staging/platform/* — nemíchat s produkčním CSS. * Pozicování: unified Netabor (Kids/Teens/Rodiče pillars pod jedním brandem) */ :root { /* Brand colors — zachována produkční paleta (zlutá + teal + navy) */ --c-brand-yellow: #FDCF00; --c-brand-yellow-dark: #E8BC00; --c-brand-teal: #00B4BC; --c-brand-teal-dark: #008A90; --c-brand-navy: #222936; /* Pillar accents — subtle diferenciace tri segmentu v ramci unified brand */ --c-pillar-kids: #FDCF00; /* zluta — energeticka, hracova */ --c-pillar-teens: #FF6B5B; /* korálová — moderní, teen-friendly */ --c-pillar-rodice: #00B4BC; /* teal — klidná, parenting */ --c-pillar-klub: #6B46E5; /* purple — premium membership */ /* Neutrální paleta — UX U14 fix: --c-text-faded #8b92a0 → #6b7280 (3.07:1 → 4.55:1 WCAG AA pass) */ --c-bg: #ffffff; --c-bg-subtle: #f8f9fb; --c-bg-elev: #ffffff; --c-surface: #fafafa; --c-text: #222936; --c-text-muted: #5a6478; --c-text-faded: #6b7280; --c-border: #e5e7eb; --c-border-strong: #d1d5db; --c-divider: #f0f2f5; --c-skeleton: #e8eaef; --c-skeleton-shimmer: #f4f5f7; /* Status */ --c-success: #10b981; --c-warning: #f59e0b; --c-danger: #ef4444; --c-staging: #6B46E5; /* Typography */ --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Tragic Marker', 'Poppins', sans-serif; --font-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.375rem; /* 22px */ --fs-xl: 1.75rem; /* 28px */ --fs-2xl: 2.25rem; /* 36px */ --fs-3xl: 3rem; /* 48px */ --fs-4xl: 4rem; /* 64px */ --fs-hero: clamp(2.5rem, 5.5vw, 5rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.55; --lh-relaxed: 1.75; /* Spacing (8px base) */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; /* Layout */ --max-width: 1200px; --max-width-narrow: 780px; --max-width-wide: 1440px; /* Radius */ --r-sm: 0.375rem; --r-md: 0.75rem; --r-lg: 1.25rem; --r-xl: 2rem; --r-full: 999px; /* Shadows */ --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --sh-md: 0 4px 12px rgba(0, 0, 0, 0.06); --sh-lg: 0 12px 32px rgba(0, 0, 0, 0.08); --sh-xl: 0 24px 64px rgba(0, 0, 0, 0.1); --sh-focus: 0 0 0 3px rgba(0, 180, 188, 0.35); /* Motion */ --t-fast: 120ms ease; --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* Z-index */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 500; --z-banner: 900; } /* UX U13: Dark mode (auto-detect via system preference) — Calm/Headspace/Spotify standard. * Critical pre Audio Library + Sleep Stories evening usage. Opt-out: data-theme="light" on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-bg: #0f1218; --c-bg-subtle: #161a23; --c-bg-elev: #1a1f2b; --c-surface: #1e2331; --c-text: #f3f4f6; --c-text-muted: #b4bcc8; --c-text-faded: #8b92a0; --c-border: #2a3142; --c-border-strong: #3a4257; --c-divider: #1e2331; --c-skeleton: #232938; --c-skeleton-shimmer: #2a3142; --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sh-md: 0 4px 12px rgba(0, 0, 0, 0.4); --sh-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --sh-xl: 0 24px 64px rgba(0, 0, 0, 0.6); --sh-focus: 0 0 0 3px rgba(0, 180, 188, 0.55); } } /* Explicit opt-in dark mode (user toggle) */ :root[data-theme="dark"] { --c-bg: #0f1218; --c-bg-subtle: #161a23; --c-bg-elev: #1a1f2b; --c-surface: #1e2331; --c-text: #f3f4f6; --c-text-muted: #b4bcc8; --c-text-faded: #8b92a0; --c-border: #2a3142; --c-border-strong: #3a4257; --c-divider: #1e2331; --c-skeleton: #232938; --c-skeleton-shimmer: #2a3142; --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sh-md: 0 4px 12px rgba(0, 0, 0, 0.4); --sh-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --sh-xl: 0 24px 64px rgba(0, 0, 0, 0.6); --sh-focus: 0 0 0 3px rgba(0, 180, 188, 0.55); } /* UX accessibility: respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }