/* ========================================================================== SALONI — Design tokens World: النقش / The Drawn Line. See DESIGN.md §2–§5. Rose is the primary and owns whole regions; green is the support accent; black is the night ground. ========================================================================== */ :root { /* ---- raw palette (never used directly in components) ---------------- */ --mist: #f4f3f1; --peony: #f2d1d4; --mauve: #d8959b; --sage: #829672; --evergreen: #344c3d; --ink: #0f0b0d; /* black, carrying the faintest rose cast */ /* tints + shades derived from the pinned five */ --mist-2: #eae8e4; --mist-3: #ded9d3; --peony-2: #f8e6e8; --peony-3: #e8b9be; --mauve-2: #c67b83; --mauve-3: #a95f68; --mauve-4: #a24b57; /* deep rose — the ACCENT: ink on the light ground */ --mauve-5: #8c434f; /* the FIELD is a different job from the accent: it is a whole region of colour with white text standing on it, held for a full screen. At the accent's saturation that reads as glare, so the field keeps the hue and drops saturation + lightness — calmer to sit in, and it lifts the whole on-field set (text 6.8:1, dim 4.7:1, line 5.2:1). */ --wine: #79444b; --wine-2: #663840; --sage-2: #9bab8d; --sage-3: #667a58; --evergreen-2:#283b2f; --evergreen-3:#1b291f; --plum: #2a171d; /* black with a rose cast — the dark field */ --plum-2: #1d0f14; --ink-2: #171114; --ink-3: #221a1d; /* ---- spacing scale (1 step = 4px at root) --------------------------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --s-13: 10rem; --s-14: 13rem; /* section rhythm — more space above a heading than below it. Connectors already carry their own height, so section padding stays modest or the two stack into a void. */ --section-pad: clamp(3.5rem, 6.5vw, 6.5rem); --gutter: clamp(1.25rem, 4vw, 4rem); --measure: 68ch; --measure-ar: 62ch; --maxw: 84rem; --maxw-wide: 96rem; /* ---- type ----------------------------------------------------------- */ /* Arabic display was Reem Kufi. Kufic is a monumental face, not a reading one: at headline size its monolinear, grid-drawn letterforms flatten the tooth of the script and Arabic readers slow down on it — the client's own report. Tajawal keeps the geometric, single-stroke construction the ornament is made of (DESIGN.md §3) while restoring normal Naskh proportions, so the headlines read at a glance. */ --ff-display-ar: "Tajawal", "Almarai", system-ui, sans-serif; --ff-display-en: "Marcellus", "Archivo", Georgia, serif; --ff-body-ar: "Almarai", "Tajawal", system-ui, sans-serif; --ff-body-en: "Archivo", system-ui, -apple-system, sans-serif; /* resolved per in base.css */ --ff-display: var(--ff-display-ar); --ff-body: var(--ff-body-ar); --fs-hero: clamp(2.9rem, 7.4vw, 6.75rem); --fs-h1: clamp(2.35rem, 5.6vw, 4.6rem); --fs-h2: clamp(1.85rem, 3.6vw, 3.05rem); --fs-h3: clamp(1.25rem, 2.1vw, 1.6rem); --fs-lead: clamp(1.05rem, 1.55vw, 1.3rem); --fs-body: clamp(.98rem, 1.1vw, 1.06rem); --fs-sm: .9rem; --fs-xs: .795rem; --fs-label: .715rem; --lh-display: 1.06; --lh-head: 1.18; --lh-body: 1.75; --tracking-label: .16em; /* ---- lines, radii, rings -------------------------------------------- */ --hair: 1px; --stroke: 1.5px; --r-sm: 2px; --focus-w: 2px; --focus-off: 2px; /* ---- motion ---------------------------------------------------------- */ /* the two beats: a mark is DRAWN on, then CURES (deepens as it sets) */ --e-draw: cubic-bezier(.22,.61,.36,1); --e-out: cubic-bezier(.16,1,.3,1); --t-micro: 180ms; --t-entry: 520ms; --t-cure: 600ms; /* read by motion.js — keep the unit */ --z-nav: 60; --z-drawer: 70; } /* ========================================================================== LIGHT — "paste drawn on skin" Mist ground; ROSE is the primary and owns whole regions; sage/evergreen drop to the support accent; the line is peony. ========================================================================== */ [data-theme="light"] { --bg: var(--mist); --bg-2: #ffffff; --bg-sunk: var(--mist-2); /* the committed field — owns entire sections */ --field: var(--wine); --field-2: var(--wine-2); --on-field: #fdf4f5; --on-field-dim: #eac6cb; --on-field-line: var(--peony); --fg: #201619; --fg-2: #4e4247; --fg-3: #786a6f; --line: #dcd5d6; --line-2: #c4babc; --line-strong: #201619; --accent: var(--mauve-4); --accent-soft: var(--mauve-3); --accent-wash: var(--peony-2); --accent-on: #ffffff; --leaf: var(--sage-3); --leaf-soft: var(--sage); /* sage-3 as a STROKE clears the 3:1 bar for non-text, but as small text on the mist ground it lands at 4.2:1 — under AA. The pinned swatch stays; green copy takes this darker step instead. */ --leaf-ink: #5c6f4e; --ok: var(--leaf-ink); --warn: #a8762f; --err: #a63a45; color-scheme: light; } /* ========================================================================== DARK — "the salon after closing" Black ground with a rose cast; the field deepens to plum rather than inverting; the line lifts to peony so it reads as lit, not printed. ========================================================================== */ [data-theme="dark"] { --bg: var(--ink); --bg-2: var(--ink-2); --bg-sunk: #090708; --field: var(--plum); --field-2: var(--plum-2); --on-field: #f4e9eb; --on-field-dim: #c2a3a8; --on-field-line: var(--peony); --fg: #efe9ea; --fg-2: #bcb0b3; --fg-3: #8d8085; --line: #322a2c; --line-2: #453b3e; --line-strong: #d6cccf; --accent: var(--peony); --accent-soft: var(--mauve); --accent-wash: #2a1b1f; --accent-on: var(--ink); --leaf: var(--sage-2); --leaf-soft: var(--sage); /* on the night ground sage-2 is already 8:1, so text and stroke agree */ --leaf-ink: var(--sage-2); --ok: var(--sage-2); --warn: #d3a253; --err: #e08b95; color-scheme: dark; }