/* ========================================================================== octe-tokens.css — OcteDigital OS design tokens (single source of truth). White mode. Arabic RTL first. Never invent a colour outside this file. ========================================================================== */ :root{ /* Native UI (scrollbars + form controls) follows the ACTIVE app theme, not the OS preference. This replaces the old , which made the browser draw dark/black scrollbars whenever the OS was dark — even in the app's Light Mode. */ color-scheme: light; /* Brand */ --octe-charcoal:#262425; --octe-red:#D43539; --octe-green:#22A74A; --octe-blue:#2F6FDB; --octe-cream:#F9F7EB; /* ACCENT ONLY — occasional warm highlight / nested block; never the page canvas */ /* Surfaces — page canvas is a whisper-soft COOL neutral (NEVER cream); cards are pure white and float via shadow */ --octe-canvas:#F5F6F8; --octe-surface:#FFFFFF; --octe-surface-2:#F7F8FA; --octe-sunken:#EDEFF3; /* Text ladder */ --octe-ink:#262425; --octe-body:#55514F; --octe-muted:#8B8785; --octe-faint:#B4B0AC; /* Lines — neutral cool (match the canvas, not cream) */ --octe-line:#E6E8EC; --octe-line-2:#EFF1F4; /* Tints (icon boxes, chips, chart tracks) */ --octe-red-tint:#FBEBEB; --octe-green-tint:#E7F5EC; --octe-blue-tint:#E9F0FC; --octe-amber:#BE7C1E; --octe-amber-tint:#F7EEDD; /* Radius */ --octe-r-shell:28px; --octe-r-card:22px; --octe-r-in:16px; --octe-r-icon:14px; --octe-r-chip:999px; /* Soft neutral shadows — lift white cards off the near-white canvas */ --octe-shadow-sm:0 1px 2px rgba(24,28,38,.05), 0 8px 24px rgba(24,28,38,.08); --octe-shadow-md:0 2px 8px rgba(24,28,38,.07), 0 20px 44px rgba(24,28,38,.12); --octe-shadow-hero:0 22px 48px rgba(212,53,57,.30); /* Motion (do not speed these up — the slow reveal is the premium feel) */ --octe-count:1400ms; --octe-draw:1200ms; --octe-fill:1000ms; --octe-stagger:90ms; --octe-micro:200ms; --octe-ease-out:cubic-bezier(.22,.61,.36,1); --octe-spring:cubic-bezier(.2,.8,.2,1); /* Type */ --octe-font:"IBM Plex Sans Arabic","Segoe UI",system-ui,-apple-system,Tahoma,"Noto Sans Arabic",sans-serif; --octe-num:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif; } /* Metric colour themes — set on a card/icon; components read --accent, never hardcode. */ .theme-red { --accent:var(--octe-red); --accent-tint:var(--octe-red-tint); } .theme-green { --accent:var(--octe-green); --accent-tint:var(--octe-green-tint); } .theme-blue { --accent:var(--octe-blue); --accent-tint:var(--octe-blue-tint); } .theme-charcoal{ --accent:var(--octe-charcoal); --accent-tint:#ECE9E0; } .theme-amber { --accent:var(--octe-amber); --accent-tint:var(--octe-amber-tint); } /* ========================================================================== Dark theme — the SAME token names, re-valued. Every component reads --octe-*, so redefining the tokens here re-skins the entire app with ZERO duplication of component CSS. The light identity is preserved: the red brand accent stays, and the neutral ladder simply inverts (deep canvas, cards lifted above it, light text). Activated by [data-theme="dark"] on , set before first paint. ========================================================================== */ :root[data-theme="dark"]{ color-scheme: dark; /* dark scrollbars/controls only when the app itself is in Dark Mode */ /* Brand — hues kept; accents nudged brighter so they read on dark surfaces */ --octe-charcoal:#101216; /* the dark hero/promo/tooltip panel — now the deepest layer */ --octe-red:#E4494E; --octe-green:#34B45B; --octe-blue:#4C86EC; --octe-cream:#26221B; /* Surfaces — inverted ladder: canvas deepest, cards lifted above it */ --octe-canvas:#131519; --octe-surface:#1C1F25; --octe-surface-2:#23272E; --octe-sunken:#2A2E36; /* Text ladder — light-on-dark, same four steps */ --octe-ink:#F1F3F5; --octe-body:#C6CAD2; --octe-muted:#8C919B; --octe-faint:#656A73; /* Lines — low-contrast separators on dark */ --octe-line:#2E323A; --octe-line-2:#262A31; /* Tints — translucent brand so an "accent box" glows on any dark surface */ --octe-red-tint:rgba(228,73,78,.16); --octe-green-tint:rgba(52,180,91,.16); --octe-blue-tint:rgba(76,134,236,.18); --octe-amber:#D8A24A; --octe-amber-tint:rgba(216,162,74,.18); /* Shadows — deeper so cards still lift off the dark canvas */ --octe-shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.45); --octe-shadow-md:0 2px 10px rgba(0,0,0,.42), 0 22px 46px rgba(0,0,0,.52); --octe-shadow-hero:0 22px 48px rgba(228,73,78,.26); } /* charcoal-themed KPI cards: the dark accent/tint flips to light-on-dark */ :root[data-theme="dark"] .theme-charcoal{ --accent:#C6CAD2; --accent-tint:rgba(255,255,255,.07); } @media (prefers-reduced-motion: reduce){ :root{ --octe-count:0ms; --octe-draw:0ms; --octe-fill:0ms; --octe-stagger:0ms; --octe-micro:0ms; } }