/* ============================================================================
RIMAY MENU — Colors & Type foundations
----------------------------------------------------------------------------
A bilingual (FR / AR), RTL-ready design system for a modular
restaurant-menu SaaS rooted in Algerian visual culture: Saharan clay
(terracotta), zellige tilework teal, Casbah blue, saffron gold, and a
warm semolina-sand canvas.
Structurally inherited from the Starbucks design language (four-tier brand
color, warm — never white — canvas, layered whisper shadows, confident
humanist type) but fully reskinned for the Maghreb.
Load AFTER the Google Fonts links in the document :
============================================================================ */
/* ============================================================================
QomraArabic — the brand Arabic typeface. Self-hosted, replaces Cairo / Reem
Kufi everywhere. Paths are relative to this file (shared/) → ../fonts/.
============================================================================ */
/* unicode-range pins Qomra to ARABIC codepoints only — Latin (French) text in
an RTL/Arabic block falls through to Readex Pro instead of rendering in Qomra. */
@font-face { font-family: 'QomraArabic'; src: url('../fonts/itfQomraArabic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+1EE00-1EEFF; }
@font-face { font-family: 'QomraArabic'; src: url('../fonts/itfQomraArabic-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+1EE00-1EEFF; }
@font-face { font-family: 'QomraArabic'; src: url('../fonts/itfQomraArabic-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+1EE00-1EEFF; }
@font-face { font-family: 'QomraArabic'; src: url('../fonts/itfQomraArabic-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0660-0669, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+1EE00-1EEFF; }
:root {
/* ---------------------------------------------------------------------- */
/* CANVAS & NEUTRALS — warm Saharan sand, never cold white */
/* ---------------------------------------------------------------------- */
--semolina: #FBF7EE; /* lightest cream — card-on-canvas highlights */
--sand: #F3EDE1; /* PRIMARY PAGE CANVAS — warm sand */
--clay-wash: #EAE0CF; /* ceramic separator / zone wash */
--neutral-cool: #F6F4EF; /* quiet utility surface (menus, form wraps) */
--white: #FFFFFF; /* card & modal surface */
--hairline: #E3D8C6; /* warm divider / input border */
--hairline-soft: #EFE7D8; /* faintest divider */
/* ---------------------------------------------------------------------- */
/* TERRACOTTA — primary brand family (Saharan clay / M'zab architecture) */
/* role-mapped, four-tier, like Starbucks' greens */
/* ---------------------------------------------------------------------- */
--terracotta: #B0492A; /* BRAND — h1, wordmark, dominant signal */
--harissa: #C8572F; /* CTA FILL — primary filled buttons, FAB */
--terracotta-deep: #7E3320; /* pressed / deep clay accents */
--terracotta-light: #F1DBCE; /* pale clay wash / tint surfaces */
/* ---------------------------------------------------------------------- */
/* ZELLIGE TEAL — deep complementary bands (tilework / Mediterranean) */
/* ---------------------------------------------------------------------- */
--zellige: #0E4A41; /* HOUSE — footer, feature bands, deep zones */
--zellige-uplift: #1A6256; /* secondary mid-dark teal (decorative) */
--zellige-blue: #2C6E8C; /* Casbah blue — links / info / decorative */
--mint-light: #D5E7DF; /* pale teal wash / valid-state tint */
/* ---------------------------------------------------------------------- */
/* SAFFRON GOLD — ceremony / premium only (featured dishes, ratings) */
/* the Maghrebi analogue of Starbucks' Rewards gold — never general use */
/* ---------------------------------------------------------------------- */
--saffron: #D29B3C;
--saffron-light: #E6CF9C;
--saffron-lightest: #FBF3E2;
/* ---------------------------------------------------------------------- */
/* SEMANTIC */
/* ---------------------------------------------------------------------- */
--error: #BE3520;
--error-tint: hsl(9 71% 44% / 0.06);
--success: #2E8159;
--success-tint: hsl(152 47% 34% / 0.12);
--warning: #DDA12C;
--halal: #2E8159; /* halal badge green */
--spice: #C8572F; /* spice-level chilli accent */
/* ---------------------------------------------------------------------- */
/* TEXT — warm near-black on light, never pure #000 */
/* ---------------------------------------------------------------------- */
--ink: rgba(38, 26, 18, 0.90); /* primary text on light */
--ink-soft: rgba(38, 26, 18, 0.56); /* secondary / metadata */
--ink-faint: rgba(38, 26, 18, 0.38); /* captions, placeholders */
--on-dark: rgba(255, 255, 255, 1);
--on-dark-soft: rgba(255, 255, 255, 0.72);
--on-dark-faint: rgba(255, 255, 255, 0.48);
--on-terracotta: #FBF7EE; /* text on terracotta surfaces */
/* Black / white alpha ladders (overlays, scrims) */
--black-06: rgba(38,26,18,0.06); --black-12: rgba(38,26,18,0.12);
--black-24: rgba(38,26,18,0.24); --black-40: rgba(38,26,18,0.40);
--white-10: rgba(255,255,255,0.10); --white-20: rgba(255,255,255,0.20);
--white-40: rgba(255,255,255,0.40); --white-70: rgba(255,255,255,0.70);
/* ---------------------------------------------------------------------- */
/* TYPOGRAPHY — bilingual, RTL-ready */
/* ---------------------------------------------------------------------- */
/* Readex Pro carries Latin + Arabic in one family → the universal voice. */
--font-sans: "Readex Pro", "Segoe UI", system-ui, sans-serif;
/* Bricolage Grotesque — warm characterful Latin display headlines. */
--font-display: "Bricolage Grotesque", "Readex Pro", sans-serif;
/* QomraArabic — the brand Arabic face (all AR text & RTL). */
--font-arabic: "QomraArabic", "Readex Pro", sans-serif;
/* Kufic decorative flourish now also rides on QomraArabic. */
--font-kufi: "QomraArabic", "Reem Kufi", serif;
/* Type scale (anchored to 16px body). Latin display uses tight tracking; */
/* Arabic & body sit at 0 — Arabic must never be negatively tracked. */
--text-display: 76px; /* hero display */
--text-jumbo: 54px; /* secondary hero */
--text-h1: 40px; /* page title */
--text-h2: 30px; /* section title */
--text-h3: 22px; /* card / block title */
--text-lg: 19px; /* lead / intro body */
--text-body: 16px; /* default body */
--text-sm: 14px; /* labels, metadata, button text */
--text-xs: 13px; /* captions, float-labels */
--text-2xs: 11px; /* uppercase eyebrows, tag micro */
--tracking-tight: -0.02em; /* Latin display only */
--tracking-normal: 0; /* body, Arabic */
--tracking-wide: 0.08em; /* uppercase eyebrows */
--tracking-wider: 0.16em; /* spaced label caps */
--leading-tight: 1.12;
--leading-snug: 1.3;
--leading-normal: 1.55;
/* ---------------------------------------------------------------------- */
/* SPACING — 4px base */
/* ---------------------------------------------------------------------- */
--space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
--space-5: 32px; --space-6: 40px; --space-7: 48px; --space-8: 64px;
--space-9: 80px;
--gutter: 16px; /* mobile */
--gutter-md: 24px; /* tablet */
--gutter-lg: 40px; /* desktop */
/* ---------------------------------------------------------------------- */
/* RADII — "ceramic tile" softness (intentional divergence from */
/* Starbucks' full pills). Pills reserved for tags/chips. */
/* ---------------------------------------------------------------------- */
--radius-xs: 6px; /* inputs inner, small controls */
--radius-sm: 10px; /* inputs, dropdowns */
--radius-md: 12px; /* buttons */
--radius-lg: 18px; /* cards, menu-item tiles */
--radius-xl: 24px; /* feature panels, modals, hero crates */
--radius-pill: 999px; /* tags, chips, badges, avatars, FAB */
/* ---------------------------------------------------------------------- */
/* ELEVATION — whisper-soft, layered over solid (warm-tinted shadows) */
/* ---------------------------------------------------------------------- */
--shadow-card: 0 0 0.5px rgba(58,38,24,0.14), 0 1px 2px rgba(58,38,24,0.10);
--shadow-raise: 0 1px 3px rgba(58,38,24,0.10), 0 4px 12px rgba(58,38,24,0.10);
--shadow-nav: 0 1px 3px rgba(58,38,24,0.08), 0 2px 2px rgba(58,38,24,0.05), 0 0 2px rgba(58,38,24,0.06);
--shadow-fab: 0 0 6px rgba(58,38,24,0.22), 0 8px 16px rgba(58,38,24,0.18);
--shadow-pop: 0 8px 28px rgba(58,38,24,0.16), 0 2px 6px rgba(58,38,24,0.10);
/* Motion */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 0.18s; --dur: 0.26s; --dur-slow: 0.4s;
--press-scale: 0.97;
}
/* ==========================================================================
SEMANTIC ELEMENT DEFAULTS — opt in by importing this file
========================================================================== */
.rimay {
font-family: var(--font-sans);
color: var(--ink);
background: var(--sand);
font-size: var(--text-body);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.rimay[dir="rtl"], .rimay [dir="rtl"] { font-family: var(--font-arabic); }
/* ── Arabic version: QomraArabic is the sole UI voice ─────────────────────
Drop Readex Pro from every token in RTL so body, headings, labels & nav
all render in Qomra — not Readex's Arabic. Latin glyphs the Arabic face
can't draw (Western digits in prices, brand strings) fall through to the
system sans, never Readex. */
[dir="rtl"] {
--font-sans: "QomraArabic", "Segoe UI", system-ui, sans-serif;
--font-display: "QomraArabic", "Bricolage Grotesque", "Segoe UI", sans-serif;
--font-arabic: "QomraArabic", "Segoe UI", system-ui, sans-serif;
--font-kufi: "QomraArabic", serif;
}
.rimay h1, .r-h1 {
font-family: var(--font-display);
font-size: var(--text-h1);
font-weight: 700;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--terracotta);
text-wrap: balance;
}
.rimay h2, .r-h2 {
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: 600;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--ink);
text-wrap: balance;
}
.rimay h3, .r-h3 {
font-family: var(--font-sans);
font-size: var(--text-h3);
font-weight: 600;
line-height: var(--leading-snug);
color: var(--ink);
}
.r-display {
font-family: var(--font-display);
font-size: var(--text-display);
font-weight: 800;
line-height: 1.02;
letter-spacing: var(--tracking-tight);
color: var(--terracotta);
}
.r-jumbo {
font-family: var(--font-display);
font-size: var(--text-jumbo);
font-weight: 700;
line-height: 1.06;
letter-spacing: var(--tracking-tight);
}
.r-lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--ink-soft); }
.rimay p, .r-body { font-size: var(--text-body); line-height: var(--leading-normal); }
.r-small { font-size: var(--text-sm); }
.r-caption { font-size: var(--text-xs); color: var(--ink-soft); }
.r-eyebrow {
font-family: var(--font-sans);
font-size: var(--text-2xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--harissa);
}
.r-kufi { font-family: var(--font-kufi); font-weight: 600; }
code, .r-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.92em; }