/** * LEARNature-ly Design Tokens v1 * Stable URL: https://learnature-ly.com/shared/design-system/tokens.v1.css * * SemVer policy: * v1.X.Y patch — value adjustments (cascade automatically to all consuming apps) * v1.X.0 minor — new token added (apps don't need to change) * v2.0.0 major — BREAKING change (token renamed/removed) → ships at NEW URL * (tokens.v2.css), apps migrate at their own pace * * Two-tier model (W3C Design Tokens 2025.10): * - PRIMITIVES raw values, named --ln-color-NAME-LEVEL — rarely consumed directly * - SEMANTIC consumed by apps, named --ln-CONCEPT — UI components reference these * * Per-app theming: * Set * Each app gets a distinct ACCENT color + a pale ROOM TINT background — same * AWENI house, different room. * * Dark mode: * Add `class="dark"` (or `data-theme="dark"`) on or . * * Hot-swap: edit a value here, deploy this single file, all 6+ apps update. */ :root { /* ==================================================================== * PRIMITIVES — Color ramps (W3C "primitive" tokens) * Raw HEX values. NEVER consume these in app CSS — use semantic tokens. * ==================================================================== */ /* Cream — warm whites (the AWENI paper) */ --ln-color-cream-50: #FAF7F2; --ln-color-cream-100: #F5F0E8; --ln-color-cream-200: #E8E0D5; --ln-color-cream-300: #C8B59A; /* Midnight — warm blacks (the AWENI ink) */ --ln-color-midnight-900: #0A0A0A; --ln-color-midnight-800: #1A1813; --ln-color-midnight-700: #2A2520; --ln-color-midnight-600: #5A5048; --ln-color-midnight-500: #8A7E72; /* Champagne — luxury gold (ceremonial + brand mark) */ --ln-color-champagne-300: #E2CEA0; --ln-color-champagne-500: #C8A96A; /* official ceremonial */ --ln-color-champagne-600: #9C8348; /* the brand mark / logo color */ --ln-color-champagne-700: #8B6F3F; /* Per-app accent primitives (one per app) */ --ln-color-blue-500: #3B82F6; --ln-color-blue-600: #1E40AF; /* BalanceTab finance */ --ln-color-teal-500: #2A9C8F; --ln-color-teal-600: #1F7268; /* SelectO restaurant */ --ln-color-violet-500: #8B5CF6; --ln-color-violet-600: #7C3AED; /* Games (or per-game category) */ /* Per-app room tints (very pale, max 5% saturation — "you're in this room") */ --ln-room-tint-aweni: #FAF7F2; /* default cream */ --ln-room-tint-memoriz: #F5EDDB; /* pale champagne — Islamic premium */ --ln-room-tint-balancetab: #F0F4FA; /* pale blue — finance trust */ --ln-room-tint-selecto: #EAF1EF; /* pale teal — restaurant */ --ln-room-tint-games: #F2F2F2; /* pale neutral — let games' own colors shine */ --ln-room-tint-yawmi: #F1EEF5; /* pale lavender — daily journal calm */ --ln-room-tint-blog: #FAF7F2; /* same as AWENI per user direction */ --ln-room-tint-identity: #FAF7F2; /* same as AWENI */ --ln-room-tint-cockpit: #FAF7F2; /* same as AWENI */ --ln-room-tint-portal: #FAF7F2; /* same as AWENI */ /* Status colors — semantic UX patterns, NOT brand. Universal. */ --ln-color-success: #16A34A; --ln-color-warning: #F59E0B; --ln-color-danger: #DC2626; --ln-color-info: #2563EB; /* ==================================================================== * SEMANTIC — UI tokens (consumed by app CSS) * Default = LIGHT theme. Override in .dark below. * ==================================================================== */ /* Backgrounds */ --ln-bg-primary: var(--ln-color-cream-50); --ln-bg-secondary: var(--ln-color-cream-100); --ln-bg-card: #FFFFFF; --ln-bg-elevated: #FFFFFF; /* Text */ --ln-text-primary: var(--ln-color-midnight-900); --ln-text-secondary: var(--ln-color-midnight-600); --ln-text-muted: var(--ln-color-midnight-500); --ln-text-inverse: var(--ln-color-cream-50); /* Borders */ --ln-border: var(--ln-color-cream-200); --ln-border-strong: var(--ln-color-midnight-700); /* Accent (default = AWENI midnight, overridden per-app) */ --ln-accent: var(--ln-color-midnight-900); --ln-accent-text: var(--ln-color-cream-50); --ln-accent-hover: var(--ln-color-midnight-700); --ln-accent-ceremonial: var(--ln-color-champagne-500); /* Brand mark (the logo color — same in all themes/apps) */ --ln-mark: var(--ln-color-champagne-600); /* Shadows — subtle, warm */ --ln-shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04); --ln-shadow-md: 0 4px 6px -1px rgba(10, 10, 10, 0.08); --ln-shadow-lg: 0 10px 15px -3px rgba(10, 10, 10, 0.10); --ln-shadow-xl: 0 20px 25px -5px rgba(10, 10, 10, 0.12); /* Backdrop (modals/overlays) */ --ln-backdrop: rgba(10, 10, 10, 0.4); /* ==================================================================== * SEMANTIC — Spacing scale (4px base, T-shirt steps) * ==================================================================== */ --ln-space-0: 0; --ln-space-1: 4px; --ln-space-2: 8px; --ln-space-3: 12px; --ln-space-4: 16px; --ln-space-5: 24px; --ln-space-6: 32px; --ln-space-7: 48px; --ln-space-8: 64px; --ln-space-9: 96px; --ln-space-10: 128px; /* ==================================================================== * SEMANTIC — Border radius scale * ==================================================================== */ --ln-radius-sm: 4px; --ln-radius-md: 8px; --ln-radius-lg: 12px; --ln-radius-xl: 16px; --ln-radius-2xl: 24px; --ln-radius-full: 9999px; /* ==================================================================== * SEMANTIC — Typography * ==================================================================== */ --ln-font-ui: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', sans-serif; --ln-font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Amiri', 'Traditional Arabic', serif; --ln-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace; --ln-text-xs: 0.75rem; /* 12px — captions, meta */ --ln-text-sm: 0.875rem; /* 14px — secondary body */ --ln-text-base: 1rem; /* 16px — body */ --ln-text-lg: 1.125rem; /* 18px — emphasis */ --ln-text-xl: 1.25rem; /* 20px — small heading */ --ln-text-2xl: 1.5rem; /* 24px — H3 */ --ln-text-3xl: 1.75rem; /* 28px — H2 */ --ln-text-4xl: 2.25rem; /* 36px — H1 */ /* ==================================================================== * SEMANTIC — Layout * ==================================================================== */ --ln-topbar-height: 48px; --ln-bottomnav-height: 64px; --ln-content-max-width: 720px; /* ==================================================================== * SEMANTIC — Motion * ==================================================================== */ --ln-transition-fast: 120ms; --ln-transition-default: 200ms; --ln-transition-slow: 300ms; --ln-easing-default: cubic-bezier(0.4, 0, 0.2, 1); --ln-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* ==================================================================== * SEMANTIC — Status colors (NOT brand, universal UX) * ==================================================================== */ --ln-status-success: var(--ln-color-success); --ln-status-warning: var(--ln-color-warning); --ln-status-danger: var(--ln-color-danger); --ln-status-info: var(--ln-color-info); /* Notification dot color — same as danger but isolated for design freedom */ --ln-notification-dot: var(--ln-color-danger); } /* ====================================================================== * DARK THEME — overrides for .dark or [data-theme="dark"] * ====================================================================== */ .dark, [data-theme="dark"] { --ln-bg-primary: var(--ln-color-midnight-900); --ln-bg-secondary: var(--ln-color-midnight-800); --ln-bg-card: var(--ln-color-midnight-800); --ln-bg-elevated: var(--ln-color-midnight-700); --ln-text-primary: var(--ln-color-cream-50); --ln-text-secondary: var(--ln-color-cream-300); --ln-text-muted: var(--ln-color-midnight-500); --ln-text-inverse: var(--ln-color-midnight-900); --ln-border: var(--ln-color-midnight-700); --ln-border-strong: var(--ln-color-cream-200); --ln-accent: var(--ln-color-cream-50); --ln-accent-text: var(--ln-color-midnight-900); --ln-accent-hover: var(--ln-color-cream-300); --ln-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --ln-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --ln-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --ln-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6); --ln-backdrop: rgba(0, 0, 0, 0.7); } /* ====================================================================== * PER-APP OVERRIDES — distinct accent + room tint per surface * Apps opt-in by setting in their template. * ====================================================================== */ body[data-app="aweni"] { --ln-accent: var(--ln-color-midnight-900); --ln-bg-primary: var(--ln-room-tint-aweni); } body[data-app="memoriz"] { --ln-accent: var(--ln-color-champagne-500); --ln-bg-primary: var(--ln-room-tint-memoriz); } body[data-app="balancetab"] { --ln-accent: var(--ln-color-blue-600); --ln-bg-primary: var(--ln-room-tint-balancetab); } body[data-app="selecto"] { --ln-accent: var(--ln-color-teal-600); --ln-bg-primary: var(--ln-room-tint-selecto); } body[data-app="games"] { --ln-accent: var(--ln-color-midnight-700); --ln-bg-primary: var(--ln-room-tint-games); } body[data-app="yawmi"] { --ln-accent: var(--ln-color-champagne-700); --ln-bg-primary: var(--ln-room-tint-yawmi); } body[data-app="blog"] { --ln-accent: var(--ln-color-midnight-900); --ln-bg-primary: var(--ln-room-tint-blog); } body[data-app="identity"], body[data-app="cockpit"], body[data-app="portal"] { --ln-accent: var(--ln-color-midnight-900); --ln-bg-primary: var(--ln-room-tint-aweni); } /* In dark mode, the room tints don't apply (we want the unified midnight bg * across all apps). Per-app accents stay distinct so each app keeps identity. */ .dark body[data-app], [data-theme="dark"] body[data-app] { --ln-bg-primary: var(--ln-color-midnight-900); } /* Per-app accent in dark mode = champagne for the brand-coded apps, * cream for the others (so buttons stand out on midnight). */ .dark body[data-app="memoriz"], .dark body[data-app="yawmi"] { --ln-accent: var(--ln-color-champagne-300); } .dark body[data-app="balancetab"] { --ln-accent: var(--ln-color-blue-500); } .dark body[data-app="selecto"] { --ln-accent: var(--ln-color-teal-500); } /* ====================================================================== * Reduced motion — accessibility, applies system-wide. * ====================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --ln-transition-fast: 0.01ms; --ln-transition-default: 0.01ms; --ln-transition-slow: 0.01ms; } }