/* ============================================================ وناااسة (Wanaaasah) — Colors & Type Foundation Dual-theme · Soft Neo-Brutalism · RTL-first ────────────────────────────────────────────────────────── Usage: — terracotta/warm (dashboard, shop, landing, auth) — purple/playful (huroof, buzzer, in-game) Default: site (no attribute, or data-theme="site") ============================================================ */ @font-face { font-family: "Blabeloo"; src: url("Blabeloo-font-v.1.0.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap'); /* ─── THEME A · site (default) · terracotta + yellow ─────────────── */ :root, :root[data-theme="site"] { /* Palette */ --t-primary: #c64a22; /* terracotta — header/footer */ --t-cta: #f9d82e; /* yellow — primary CTA */ --t-page: #faf9f7; /* page bg */ --t-surface: #ffffff; /* cards */ --t-cream: #f2eadf; /* warm cream sections */ --t-link: #2b539f; /* blue — links, secondary */ --t-success: #296230; /* forest green */ --t-ink: #2c3e50; /* border DNA + heading text */ --t-muted: #4a4045; /* muted text */ /* Shared brights available in both themes (for team colors, badges) */ --t-warn: #c62828; --t-orange: #e76f2e; /* body-text orange from live dashboard */ /* Semantic */ --bg: var(--t-page); --bg-card: var(--t-surface); --bg-cream: var(--t-cream); --bg-primary: var(--t-primary); --ink: var(--t-ink); --ink-muted: var(--t-muted); --ink-soft: rgba(44, 62, 80, 0.5); --cta: var(--t-cta); --cta-ink: var(--t-ink); --accent: var(--t-link); --link: var(--t-link); --success: var(--t-success); --warn: var(--t-warn); /* Brand-stroke tokens for the logo wordmark */ --brand-fill: var(--t-cta); --brand-stroke: var(--t-ink); } /* ─── THEME B · game · purple + orange (default for Huroof) ──────── */ :root[data-theme="game"], :root[data-theme="huroof"] { /* Palette */ --t-primary: #6E026F; /* deep purple — page bg */ --t-cta: #FA891A; /* orange — primary CTA */ --t-page: #6E026F; --t-surface: #FFFFFF; --t-cream: #F1E6C9; /* cream cards */ --t-link: #4ECDC4; /* teal */ --t-success: #38A169; --t-ink: #2A0142; /* near-black purple */ --t-muted: rgba(42, 1, 66, 0.68); --t-warn: #FF6B6B; --t-orange: #FA891A; /* Accents unique to game theme */ --t-magenta: #AB2DAD; --t-yellow: #FFD93D; --t-teal: #4ECDC4; /* Semantic overrides */ --bg: var(--t-page); --bg-card: var(--t-cream); --bg-cream: var(--t-cream); --bg-primary: var(--t-primary); --ink: var(--t-ink); --ink-muted: var(--t-muted); --ink-soft: rgba(42, 1, 66, 0.45); --cta: var(--t-cta); --cta-ink: var(--t-ink); --accent: var(--t-magenta); --link: var(--t-teal); --success: var(--t-success); --warn: var(--t-warn); --brand-fill: var(--t-yellow); --brand-stroke: var(--t-ink); } /* ─── Legacy aliases · keep old preview cards & early components working. Prefer the new semantic names in new work. */ :root, :root[data-theme="site"] { --w-yellow: #FFD93D; --w-orange: #FA891A; --w-magenta: #AB2DAD; --w-teal: #4ECDC4; --w-coral: #FF6B6B; --w-green: #38A169; --w-purple-deep: #6E026F; --w-purple-ink: #2A0142; --w-cream: #F1E6C9; } :root[data-theme="game"] { --w-yellow: #FFD93D; --w-orange: #FA891A; --w-magenta: #AB2DAD; --w-teal: #4ECDC4; --w-coral: #FF6B6B; --w-green: #38A169; --w-purple-deep: #6E026F; --w-purple-ink: #2A0142; --w-cream: #F1E6C9; } /* ─── SHARED tokens (theme-independent) ──────────────────────────── */ :root { /* Shadows — hard offset only, zero blur, always ink-colored */ --shadow-xs: 2px 2px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink); --shadow: 4px 4px 0 var(--ink); --shadow-md: 5px 5px 0 var(--ink); --shadow-lg: 6px 6px 0 var(--ink); --shadow-xl: 8px 8px 0 var(--ink); /* Borders */ --bw-hair: 2px; --bw: 2.5px; --bw-chunky: 3px; --bw-beast: 4px; /* Radii */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Motion */ --ease-snappy: cubic-bezier(0.175, 0.885, 0.32, 1.275); --dur-press: 80ms; --dur-ui: 150ms; --dur-enter: 350ms; /* Type */ --font-display: "Blabeloo", "Tajawal", "SF Arabic", sans-serif; --font-body: "Tajawal", "SF Arabic", "Cairo", "Segoe UI", system-ui, sans-serif; } /* ─── Base type ─────────────────────────────────────────────── */ html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.6; direction: rtl; } h1, h2, h3, h4, h5, h6, .display, .brand-font { font-family: var(--font-display); color: var(--ink); line-height: 1.15; font-weight: 900; } h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: 0.5px; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); } h3 { font-size: 1.6rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.05rem; } h6 { font-size: 0.9rem; letter-spacing: 0.5px; } p, li, dd { font-size: 1rem; line-height: 1.7; color: var(--ink); } small, .caption { font-size: 0.82rem; color: var(--ink-muted); } /* Brand-text stroked treatment (header/footer logo only) */ .brand-stroke { font-family: var(--font-display); color: var(--brand-fill); -webkit-text-stroke: 1.5px var(--brand-stroke); text-shadow: 3px 3px 0 var(--brand-stroke); } .ar-safe { overflow: visible; line-height: 1.75; } [lang="ar"], [dir="rtl"] { direction: rtl; text-align: right; } .ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--font-body); }