/* ============================================================ ARKIDZOO - BRAND DESIGN TOKENS v1.0 - 2026 - Generated from the ARKidzoo Brand Guidelines. The single source of truth for the ARKidzoo digital brand. Drop into any build (e.g. the modkids -> Astro site) and reference every value via var(--token-name). ============================================================ */ :root { /* ---- BRAND RED - the core equity ------------------------- */ /* The smile + ZOO shadow color from the logo. Primary CTA, links, focus rings, the "Sunburst Glow". */ --color-red-50: #FEE9E8; --color-red-100: #FCC9C7; --color-red-300: #F08581; --color-red-500: #E63B3B; /* PRIMARY - brand red, matches logo smile + AR phone frame */ --color-red-600: #CC2E2E; --color-red-700: #A82323; --color-red-900: #5C0F0F; --color-brand: var(--color-red-500); --color-brand-hover: var(--color-red-600); --color-brand-active: var(--color-red-700); /* ---- ACCENT COLORS - pulled from the logo, each with a role ---- */ /* Purple - the "AR" letters - Schools/B2B sections, tech callouts */ --color-purple-50: #F2E8F7; --color-purple-300: #A56FBF; --color-purple-500: #6F2A8C; /* Schools / Kidvation India / AR tech */ --color-purple-700: #4B1C5E; /* Green - the "k" - success states, "Demo" or "Try" actions */ --color-green-50: #ECF7E1; --color-green-300: #A8DC80; --color-green-500: #7AC54A; /* Success, Demo, Social Impact */ --color-green-700: #4F8B25; /* Yellow - the "d" - highlight strips, badges, hover ambient glow */ --color-yellow-50: #FEF7DA; --color-yellow-300: #F8DA66; --color-yellow-500: #F5C518; /* Highlights, sale badges, hover glow */ --color-yellow-700: #B58F08; /* Blue - the "i" dot - info states, AR/tech feature callouts */ --color-blue-50: #E0F0FB; --color-blue-300: #6BB0E2; --color-blue-500: #2E89D8; /* Info, tech features, AR explainers */ --color-blue-700: #1A5C99; /* ---- NEUTRAL - warm-tinted (not cold grey) --------------- */ --color-paper: #FFF8F5; /* page background - warm cream */ --color-paper-raised: #FFFFFF; --color-paper-sunken: #FAF1EC; --color-neutral-50: #FAF1EC; --color-neutral-100: #EFE3DC; --color-neutral-200: #DACAC0; --color-neutral-400: #998579; --color-neutral-600: #5F4F45; --color-neutral-900: #1B0E12; /* primary text - deep aubergine, warmer than black */ --color-white: #FFFFFF; --color-ink: var(--color-neutral-900); /* ---- SEMANTIC - states only ------------------------------ */ --color-success: var(--color-green-500); --color-warning: var(--color-yellow-500); --color-info: var(--color-blue-500); --color-danger: var(--color-red-500); /* ---- ROLE TOKENS ----------------------------------------- */ /* ARKidzoo runs light surfaces only - no dark mode. */ --surface-page: var(--color-paper); --surface-raised: var(--color-paper-raised); --surface-sunken: var(--color-paper-sunken); --border-subtle: var(--color-neutral-200); --text-primary: var(--color-neutral-900); --text-secondary: var(--color-neutral-600); --text-muted: var(--color-neutral-400); --text-on-brand: var(--color-white); /* ---- SIGNATURE - Sunburst Glow --------------------------- */ /* Soft radial gradient in red - hero ambient lighting, button hover halo, mascot spotlight. */ --glow-sunburst: radial-gradient(circle, rgba(230, 59, 59, .45) 0%, rgba(230, 59, 59, 0) 70%); --glow-sunburst-soft: radial-gradient(circle, rgba(230, 59, 59, .22) 0%, rgba(230, 59, 59, 0) 70%); /* ---- TYPOGRAPHY - families ------------------------------- */ /* Fredoka for display: rounded, playful, kid-coded. Nunito Sans for body: warm workhorse, readable. */ --font-display: 'Fredoka', 'Comic Sans MS', sans-serif; --font-body: 'Nunito Sans', system-ui, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; /* ---- TYPOGRAPHY - fluid type scale ----------------------- */ --text-display-xl: clamp(2.5rem, 1.30rem + 3.9vw, 4.5rem); /* 40 -> 72 */ --text-display-l: clamp(2.125rem, 1.42rem + 2.3vw, 3.5rem); /* 34 -> 56 */ --text-h1: clamp(1.875rem, 1.42rem + 1.5vw, 2.75rem); /* 30 -> 44 */ --text-h2: clamp(1.625rem, 1.40rem + 0.8vw, 2.125rem);/* 26 -> 34 */ --text-h3: 1.625rem; /* 26 */ --text-h4: 1.25rem; /* 20 */ --text-h5: 1.0625rem; /* 17 */ --text-overline: 0.8125rem; /* 13 */ --text-lead: 1.25rem; /* 20 */ --text-body-l: 1.125rem; /* 18 */ --text-body: 1rem; /* 16 - base */ --text-body-s: 0.875rem; /* 14 */ --text-caption: 0.8125rem; /* 13 */ --text-button: 0.9375rem; /* 15 */ /* ---- TYPOGRAPHY - weights -------------------------------- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- TYPOGRAPHY - leading & tracking --------------------- */ --leading-tight: 1.06; --leading-snug: 1.18; --leading-normal: 1.6; --leading-relaxed: 1.7; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.14em; --measure: 64ch; /* ---- SPACING - 4px base scale ---------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 - section rhythm */ --space-10: 8rem; /* 128 */ --section-y: clamp(4rem, 2rem + 6vw, 6rem); /* ---- RADIUS - more rounded than Graphision (kids = soft) ---- */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-xl: 40px; --radius-pill: 999px; --radius-card: var(--radius-lg); /* ---- ELEVATION - warm-tinted shadows --------------------- */ /* Shadows carry a slight warm tint (not pure black) so they sit naturally on the cream paper background. */ --shadow-sm: 0 1px 2px rgba(74, 32, 24, .06), 0 1px 3px rgba(74, 32, 24, .08); --shadow-md: 0 4px 12px rgba(74, 32, 24, .08), 0 2px 4px rgba(74, 32, 24, .06); --shadow-lg: 0 16px 40px rgba(74, 32, 24, .12); --shadow-card: var(--shadow-md); /* Red glow for hero CTA buttons */ --glow-red: 0 8px 32px rgba(230, 59, 59, .45); /* ---- LAYOUT ---------------------------------------------- */ --container-max: 1280px; --container-wide: 1440px; --grid-columns: 12; --grid-gutter: 24px; /* ---- MOTION - slightly slower than Graphision ------------ */ /* Kids respond to deliberate motion. Avoid sub-200ms. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot for hovers */ --duration-fast: 200ms; --duration-base: 400ms; --duration-slow: 700ms; }