/** * 00-tokens.css — Design Token System * YDC Child Enterprise Theme * * All visual decisions live here. * Components consume tokens only — never hardcoded values. * * Layer order: * Surfaces → Text → Accent → Border → Radius → Space → Shadow → Transition → Typography → Ambient */ :root { /* ───────────────────────────────────────────── SURFACES 4 light neumorphic levels. Elevation via subtle shade shift and dual-light shadow. Deepest = 0, Most elevated = 3. ───────────────────────────────────────────── */ --surface-0: #E9EDF3; /* Page background — absolute floor */ --surface-1: #EDF1F6; /* Section surfaces — slight lift */ --surface-2: #EDF1F6; /* Cards, panels — raised */ --surface-3: #EDF1F6; /* Dropdowns, modals — topmost */ /* Header surface (solid neumorphic bar) */ --surface-header: #EDF1F6; /* ───────────────────────────────────────────── TEXT ───────────────────────────────────────────── */ --text-primary: #2E3238; --text-secondary: #6B7280; --text-muted: #9CA3AF; --text-inverse: #FAFBFC; /* ───────────────────────────────────────────── ACCENT One accent color. Never a rainbow. ───────────────────────────────────────────── */ --accent-primary: #3B6EF6; --accent-primary-hov: #5C86F8; --accent-soft: rgba(59, 110, 246, 0.10); --accent-soft-hov: rgba(59, 110, 246, 0.16); /* ───────────────────────────────────────────── BORDER ───────────────────────────────────────────── */ --border-subtle: rgba(0, 0, 0, 0.03); --border-normal: rgba(0, 0, 0, 0.06); --border-strong: rgba(0, 0, 0, 0.10); --border-highlight: rgba(255, 255, 255, 0.5); /* ───────────────────────────────────────────── RADIUS ───────────────────────────────────────────── */ --radius-flat: 0px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 9999px; /* ───────────────────────────────────────────── SPACING SCALE (4px base) ───────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 100px; --space-13: 120px; /* ───────────────────────────────────────────── SHADOW Neumorphic dual-light shadows — light source top-left, creating highlight + shade pair. ───────────────────────────────────────────── */ --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10); --shadow-flat-sm: 3px 3px 6px #C4CBD6, -3px -3px 6px #FFFFFF; --shadow-flat-md: 6px 6px 12px #C4CBD6, -6px -6px 12px #FFFFFF; --shadow-flat-lg: 9px 9px 18px #C4CBD6, -9px -9px 18px #FFFFFF; /* Inset neumorphic shadows (pressed / active states) */ --shadow-inset-sm: inset 3px 3px 6px #C4CBD6, inset -3px -3px 6px #FFFFFF; --shadow-inset-md: inset 6px 6px 12px #C4CBD6, inset -6px -6px 12px #FFFFFF; /* ───────────────────────────────────────────── TRANSITIONS ───────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --transition-fast: 150ms var(--ease-out); --transition-normal: 350ms var(--ease-out); --transition-slow: 600ms var(--ease-out); /* ───────────────────────────────────────────── TYPOGRAPHY ───────────────────────────────────────────── */ --font-sans: 'Google Sans', 'Sen', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Google Sans', 'Sen', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semi: 600; --font-weight-bold: 700; /* Type scale (fluid-ish, unitless base 16px) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.75rem; /* 44px */ --text-4xl: 3.5rem; /* 56px */ --text-5xl: 4.5rem; /* 72px */ --leading-tight: 1.12; --leading-snug: 1.35; --leading-normal: 1.60; --leading-loose: 1.80; --tracking-tight: -0.03em; --tracking-snug: -0.02em; --tracking-normal: 0em; /* ───────────────────────────────────────────── LAYOUT ───────────────────────────────────────────── */ --container-max: 1180px; --container-pad: var(--space-6); --section-pad-y: var(--space-12); /* ───────────────────────────────────────────── AMBIENT LIGHTING Soft radial tints at very low opacity. Light-mode: subtle cool-blue wash to add depth without breaking the flat aesthetic. ───────────────────────────────────────────── */ /* Layer 1 (Header): Soft light gradient at top */ --ambient-header-dark: radial-gradient( ellipse 160% 70% at 50% 0%, rgba(59, 110, 246, 0.06) 0%, rgba(59, 110, 246, 0.03) 25%, transparent 50% ); --ambient-header: var(--ambient-header-dark); --ambient-hero: var(--ambient-header-dark); /* Section: faint accent wash at the base */ --ambient-section-bottom: radial-gradient( ellipse 80% 40% at 50% 110%, rgba(59, 110, 246, 0.04) 0%, transparent 60% ); /* CTA: very faint glow centered behind CTA block */ --ambient-cta: radial-gradient( ellipse 70% 60% at 50% 50%, rgba(59, 110, 246, 0.05) 0%, transparent 65% ); /* Layer 2 (Upper Hero): Soft accent glow behind heading */ --ambient-cta-glow: radial-gradient( ellipse 100% 55% at 50% 40%, rgba(59, 110, 246, 0.12) 0%, rgba(59, 110, 246, 0.06) 35%, rgba(59, 110, 246, 0.02) 60%, transparent 75% ); /* Layer 3 (Lower Hero): Subtle bright arch */ --ambient-cta-white: radial-gradient( ellipse 95% 32% at 50% 68%, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.40) 22%, rgba(59, 110, 246, 0.06) 45%, transparent 65% ); /* Layer 4 (Hero Base): Soft fade to surface at bottom */ --ambient-hero-bottom: linear-gradient( to bottom, transparent 55%, rgba(233, 237, 243, 0.60) 82%, var(--surface-0) 100% ); /* ───────────────────────────────────────────── HEADER ───────────────────────────────────────────── */ --header-height: 72px; --header-bg: var(--surface-header); /* Solid neumorphic header */ --header-border: 1px solid var(--border-subtle); /* Grain / Noise Texture Opacity */ --grain-opacity: 0.02; }