/* ============================================================ Idasara Academy — Theme Variables TO CHANGE THE THEME: Edit ONLY this file. All colors, fonts, spacing flow from these variables. No other CSS file needs to change for a theme update. Color guide: --color-primary: Brand navy — headings, nav, footer, trust --color-secondary: Mid-navy — premium features, highlights --color-accent: Brand gold — CTAs, highlights, action color ============================================================ */ :root { /* -------------------------------------------------------- Kinetic Emerald — Chrome palette (nav + footer) Deep Forest / Kinetic Mint / Matte Gold -------------------------------------------------------- */ --color-chrome-bg: #013220; /* Deep Forest Green */ --color-chrome-mint: #00FA9A; /* Kinetic Mint */ --color-chrome-mint-dim: rgba(0, 250, 154, 0.12); --color-chrome-mint-edge: rgba(0, 250, 154, 0.18); --color-chrome-gold: #D4AF37; /* Matte Gold */ --color-chrome-text: #E2E8F0; /* primary text on forest — 11.5:1 */ --color-chrome-text-soft: #CBD5E1; /* secondary text on forest — 9.6:1 */ --color-chrome-text-mute: #94A3B8; /* muted text on forest — 5.5:1 */ /* -------------------------------------------------------- Brand Colors — Navy + Gold (#5816) -------------------------------------------------------- */ --color-primary-50: #E8EAF0; --color-primary-100: #C5CAD9; --color-primary-200: #9DA6C0; --color-primary-300: #7582A7; --color-primary-400: #4F6093; --color-primary-500: #2A4080; --color-primary: #1C3070; --color-primary-600: #1C3070; --color-primary-700: #162658; --color-primary-800: #101C40; --color-primary-900: #0A1228; --color-secondary-50: #E9EDF8; --color-secondary-100: #C8D1EE; --color-secondary-200: #A3B2E2; --color-secondary-300: #7E93D6; --color-secondary-400: #5A74CB; --color-secondary-500: #3758BF; --color-secondary: #2A4BAF; --color-secondary-600: #2A4BAF; --color-secondary-700: #213B8C; --color-secondary-800: #192C69; --color-secondary-900: #101D46; --color-accent-50: #FEF5E7; --color-accent-100: #FCE6BF; --color-accent-200: #FAD593; --color-accent-300: #F8C467; --color-accent-400: #F7B63F; --color-accent-500: #F5A623; --color-accent: #F5A623; --color-accent-600: #E09418; --color-accent-700: #C07D10; --color-accent-800: #9A640A; --color-accent-900: #744B06; /* -------------------------------------------------------- Semantic Colors -------------------------------------------------------- */ --color-warning-50: #FFFBEB; --color-warning-100: #FEF3C7; --color-warning-200: #FDE68A; --color-warning: #F59E0B; --color-warning-600: #D97706; --color-warning-700: #B45309; --color-error-50: #FEF2F2; --color-error-100: #FEE2E2; --color-error-200: #FECACA; --color-error: #EF4444; --color-error-600: #DC2626; --color-error-700: #B91C1C; --color-info-50: #EFF6FF; --color-info-100: #DBEAFE; --color-info: #3B82F6; --color-info-600: #2563EB; --color-success: #059669; /* -------------------------------------------------------- Surface & Text Tokens (theme-aware — used by chrome JS + cards) #9317 — fills the gap referenced by .mobile-cta-bar, for-schools, and other inline-style consumers that previously referenced undefined custom properties. -------------------------------------------------------- */ --color-surface: #FFFFFF; --color-surface-alt: #F1F5F9; --color-text-primary: #1E293B; --color-text-secondary: #475569; --color-text-muted: #64748B; --color-border: #E2E8F0; /* Short aliases — older inline styles in for-schools etc. */ --primary: var(--color-primary); --secondary: var(--color-secondary); --accent: var(--color-accent); --surface: var(--color-surface); --border: var(--color-border); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --heading: var(--color-neutral-900); --body: var(--color-neutral-700); /* -------------------------------------------------------- Neutral Palette (Slate-based, blue-tinted) -------------------------------------------------------- */ --color-neutral-0: #FFFFFF; --color-neutral-50: #EEF1F7; --color-neutral-100: #F1F5F9; --color-neutral-200: #E2E8F0; --color-neutral-300: #CBD5E1; --color-neutral-400: #6B7280; --color-neutral-500: #4B5563; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1E293B; --color-neutral-900: #0F172A; --color-neutral-950: #020617; /* -------------------------------------------------------- Typography -------------------------------------------------------- */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Noto Sans Sinhala', 'Noto Sans Tamil', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --font-family-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Sizes — fluid scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* Weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Line heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; /* -------------------------------------------------------- Spacing Scale -------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* -------------------------------------------------------- Border Radius -------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* -------------------------------------------------------- Shadows -------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* -------------------------------------------------------- Transitions -------------------------------------------------------- */ --transition-fast: 150ms ease; --transition: 200ms ease; --transition-slow: 300ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* -------------------------------------------------------- Z-Index Scale -------------------------------------------------------- */ --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-overlay: 40; --z-modal: 50; --z-popover: 60; --z-tooltip: 70; /* -------------------------------------------------------- Container Widths -------------------------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1400px; /* -------------------------------------------------------- Breakpoints (documented for reference — cannot be used directly in CSS custom properties, but referenced by @media queries in style.css) --bp-mobile: 640px (max-width: 639px = mobile) --bp-tablet: 768px (max-width: 767px = small tablet) --bp-desktop: 1024px (min-width: 1024px = desktop) --bp-wide: 1280px (min-width: 1280px = wide desktop) -------------------------------------------------------- */ } /* ============================================================ Dark Mode — toggle via data-theme attribute OR system pref ============================================================ */ [data-theme="dark"] { --color-neutral-0: #0F172A; --color-neutral-50: #1E293B; --color-neutral-100: #334155; --color-neutral-200: #475569; --color-neutral-300: #64748B; --color-neutral-400: #94A3B8; --color-neutral-500: #CBD5E1; --color-neutral-600: #E2E8F0; --color-neutral-700: #F1F5F9; --color-neutral-800: #F8FAFC; --color-neutral-900: #FFFFFF; --color-neutral-950: #FFFFFF; /* Lightened brand colors for dark backgrounds */ --color-primary-50: #1E293B; --color-primary-100: #1A2D4F; --color-primary: #6B8BD6; --color-primary-700: #93B4FD; --color-secondary-50: #1E293B; --color-secondary-100: #1A2347; --color-secondary: #7B9AE8; --color-accent-50: #1E293B; --color-accent-100: #3D2E0A; --color-accent: #F5B944; --color-warning-50: #1E293B; --color-info-50: #1E293B; --color-error-50: #1E293B; /* Surface & text tokens flip in dark mode (#9317) */ --color-surface: #1E293B; --color-surface-alt: #334155; --color-text-primary: #F1F5F9; --color-text-secondary: #CBD5E1; --color-text-muted: #94A3B8; --color-border: #334155; /* Shadows are more subtle in dark mode */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3); --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.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3); } /* Fallback: system preference when no data-theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-neutral-0: #0F172A; --color-neutral-50: #1E293B; --color-neutral-100: #334155; --color-neutral-200: #475569; --color-neutral-300: #64748B; --color-neutral-400: #94A3B8; --color-neutral-500: #CBD5E1; --color-neutral-600: #E2E8F0; --color-neutral-700: #F1F5F9; --color-neutral-800: #F8FAFC; --color-neutral-900: #FFFFFF; --color-neutral-950: #FFFFFF; --color-primary-50: #1E293B; --color-primary-100: #1A2D4F; --color-primary: #6B8BD6; --color-primary-700: #93B4FD; --color-secondary-50: #1E293B; --color-secondary-100: #1A2347; --color-secondary: #7B9AE8; --color-accent-50: #1E293B; --color-accent-100: #3D2E0A; --color-accent: #F5B944; --color-warning-50: #1E293B; --color-info-50: #1E293B; --color-error-50: #1E293B; --color-surface: #1E293B; --color-surface-alt: #334155; --color-text-primary: #F1F5F9; --color-text-secondary: #CBD5E1; --color-text-muted: #94A3B8; --color-border: #334155; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3); --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.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3); } } /* ============================================================ Theme transition — smooth color change on toggle ============================================================ */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; } /* ============================================================ Reduced Motion — accessibility ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0.01ms; --transition: 0.01ms; --transition-slow: 0.01ms; --transition-spring: 0.01ms; } html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: none !important; } }