/* ========================================================================== Awan (أوان) — Design Tokens -------------------------------------------------------------------------- Machine-readable implementation of docs/awan/brand/design-system.md. Import once at the app root: @import "./design-tokens.css"; Dark theme is the brand default (":root"). Light theme is activated with: Rules for consumers: - Use the semantic tokens (--awan-bg-*, --awan-text-*, --awan-accent-*), not the raw scales, in components. - RTL-first: pair these tokens with CSS logical properties only. - No raw hex values in component CSS. ========================================================================== */ :root { /* ------------------------------------------------------------------ */ /* 1. Raw scales (dark theme values) — reference via semantic tokens */ /* ------------------------------------------------------------------ */ /* Desert neutrals — warm near-black "Desert Night" range */ --awan-night-950: #0C0A08; --awan-night-900: #12100D; --awan-night-800: #1B1813; --awan-night-700: #242019; --awan-night-600: #2D2820; --awan-night-500: #37312A; --awan-night-400: #4A4234; /* Warm sand text range */ --awan-sand-100: #F2EDE4; --awan-sand-200: #E4DCCC; --awan-sand-300: #C9BFAE; --awan-sand-500: #9C9282; /* Palm green */ --awan-green-900: #0A3325; --awan-green-700: #0E4A33; --awan-green-600: #146043; --awan-green-500: #2E9E77; --awan-green-400: #4CBB92; --awan-green-300: #7FD3B1; --awan-green-100: #DDEFE7; --awan-green-soft: rgba(46, 158, 119, 0.14); /* Dallah gold */ --awan-gold-600: #9A7514; --awan-gold-500: #C2921B; --awan-gold-400: #D9A83C; --awan-gold-300: #E8C06A; --awan-gold-soft: rgba(217, 168, 60, 0.14); /* Semantic hues */ --awan-red-500: #E2604D; --awan-red-700: #C23B28; --awan-red-soft: rgba(226, 96, 77, 0.14); --awan-amber-500: #E0A44B; --awan-amber-700: #9A6A12; --awan-amber-soft: rgba(224, 164, 75, 0.14); --awan-teal-500: #6FA8A0; --awan-teal-700: #3D7470; --awan-teal-soft: rgba(111, 168, 160, 0.14); /* ------------------------------------------------------------------ */ /* 2. Semantic color tokens (dark — default) */ /* ------------------------------------------------------------------ */ --awan-bg-base: var(--awan-night-900); /* app background */ --awan-bg-surface: var(--awan-night-800); /* cards, panels */ --awan-bg-raised: var(--awan-night-700); /* elevated surfaces */ --awan-bg-overlay: var(--awan-night-600); /* modals, hovers */ --awan-bg-input: var(--awan-night-700); /* form fields */ --awan-border: var(--awan-night-500); --awan-border-strong: var(--awan-night-400); --awan-text-primary: var(--awan-sand-100); --awan-text-secondary: var(--awan-sand-300); --awan-text-muted: var(--awan-sand-500); --awan-text-on-accent: #0E1A14; /* dark ink on green */ --awan-text-on-gold: #241A05; /* dark ink on gold */ --awan-accent: var(--awan-green-500); --awan-accent-hover: var(--awan-green-400); --awan-accent-pressed: var(--awan-green-600); --awan-accent-soft: var(--awan-green-soft); --awan-gold: var(--awan-gold-400); --awan-gold-hover: var(--awan-gold-300); --awan-gold-accent-soft: var(--awan-gold-soft); --awan-success: var(--awan-green-400); --awan-success-soft: rgba(76, 187, 146, 0.14); --awan-warning: var(--awan-amber-500); --awan-warning-soft: var(--awan-amber-soft); --awan-danger: var(--awan-red-500); --awan-danger-soft: var(--awan-red-soft); --awan-info: var(--awan-teal-500); --awan-info-soft: var(--awan-teal-soft); --awan-scrim: rgba(9, 8, 6, 0.65); /* ------------------------------------------------------------------ */ /* 3. Elevation (dark theme: lighter surface + soft black shadow) */ /* ------------------------------------------------------------------ */ --awan-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --awan-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.40); --awan-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.50); --awan-shadow-focus: 0 0 0 3px rgba(46, 158, 119, 0.35); --awan-shadow-focus-danger: 0 0 0 3px rgba(226, 96, 77, 0.35); /* ------------------------------------------------------------------ */ /* 4. Typography (Arabic-first) */ /* IBM Plex Sans Arabic, Noto Kufi Arabic, Amiri — all SIL OFL, */ /* load via Google Fonts with font-display: swap. */ /* ------------------------------------------------------------------ */ --awan-font-ui: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; --awan-font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif; --awan-font-brand: "Amiri", "IBM Plex Sans Arabic", serif; /* Type scale — tuned for Arabic (larger base, taller line-heights) */ --awan-text-xs: 0.75rem; /* 12px — captions, badges */ --awan-text-sm: 0.8125rem; /* 13px — secondary table cells */ --awan-text-base: 0.9375rem;/* 15px — body default */ --awan-text-md: 1.0625rem; /* 17px — emphasized body */ --awan-text-lg: 1.25rem; /* 20px — card/modal titles */ --awan-text-xl: 1.5rem; /* 24px — page titles */ --awan-text-2xl: 1.875rem; /* 30px — hero numbers */ --awan-text-3xl: 2.375rem; /* 38px — display only */ --awan-leading-tight: 1.3; --awan-leading-heading: 1.4; --awan-leading-body: 1.7; --awan-leading-caption: 1.6; --awan-weight-regular: 400; --awan-weight-medium: 500; --awan-weight-semibold: 600; --awan-weight-bold: 700; /* ------------------------------------------------------------------ */ /* 5. Spacing (4px base — use with logical properties) */ /* ------------------------------------------------------------------ */ --awan-space-1: 0.25rem; /* 4px */ --awan-space-2: 0.5rem; /* 8px */ --awan-space-3: 0.75rem; /* 12px */ --awan-space-4: 1rem; /* 16px */ --awan-space-5: 1.5rem; /* 24px */ --awan-space-6: 2rem; /* 32px */ --awan-space-7: 3rem; /* 48px */ --awan-space-8: 4rem; /* 64px */ /* ------------------------------------------------------------------ */ /* 6. Radius */ /* ------------------------------------------------------------------ */ --awan-radius-sm: 6px; /* badges, chips */ --awan-radius-md: 10px; /* buttons, inputs */ --awan-radius-lg: 14px; /* cards, tables */ --awan-radius-xl: 20px; /* modals, drawers */ --awan-radius-full: 9999px; /* ------------------------------------------------------------------ */ /* 7. Motion */ /* ------------------------------------------------------------------ */ --awan-duration-fast: 120ms; --awan-duration-base: 200ms; --awan-duration-slow: 320ms; --awan-ease: cubic-bezier(0.2, 0, 0, 1); /* ------------------------------------------------------------------ */ /* 8. Layout */ /* ------------------------------------------------------------------ */ --awan-sidebar-width: 260px; --awan-topbar-height: 64px; --awan-content-max: 1280px; --awan-z-dropdown: 100; --awan-z-sticky: 200; --awan-z-drawer: 300; --awan-z-modal: 400; --awan-z-toast: 500; color-scheme: dark; } /* ========================================================================== Light theme variant — "Warm sand". Activated with data-theme="light". ========================================================================== */ [data-theme="light"] { /* Desert neutrals inverted to warm sand range */ --awan-bg-base: #FAF6EE; --awan-bg-surface: #FFFDF8; --awan-bg-raised: #FFFDF8; --awan-bg-overlay: #F3EDE0; --awan-bg-input: #FFFFFF; --awan-border: #E3DACA; --awan-border-strong: #CFC3AC; --awan-text-primary: #221D15; --awan-text-secondary: #5C5344; --awan-text-muted: #837663; --awan-text-on-accent: #FFFFFF; --awan-text-on-gold: #241A05; /* Deeper green for AA contrast on light backgrounds */ --awan-accent: var(--awan-green-700); --awan-accent-hover: var(--awan-green-600); --awan-accent-pressed: var(--awan-green-900); --awan-accent-soft: rgba(20, 96, 67, 0.10); --awan-gold: var(--awan-gold-600); --awan-gold-hover: var(--awan-gold-500); --awan-gold-accent-soft: rgba(154, 117, 20, 0.10); --awan-success: var(--awan-green-600); --awan-success-soft: rgba(20, 96, 67, 0.10); --awan-warning: var(--awan-amber-700); --awan-warning-soft: rgba(154, 106, 18, 0.10); --awan-danger: var(--awan-red-700); --awan-danger-soft: rgba(194, 59, 40, 0.10); --awan-info: var(--awan-teal-700); --awan-info-soft: rgba(61, 116, 112, 0.10); --awan-scrim: rgba(34, 29, 21, 0.40); /* Warm-tinted light-theme shadows */ --awan-shadow-1: 0 1px 2px rgba(34, 29, 21, 0.08); --awan-shadow-2: 0 4px 12px rgba(34, 29, 21, 0.10); --awan-shadow-3: 0 12px 32px rgba(34, 29, 21, 0.16); --awan-shadow-focus: 0 0 0 3px rgba(14, 74, 51, 0.25); --awan-shadow-focus-danger: 0 0 0 3px rgba(194, 59, 40, 0.25); color-scheme: light; } /* -------------------------------------------------------------------------- NOTE: dark is the brand default and always the initial paint. If a "follow system" mode is ever wanted, gate it behind an explicit user setting — do not silently auto-switch on prefers-color-scheme. -------------------------------------------------------------------------- */ /* Respect reduced motion globally */ @media (prefers-reduced-motion: reduce) { :root { --awan-duration-fast: 0ms; --awan-duration-base: 0ms; --awan-duration-slow: 0ms; } }