/* ============================================================================ ALNAQL DESIGN TOKENS — Three-Tier Architecture ============================================================================ TIER 1: Primitives — Raw color/size values, never used directly in components TIER 2: Semantic — Contextual meaning, theme-switchable (default = Manuscript) TIER 3: Component — Scoped tokens for specific UI regions Theme switching: set data-theme on to override semantic layer. Themes defined in themes.css (Night Scholar, High Contrast, Ocean, Classic Print). ============================================================================ */ :root { /* ======================================================================== TIER 1: PRIMITIVES — Raw palette values ======================================================================== */ /* Brown */ --p-brown-50: #FAF5F0; --p-brown-100: #F0E4D6; --p-brown-200: #E0C9AD; --p-brown-300: #CD853F; --p-brown-400: #A0522D; --p-brown-500: #8B4513; --p-brown-600: #6B3410; --p-brown-700: #4A2710; --p-brown-800: #2C1810; --p-brown-900: #1A0E0A; /* Sand */ --p-sand-50: #FFFEF9; --p-sand-100: #FDF9F3; --p-sand-200: #FAF5EC; --p-sand-300: #F5EDE0; --p-sand-400: #F0E4D2; --p-sand-500: #E8D5B7; --p-sand-600: #D4C4A8; --p-sand-700: #B8A080; --p-sand-800: #9A8466; --p-sand-900: #7A6850; /* Gray */ --p-gray-50: #F9FAFB; --p-gray-100: #F3F4F6; --p-gray-200: #E5E7EB; --p-gray-300: #D1D5DB; --p-gray-400: #9CA3AF; --p-gray-500: #6B7280; --p-gray-600: #4B5563; --p-gray-700: #374151; --p-gray-800: #1F2937; --p-gray-900: #111827; /* Slate (for text) */ --p-slate-50: #F8FAFC; --p-slate-100: #F1F5F9; --p-slate-200: #E2E8F0; --p-slate-300: #CBD5E1; --p-slate-400: #94A3B8; --p-slate-500: #64748B; --p-slate-600: #475569; --p-slate-700: #334155; --p-slate-800: #1E293B; --p-slate-900: #0F172A; /* Blue */ --p-blue-50: #EFF6FF; --p-blue-100: #DBEAFE; --p-blue-200: #BFDBFE; --p-blue-300: #93C5FD; --p-blue-400: #60A5FA; --p-blue-500: #3B82F6; --p-blue-600: #2563EB; --p-blue-700: #1D4ED8; --p-blue-800: #1E40AF; --p-blue-900: #1E3A8A; /* Teal */ --p-teal-50: #F0FDFA; --p-teal-100: #CCFBF1; --p-teal-200: #99F6E4; --p-teal-300: #5EEAD4; --p-teal-400: #2DD4BF; --p-teal-500: #14B8A6; --p-teal-600: #0D9488; --p-teal-700: #0F766E; /* Green */ --p-green-50: #F0FDF4; --p-green-100: #DCFCE7; --p-green-200: #BBF7D0; --p-green-300: #86EFAC; --p-green-400: #4ADE80; --p-green-500: #22C55E; --p-green-600: #16A34A; --p-green-700: #15803D; --p-green-800: #166534; --p-green-900: #14532D; /* Amber */ --p-amber-50: #FFFBEB; --p-amber-100: #FEF3C7; --p-amber-200: #FDE68A; --p-amber-300: #FCD34D; --p-amber-400: #FBBF24; --p-amber-500: #F59E0B; --p-amber-600: #D97706; --p-amber-700: #B45309; --p-amber-800: #92400E; --p-amber-900: #78350F; /* Red */ --p-red-50: #FEF2F2; --p-red-100: #FEE2E2; --p-red-200: #FECACA; --p-red-300: #FCA5A5; --p-red-400: #F87171; --p-red-500: #EF4444; --p-red-600: #DC2626; --p-red-700: #B91C1C; --p-red-800: #991B1B; --p-red-900: #7F1D1D; /* Fixed */ --p-white: #FFFFFF; --p-black: #000000; --p-transparent: transparent; /* ======================================================================== TIER 2: SEMANTIC TOKENS — Default theme: Manuscript ======================================================================== */ /* --- Brand / Action --- */ --color-primary: var(--p-brown-500); --color-primary-dark: var(--p-brown-600); --color-primary-darker: var(--p-brown-800); --color-primary-light: var(--p-brown-300); /* Aliases for names components already reference. Both were UNDEFINED, so every `var(--accent-color, #4a90d9)` and `var(--color-primary-hover, #2980b9)` silently rendered its blue fallback — in EVERY theme, including the desert one. That is where the stray blue in the search UI and the home search button's blue hover came from. Declared here rather than per-theme: custom properties resolve at computed-value time, so these follow whichever --color-primary the active [data-theme] block set. */ --color-primary-hover: var(--color-primary-dark); --accent-color: var(--color-primary); /* --- Desert Accents (backward compat) --- */ --color-chocolate: #D2691E; --color-sienna: var(--p-brown-400); --color-peru: var(--p-brown-300); --color-goldenrod: #B8860B; /* --- Match source / target accents --- The match viewer distinguishes the two sides of a match. Formerly raw blue (#3498db) / green (#2ecc71), which clashed with the desert scheme. Kept distinct but on-palette: saddle brown for source, dark goldenrod for target — a warm, clearly separable pairing. Tints/borders are the same hues at low alpha for the metadata pills. */ --color-source: #8B4513; /* saddle brown (p-brown-500) */ --color-source-tint: rgba(139, 69, 19, 0.10); --color-source-border: rgba(139, 69, 19, 0.30); --color-target: #B8860B; /* dark goldenrod */ --color-target-tint: rgba(184, 134, 11, 0.12); --color-target-border: rgba(184, 134, 11, 0.38); /* --- Sand Tones (backward compat) --- */ --color-sand: var(--p-sand-500); --color-sand-light: var(--p-sand-200); --color-sand-lighter: var(--p-sand-50); --color-sand-medium: var(--p-sand-600); --color-sand-footer: var(--p-sand-300); /* --- Surfaces (NEW — for themed backgrounds) --- */ --color-surface-primary: var(--p-sand-100); --color-surface-secondary: var(--p-white); --color-surface-elevated: var(--p-sand-500); --color-surface-overlay: rgba(0, 0, 0, 0.5); --color-surface-sunken: var(--p-sand-200); --color-surface-page: var(--p-white); /* --- Text --- */ --color-text-primary: var(--p-slate-800); --color-text-secondary: var(--p-slate-500); --color-text-muted: var(--p-brown-700); --color-text-inverse: var(--p-white); --color-text-link: var(--p-brown-500); --color-text-link-hover: var(--p-brown-600); /* --- Grays / Neutrals (backward compat) --- */ --color-gray-light: var(--p-gray-100); --color-gray-border: var(--p-gray-200); --color-gray-medium: var(--p-gray-400); --color-gray-slate: var(--p-slate-600); --color-gray-note: var(--p-gray-500); --color-gray-note-bracket: var(--p-gray-400); /* --- Borders (NEW) --- */ --color-border-primary: var(--p-sand-600); --color-border-secondary: var(--p-gray-200); --color-border-subtle: var(--p-gray-100); /* --- Semantic Status --- */ --color-success: #059669; --color-success-light: var(--p-green-50); --color-danger: #CC0000; --color-danger-light: var(--p-red-400); --color-danger-bg: var(--p-red-50); /* pale error-toast background — pairs with --color-danger text (5.4:1) */ --color-info: #4A90A4; --color-info-bg: #E8F4F8; --color-warning: var(--p-amber-500); --color-warning-bg: var(--p-amber-50); /* --- Buttons --- */ --color-button-primary: var(--color-primary); --color-button-primary-hover: var(--color-primary-dark); --color-button-success: #27ae60; --color-button-success-hover: #229954; --color-button-danger: var(--p-red-500); --color-button-danger-hover: var(--p-red-600); --color-button-secondary: var(--p-gray-500); --color-button-secondary-hover: var(--p-gray-600); /* --- Match Density Color Ramp (font color for match count) --- 10-stop perceptual ramp: cool → warm. Used by highlight_processor.rs logarithmic function. Each value must pass WCAG AA contrast on --color-surface-page. */ --color-density-1: #6366F1; /* indigo — 1-2 matches */ --color-density-2: #4F46E5; /* deeper indigo */ --color-density-3: #2563EB; /* blue */ --color-density-4: #0891B2; /* cyan */ --color-density-5: #059669; /* emerald */ --color-density-6: #65A30D; /* lime */ --color-density-7: #CA8A04; /* yellow */ --color-density-8: #EA580C; /* orange */ --color-density-9: #DC2626; /* red */ --color-density-10: #991B1B; /* deep red — max density */ /* Legacy highlight colors (4-tier similarity, backward compat) */ --color-highlight-high: rgba(220, 38, 38, 0.35); --color-highlight-medium: rgba(239, 68, 68, 0.30); --color-highlight-low: rgba(248, 113, 113, 0.25); --color-highlight-minimal: rgba(252, 165, 165, 0.20); /* --- Search Highlight --- */ --color-search-highlight: var(--p-amber-200); --color-search-border: var(--p-amber-400); --color-search-glow: rgba(250, 204, 21, 0.4); /* --- Gradients --- */ --gradient-home: linear-gradient(135deg, var(--p-sand-200) 0%, var(--p-sand-100) 100%); --gradient-button: linear-gradient(135deg, var(--p-sand-500) 0%, var(--p-sand-700) 100%); /* --- Fixed --- */ --color-white: var(--p-white); --color-transparent: var(--p-transparent); /* ======================================================================== TIER 3: COMPONENT TOKENS ======================================================================== */ /* Navigation bar */ --nav-bg: var(--color-surface-elevated); --nav-text: var(--color-text-primary); --nav-border: var(--color-border-primary); --nav-shadow: var(--shadow-nav); /* Sidebar */ --sidebar-bg: var(--color-surface-secondary); --sidebar-border: var(--color-border-secondary); --sidebar-active: var(--color-primary); /* Footer */ --footer-bg: var(--color-sand-footer); --footer-text: var(--color-text-primary); --footer-border: var(--color-border-primary); /* Cards */ --card-bg: var(--color-surface-secondary); --card-border: var(--color-border-secondary); --card-shadow: var(--shadow-md); --card-hover-shadow: var(--shadow-lg); /* Panel rail — vertical binder-tab strip */ --rail-bg: var(--color-surface-elevated); --rail-border: var(--color-border-secondary); --rail-tab-color: var(--color-text-secondary); --rail-tab-active-bg: var(--color-surface-secondary); --rail-tab-active-color: var(--color-primary); --rail-tab-hover-bg: var(--color-surface-sunken); /* Panel content (expandable from rail) */ --panel-bg: var(--color-surface-secondary); --panel-shadow: 0 0 20px rgba(0, 0, 0, 0.15); --panel-border: var(--color-border-secondary); /* Page / document reading area */ --page-bg: var(--color-surface-page); --page-text: var(--color-text-primary); /* ======================================================================== LAYOUT DIMENSIONS ======================================================================== */ --nav-height: 60px; --footer-height: 70px; --sidebar-width: 300px; --sidebar-collapsed: 40px; --rail-width: 48px; --rail-tab-size: 44px; --panel-width: 300px; --content-max-width: 1400px; --content-max-width-medium: 1200px; /* ======================================================================== SPACING SCALE — 4px grid ======================================================================== */ /* rem so spacing scales with the fluid root font-size (see html{} in typography.css) — the whole UI stays proportional across screen sizes. Values equal the old px at the 16px design root. */ --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-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-15: 3.75rem; /* 60px */ --space-20: 5rem; /* 80px */ /* ======================================================================== TYPOGRAPHY ======================================================================== */ /* Font families — role-based */ --font-display: 'Aref Ruqaa', 'Amiri', serif; /* Titles, hero text */ --font-heading: 'Noto Naskh Arabic', 'Amiri', serif; /* Section headings */ --font-primary: 'Amiri', 'Traditional Arabic', serif; /* Body / reading text */ --font-poetry: 'Scheherazade New', 'Amiri', serif; /* Poetry passages */ --font-ui: 'Noto Sans Arabic', 'Segoe UI', sans-serif; /* Labels, UI chrome */ --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* Font sizes */ --font-size-xs: 0.8125rem; /* 13px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.0625rem; /* 17px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ /* Line heights */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; --line-height-loose: 1.8; --line-height-arabic: 2.2; /* Arabic body with diacritics */ --line-height-poetry: 2.5; /* Poetry line spacing */ /* Font weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ======================================================================== BORDER RADIUS ======================================================================== */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-full: 9999px; /* ======================================================================== SHADOWS — theme-aware (dark themes override these) ======================================================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.10); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.10); --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.10); --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.10), 0 20px 48px rgba(0, 0, 0, 0.10); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.12); --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.10); --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-sidebar: 2px 0 8px rgba(0, 0, 0, 0.08); /* Search shadows */ --shadow-search: 0 2px 8px rgba(250, 204, 21, 0.4); --shadow-search-strong: 0 0 8px rgba(250, 204, 21, 0.6); /* ======================================================================== Z-INDEX LAYERS ======================================================================== */ --z-base: 1; --z-sidebar: 50; --z-header: 90; --z-dropdown: 100; --z-panel: 200; --z-modal: 500; --z-nav: 1000; --z-overlay: 1100; /* modal / suggestion overlays that must clear the fixed nav+footer (--z-nav); the workbench-CSS lane consumes var(--z-overlay, 1100) */ --z-tooltip: 2000; /* ======================================================================== MOTION TOKENS — timing and easing ======================================================================== */ /* Durations */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; /* Easing curves */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Composed transitions (backward compat) */ --transition-fast: var(--duration-fast) var(--ease-out); --transition-base: var(--duration-base) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); --transition-color: color var(--duration-base) var(--ease-out); --transition-bg: background-color var(--duration-base) var(--ease-out); --transition-transform: transform var(--duration-base) var(--ease-out); --transition-shadow: box-shadow var(--duration-base) var(--ease-out); --transition-all: all var(--duration-base) var(--ease-out); /* Focus */ --focus-outline-color: var(--color-primary); --focus-outline-width: 2px; --focus-outline-offset: 2px; } /* ============================================================================ REDUCED MOTION — respect user preference ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-color: color 0ms; --transition-bg: background-color 0ms; --transition-transform: transform 0ms; --transition-shadow: box-shadow 0ms; --transition-all: all 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================================ GLOBAL FOCUS STATES — Accessibility ============================================================================ */ :focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } :focus:not(:focus-visible) { outline: none; }