/** * Roshd Afarin Kimia Kerman (RAK) — Design System Tokens * File: assets/css/variables.css * * Single source of truth for the entire site's visual language: * colors, typography, spacing, containers, radius, borders, shadows. * * Architecture (two layers): * 1) Raw palette — literal brand/neutral values (the "paint"). * 2) Semantic — role-based tokens that REFERENCE the palette * (background, text, border, buttons, states). * Dark mode later only needs to remap the semantic layer, not the palette. * * Load order: this file must be enqueued FIRST, before all other stylesheets. * Author: AI development team — v1.0 */ :root { /* ============================================================ LAYER 1 — RAW PALETTE ============================================================ */ /* Brand — Primary (forest green), sampled from the RAK logo */ --green-900: #0C2A15; /* darkest — hover / footer background */ --green-700: #123D1F; /* primary brand color */ --green-500: #1E5C30; /* lighter emphasis */ --green-050: #EAF1EC; /* very light tint — section backgrounds */ /* Brand — Accent (metallic gold), sampled from the RAK logo */ --gold-700: #A8871C; /* darkest — hover on gold elements */ --gold-500: #C9A227; /* accent brand color */ --gold-300: #E0C566; /* light highlight */ --gold-050: #FAF4E2; /* very light tint */ /* Neutrals — subtly green-tinted grays for harmony with the brand */ --neutral-900: #1A1D1B; /* body text */ --neutral-700: #3D423F; /* strong text / alt heading */ --neutral-500: #6B716D; /* muted text, captions */ --neutral-300: #C7CCC9; /* strong borders / dividers */ --neutral-200: #E4E7E5; /* default borders */ --neutral-100: #F2F4F3; /* alt surfaces */ --neutral-050: #F8FAF9; /* alt page background */ /* Base */ --white: #FFFFFF; /* Status hues + their pale backgrounds (for alerts / form messages) */ --success-600: #2E7D32; --success-050: #E8F3EA; --warning-600: #B45309; --warning-050: #FDF0E1; --error-600: #C1272D; --error-050: #FBEAEA; --info-600: #1F6FB2; --info-050: #E6F0F8; /* ============================================================ LAYER 2 — SEMANTIC COLOR TOKENS (used by components) ============================================================ */ /* Brand roles */ --color-primary: var(--green-700); --color-primary-dark: var(--green-900); --color-primary-light: var(--green-500); --color-primary-tint: var(--green-050); --color-accent: var(--gold-500); --color-accent-dark: var(--gold-700); --color-accent-light: var(--gold-300); --color-accent-tint: var(--gold-050); /* Surfaces / backgrounds */ --color-background: var(--white); --color-surface: var(--white); --color-surface-alt: #F5F7F6; /* Text */ --color-text: var(--neutral-900); --color-text-muted: var(--neutral-500); --color-heading: var(--neutral-900); --color-text-inverse: var(--white); /* text on dark/green surfaces */ --color-text-on-accent: var(--neutral-900); /* dark text on gold (contrast) */ /* Borders */ --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); /* Buttons */ --btn-primary-bg: var(--color-primary); --btn-primary-text: var(--color-text-inverse); --btn-primary-hover: var(--color-primary-dark); --btn-accent-bg: var(--color-accent); --btn-accent-text: var(--color-text-on-accent); --btn-accent-hover: var(--color-accent-dark); --btn-outline-border: var(--color-primary); --btn-outline-text: var(--color-primary); --btn-outline-hover-bg: var(--color-primary-tint); /* Status roles */ --color-success: var(--success-600); --color-success-bg: var(--success-050); --color-warning: var(--warning-600); --color-warning-bg: var(--warning-050); --color-error: var(--error-600); --color-error-bg: var(--error-050); --color-info: var(--info-600); --color-info-bg: var(--info-050); /* ============================================================ TYPOGRAPHY ============================================================ */ /* Font families — Inter (Latin) + Vazirmatn (Persian). Per-glyph fallback lets English render in Inter and Persian in Vazirmatn even within the same string. */ --font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-fa: 'Vazirmatn', 'Tahoma', sans-serif; --font-base: 'Inter', 'Vazirmatn', system-ui, -apple-system, sans-serif; /* Weights (only these four are loaded, for performance) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Fluid font sizes (clamp: min, preferred, max) — scale smoothly with viewport */ --fs-display: clamp(2rem, 1.40rem + 3.0vw, 3rem); /* 32 → 48px */ --fs-h1: clamp(1.75rem, 1.25rem + 2.5vw, 2.5rem); /* 28 → 40px */ --fs-h2: clamp(1.5rem, 1.15rem + 1.8vw, 2rem); /* 24 → 32px */ --fs-h3: clamp(1.25rem, 1.05rem + 1.0vw, 1.5rem); /* 20 → 24px */ --fs-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18 → 20px */ --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); /* 17 → 18px */ --fs-body: 1rem; /* 16px */ --fs-caption: 0.875rem; /* 14px */ --fs-button: 1rem; /* 16px */ --fs-nav: 0.9375rem; /* 15px */ --fs-footer: 0.875rem; /* 14px */ --fs-form: 0.9375rem; /* 15px */ /* Line heights */ --lh-tight: 1.1; /* display */ --lh-snug: 1.2; /* h1 / h2 */ --lh-heading: 1.3; /* h3 / h4 */ --lh-normal: 1.7; /* body (Latin) */ --lh-relaxed: 1.9; /* body (Persian — applied in rtl.css) */ /* ============================================================ SPACING — 8px rhythm, 4px base unit ============================================================ */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ /* ============================================================ LAYOUT — containers, gutter, section rhythm ============================================================ */ --container-narrow: 720px; /* article / long-form text */ --container: 1200px; /* default page width */ --container-wide: 1440px; /* full-width hero / gallery */ --gutter: clamp(1rem, 0.5rem + 2vw, 2rem); /* 16 → 32px side padding */ --section-y: clamp(4rem, 2rem + 6vw, 7.5rem); /* 64 → 120px vertical section padding */ /* Breakpoints — CSS variables cannot be used inside @media queries. Kept here as documentation and for JavaScript use: mobile : < 640px tablet : 640px – 1024px laptop : 1024px – 1280px desktop : > 1280px */ --bp-tablet: 640px; --bp-laptop: 1024px; --bp-desktop: 1280px; /* ============================================================ RADIUS / BORDERS / SHADOWS / MOTION ============================================================ */ --radius-sm: 6px; /* buttons, inputs */ --radius-md: 10px; /* cards */ --radius-lg: 16px; /* large cards, modals */ --radius-full: 999px; /* pills */ --border-width: 1px; --border-width-strong: 1.5px; /* Subtle elevation — shadows tinted with brand green for cohesion */ --shadow-sm: 0 1px 2px rgba(18, 61, 31, 0.06); --shadow-md: 0 4px 12px rgba(18, 61, 31, 0.08); --shadow-lg: 0 12px 28px rgba(18, 61, 31, 0.10); --transition-fast: 150ms ease; --transition-base: 250ms ease; } /* ================================================================ DARK MODE — ARCHITECTURE PLACEHOLDER (not implemented yet) When approved, remap ONLY the semantic layer below. The raw palette above stays untouched. Example scaffold: [data-theme="dark"] { --color-background: #0F1712; --color-surface: #16211A; --color-text: #E7ECE9; --color-text-muted: #9BA5A0; --color-border: #26322B; --color-border-strong: #33413A; ... (accent/status tints re-tuned for dark) } ================================================================ */