/* ═══════════════════════════════════════════════════════════════ Islamic Content SA — Design System tokens جمعية خدمة المحتوى الإسلامي باللغات Flattened from the design-system bundle (fonts, colors, typography, spacing, shadows, borders, semantic). Asset paths are relative to /assets/css/. IBM Plex (fallback + mono) is loaded via in the page head rather than @import, so it is never dropped by the parser. ═══════════════════════════════════════════════════════════════ */ /* ── FONT: ExpoArabic — الخط الرسمي لهوية الجمعية ── 4 weights: Light (300) · Book (400) · SemiBold (600) · Bold (700) The calligraphic name in the logo is custom artwork, not a font. */ @font-face { font-family: 'ExpoArabic'; src: url('../fonts/ExpoArabic-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'ExpoArabic'; src: url('../fonts/ExpoArabic-Book.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'ExpoArabic'; src: url('../fonts/ExpoArabic-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'ExpoArabic'; src: url('../fonts/ExpoArabic-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ── BRAND CORE ── */ --color-brand-gold: #C2A75E; --color-brand-gold-hover: #A88C4A; --color-brand-gold-light: #D4BC7E; --color-brand-gold-pale: #F5EDD4; --color-brand-gold-50: #FBF7EC; /* Deep gold: gold that passes contrast as text on white (used for links, kickers) */ --color-brand-gold-deep: #8A7030; --color-brand-dark: #221F1F; --color-brand-dark-hover: #332F2F; --color-brand-dark-muted: #3D3838; --color-brand-dark-raised: #2B2727; --color-brand-dark-sunken: #1C1919; --color-brand-white: #FFFFFF; /* ── NEUTRAL SCALE (warm-tinted) ── */ --color-neutral-50: #F8F5F0; --color-neutral-100: #F0EAE0; --color-neutral-200: #E0D5C5; --color-neutral-300: #C8BBAA; --color-neutral-400: #A89888; --color-neutral-500: #887870; --color-neutral-600: #685C54; --color-neutral-700: #4A403A; --color-neutral-800: #302820; --color-neutral-900: #1C1510; /* ── SEMANTIC ── */ --color-success: #2A6B3C; --color-success-bg: #EAF4ED; --color-success-border: #8DC9A0; --color-warning: #8B6B1A; --color-warning-bg: #FDF4DC; --color-warning-border: #D4AF5A; --color-error: #B52B2B; --color-error-bg: #FDEAEA; --color-error-border: #E09090; --color-info: #1A5A8B; --color-info-bg: #E5F0FA; --color-info-border: #80B4D8; --color-live: #4ECB99; /* ── FONT FAMILIES ── */ --font-primary: 'ExpoArabic', 'IBM Plex Sans Arabic', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; /* ── TYPE SCALE ── */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem; --text-display: var(--text-5xl); --text-heading-1: var(--text-4xl); --text-heading-2: var(--text-3xl); --text-heading-3: var(--text-2xl); --text-heading-4: var(--text-xl); --text-title: var(--text-lg); --text-body-lg: var(--text-md); --text-body: var(--text-base); --text-body-sm: var(--text-sm); --text-caption: var(--text-xs); /* ── FONT WEIGHTS ── */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ── LINE HEIGHTS ── */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.6; --leading-relaxed: 1.75; --leading-loose: 2; /* ── LETTER SPACING ── */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.1em; /* ── SPACING (4px grid) ── */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem; --space-48: 12rem; --gap-xs: var(--space-2); --gap-sm: var(--space-3); --gap-md: var(--space-4); --gap-lg: var(--space-6); --gap-xl: var(--space-8); --gap-2xl: var(--space-12); --padding-btn-sm: var(--space-2) var(--space-4); --padding-btn-md: var(--space-3) var(--space-6); --padding-btn-lg: var(--space-4) var(--space-8); --padding-card-sm: var(--space-4); --padding-card-md: var(--space-6); --padding-card-lg: var(--space-8); --padding-section: var(--space-16) var(--space-8); --padding-page: var(--space-8); --container-max: 1200px; --container-narrow: 800px; --container-wide: 1440px; --container-site: 1120px; /* landing-page measure */ /* ── SHADOWS (warm undertone) ── */ --shadow-xs: 0 1px 2px rgba(34, 31, 31, 0.06); --shadow-sm: 0 2px 6px rgba(34, 31, 31, 0.08); --shadow-md: 0 4px 12px rgba(34, 31, 31, 0.10); --shadow-lg: 0 8px 24px rgba(34, 31, 31, 0.12); --shadow-xl: 0 16px 40px rgba(34, 31, 31, 0.14); --shadow-2xl: 0 24px 60px rgba(34, 31, 31, 0.18); --shadow-gold: 0 4px 16px rgba(194, 167, 94, 0.30); --shadow-gold-lg: 0 8px 32px rgba(194, 167, 94, 0.35); --shadow-gold-xl: 0 16px 48px rgba(194, 167, 94, 0.25); --shadow-inset-sm: inset 0 1px 2px rgba(34, 31, 31, 0.06); --shadow-inset-md: inset 0 2px 4px rgba(34, 31, 31, 0.08); /* ── BORDERS ── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; --border-thin: 1px; --border-base: 1.5px; --border-thick: 2px; --border-heavy: 3px; --border-subtle: var(--color-neutral-100); --border-default: var(--color-neutral-200); --border-strong: var(--color-neutral-300); --border-gold: var(--color-brand-gold); --border-dark: var(--color-brand-dark); /* ── SEMANTIC ALIASES ── */ --text-primary: var(--color-brand-dark); --text-secondary: var(--color-neutral-600); --text-tertiary: var(--color-neutral-400); --text-disabled: var(--color-neutral-300); --text-inverse: var(--color-brand-white); --text-accent: var(--color-brand-gold); --text-link: var(--color-brand-gold-deep); --text-link-hover: var(--color-brand-gold-hover); --surface-base: var(--color-brand-white); --surface-subtle: var(--color-neutral-50); --surface-muted: var(--color-neutral-100); --surface-card: var(--color-brand-white); --surface-dark: var(--color-brand-dark); --surface-gold: var(--color-brand-gold); --surface-gold-pale: var(--color-brand-gold-pale); --interactive-primary-bg: var(--color-brand-gold); --interactive-primary-bg-hover: var(--color-brand-gold-hover); --interactive-primary-text: var(--color-brand-white); --interactive-dark-bg: var(--color-brand-dark); --interactive-dark-bg-hover: var(--color-brand-dark-hover); --interactive-dark-text: var(--color-brand-white); --interactive-ghost-bg: transparent; --interactive-ghost-bg-hover: var(--color-neutral-50); --interactive-outline-border: var(--color-brand-gold); --interactive-outline-bg-hover: var(--color-brand-gold-50); --focus-ring: 0 0 0 3px rgba(194, 167, 94, 0.35); /* ── BRAND PATTERN (shield / tulip motif) ── Subtle use only: a thin band between sections at ~12–15% opacity (repeat-x). */ --pattern-band: url('../img/pattern-band.png'); /* ── MOTION ── */ --ease-out-expo: cubic-bezier(0.215, 0.61, 0.355, 1); --duration-fast: 150ms; --duration-base: 200ms; }