/* ------------------------------------------------------------------ * * Mirsam (مرسم) — brand design tokens (canonical; mirror of CLAUDE.md) * Source of truth for the rendered site. Light + Dark themes via CSS * custom properties: components reference var(--c-*) only, so flipping * the theme is just swapping the variable block — no per-component dark CSS. * * Theme resolution: * :root -> light (default) * :root[data-theme="dark"] -> dark (explicit / JS-set) * @media(prefers-color-scheme:dark) -> dark when no explicit choice (no-JS) * * RGB channel tokens (--c-*-rgb) exist so translucent glows/shadows/overlays * can be theme-aware: rgba(var(--c-accent-rgb), 0.5). * ------------------------------------------------------------------ */ :root { /* Colours (by role) — LIGHT */ --c-primary: #1F2421; /* Ink Charcoal — brand, headings, dark UI */ --c-primary-rgb: 31,36,33; --c-accent: #C56B4A; /* Terracotta — CTAs, highlights, hover */ --c-accent-rgb: 197,107,74; --c-accent-strong: #B16043; /* Terracotta darkened ~10% — button hover */ --c-bg: #F7F4EF; /* Alabaster — page background */ --c-bg-rgb: 247,244,239; --c-surface: #FFFFFF; /* Card / raised surface */ --c-surface-rgb: 255,255,255; --c-text: #1F2421; /* Primary text */ --c-text-rgb: 31,36,33; --c-text-muted: #6B6660; /* Secondary text */ --c-border: #E8E4DF; /* Subtle border */ --c-on-accent: #2A150C; /* readable text on a terracotta fill */ --c-white: #FFFFFF; /* Header / overlay surfaces (theme-aware translucency) */ --c-header-bg: rgba(247,244,239,0.82); --c-header-bg-solid:rgba(247,244,239,0.97); /* Fonts */ --f-ar: 'IBM Plex Sans Arabic', system-ui, sans-serif; /* primary RTL family */ --f-lat: 'IBM Plex Sans', system-ui, sans-serif; /* Latin / digits */ /* Fluid type — matches the brand scale (mobile -> desktop), no breakpoint jumps. H1 36->56 · H2 28->40 · H3 20->24 · Body 16->17 · Small 14 */ --fs-h1: clamp(2.25rem, 1.66rem + 2.63vw, 3.5rem); --fs-h2: clamp(1.75rem, 1.39rem + 1.58vw, 2.5rem); --fs-h3: clamp(1.25rem, 1.13rem + 0.53vw, 1.5rem); --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-sm: 0.875rem; /* 14px */ /* Line-heights (per brand scale) */ --lh-h1: 1.15; --lh-h2: 1.2; --lh-h3: 1.3; --lh-body: 1.7; --lh-sm: 1.5; /* Spacing — 8px base (4 is the only sub-step) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; /* Radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; /* Shadows (ink-tinted, soft) — LIGHT */ --shadow-sm: 0 1px 2px rgba(31,36,33,0.04), 0 1px 3px rgba(31,36,33,0.06); --shadow-md: 0 4px 16px rgba(31,36,33,0.07), 0 1px 4px rgba(31,36,33,0.05); --shadow-lg: 0 18px 48px rgba(31,36,33,0.12), 0 4px 12px rgba(31,36,33,0.06); /* Layout */ --maxw: 1120px; --gutter: clamp(16px, 4.2vw, 24px); /* fluid section side padding */ --ease: cubic-bezier(.16, 1, .3, 1); /* Motion timing */ --t-theme: 0.3s; /* light<->dark crossfade */ } /* ---------------- DARK theme (explicit) ---------------- */ :root[data-theme="dark"] { --c-primary: #E9E4DC; /* Light Ink */ --c-primary-rgb: 233,228,220; --c-accent: #D98A66; /* Terracotta (light) */ --c-accent-rgb: 217,138,102; --c-accent-strong: #C37C5C; --c-bg: #16110D; /* Deep */ --c-bg-rgb: 22,17,13; --c-surface: #211C17; --c-surface-rgb: 33,28,23; --c-text: #F2EEE8; --c-text-rgb: 242,238,232; --c-text-muted: #A39C92; --c-border: #2A231C; --c-on-accent: #1A0E07; --c-white: #FFFFFF; /* Keep Kadence's global palette (parent-theme heading/text colours) in step with dark, so headings/text don't stay light-mode ink on a dark background. */ --global-palette1: #E9E4DC; --global-palette2: #D98A66; --global-palette3: #F2EEE8; --global-palette4: #A39C92; --global-palette5: #2A231C; --global-palette6: #16110D; --global-palette7: #211C17; --global-palette8: #C37C5C; --global-palette9: #FFFFFF; --c-header-bg: rgba(22,17,13,0.78); --c-header-bg-solid:rgba(22,17,13,0.97); --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 4px 16px rgba(0,0,0,0.40), 0 1px 4px rgba(0,0,0,0.30); --shadow-lg: 0 18px 48px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.40); } /* ---------------- DARK theme (system pref, no explicit choice / no-JS) ----- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --c-primary: #E9E4DC; --c-primary-rgb: 233,228,220; --c-accent: #D98A66; --c-accent-rgb: 217,138,102; --c-accent-strong: #C37C5C; --c-bg: #16110D; --c-bg-rgb: 22,17,13; --c-surface: #211C17; --c-surface-rgb: 33,28,23; --c-text: #F2EEE8; --c-text-rgb: 242,238,232; --c-text-muted: #A39C92; --c-border: #2A231C; --c-on-accent: #1A0E07; --c-white: #FFFFFF; --global-palette1: #E9E4DC; --global-palette2: #D98A66; --global-palette3: #F2EEE8; --global-palette4: #A39C92; --global-palette5: #2A231C; --global-palette6: #16110D; --global-palette7: #211C17; --global-palette8: #C37C5C; --global-palette9: #FFFFFF; --c-header-bg: rgba(22,17,13,0.78); --c-header-bg-solid:rgba(22,17,13,0.97); --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 4px 16px rgba(0,0,0,0.40), 0 1px 4px rgba(0,0,0,0.30); --shadow-lg: 0 18px 48px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.40); } } /* Editor canvas theming. The iframed canvas never receives data-theme from the front-end pre-paint * JS (it doesn't run there), so on an OS set to dark the content would flip via * @media(prefers-color-scheme:dark) while the editor UI stays light — a "mixed" canvas. * .editor-styles-wrapper is the canvas (closer to the content than :root), so re-declaring the * LIGHT tokens here pins the canvas to LIGHT by default regardless of OS / media — no mixed flash. * The editor toggle (editor.js) sets data-theme="dark" on the canvas to preview DARK; the * paired rule below then re-declares the DARK tokens so the whole canvas (incl. [data-theme="dark"] .X * component rules) flips together. Users can edit in either mode. */ .editor-styles-wrapper { color-scheme: light; --c-primary: #1F2421; --c-primary-rgb: 31,36,33; --c-accent: #C56B4A; --c-accent-rgb: 197,107,74; --c-accent-strong: #B16043; --c-bg: #F7F4EF; --c-bg-rgb: 247,244,239; --c-surface: #FFFFFF; --c-surface-rgb: 255,255,255; --c-text: #1F2421; --c-text-rgb: 31,36,33; --c-text-muted: #6B6660; --c-border: #E8E4DF; --c-on-accent: #2A150C; --c-header-bg: rgba(247,244,239,0.82); --c-header-bg-solid: rgba(247,244,239,0.97); --shadow-sm: 0 1px 2px rgba(31,36,33,0.04), 0 1px 3px rgba(31,36,33,0.06); --shadow-md: 0 4px 16px rgba(31,36,33,0.07), 0 1px 4px rgba(31,36,33,0.05); --shadow-lg: 0 18px 48px rgba(31,36,33,0.12), 0 4px 12px rgba(31,36,33,0.06); --global-palette1: #1F2421; --global-palette2: #C56B4A; --global-palette3: #1F2421; --global-palette4: #6B6660; --global-palette5: #E8E4DF; --global-palette6: #F7F4EF; --global-palette7: #FFFFFF; --global-palette8: #B16043; --global-palette9: #FFFFFF; } /* Toggled dark preview — editor.js sets data-theme="dark" on the canvas . */ [data-theme="dark"] .editor-styles-wrapper { color-scheme: dark; --c-primary: #E9E4DC; --c-primary-rgb: 233,228,220; --c-accent: #D98A66; --c-accent-rgb: 217,138,102; --c-accent-strong: #C37C5C; --c-bg: #16110D; --c-bg-rgb: 22,17,13; --c-surface: #211C17; --c-surface-rgb: 33,28,23; --c-text: #F2EEE8; --c-text-rgb: 242,238,232; --c-text-muted: #A39C92; --c-border: #2A231C; --c-on-accent: #1A0E07; --c-header-bg: rgba(22,17,13,0.78); --c-header-bg-solid: rgba(22,17,13,0.97); --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 4px 16px rgba(0,0,0,0.40), 0 1px 4px rgba(0,0,0,0.30); --shadow-lg: 0 18px 48px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.40); --global-palette1: #E9E4DC; --global-palette2: #D98A66; --global-palette3: #F2EEE8; --global-palette4: #A39C92; --global-palette5: #2A231C; --global-palette6: #16110D; --global-palette7: #211C17; --global-palette8: #C37C5C; --global-palette9: #FFFFFF; }