/* ============================================================
Consulate General of Nigeria, Dubai — Design Foundations
colors_and_type.css
Base tokens + semantic tokens for color and typography.
PRIMARY SANS = Lato (self-hosted, brand font, @font-face below).
DISPLAY SERIF = Playfair Display (Google Fonts CDN).
Load Playfair + FontAwesome in the HTML :
============================================================ */
/* ---------- LATO (self-hosted brand sans) ----------
url() is resolved relative to THIS file, so keep a fonts/ folder
beside every copy of colors_and_type.css (root + app/). */
@font-face { font-family: 'Lato'; font-weight: 100; font-style: normal; font-display: swap; src: url('fonts/Lato-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 100; font-style: italic; font-display: swap; src: url('fonts/Lato-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/Lato-Light.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 300; font-style: italic; font-display: swap; src: url('fonts/Lato-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Lato-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/Lato-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Lato-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/Lato-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Lato-Black.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 900; font-style: italic; font-display: swap; src: url('fonts/Lato-BlackItalic.ttf') format('truetype'); }
:root {
/* ---------- BASE PALETTE ---------- */
/* Neutrals — the system is built mostly on white + light gray */
--white: #FFFFFF;
--gray-50: #F9FAFB; /* page background / subtle fills */
--gray-100: #F3F4F6; /* hover fills, chips */
--gray-200: #E5E7EB; /* borders, hairlines */
--gray-300: #D1D5DB; /* strong borders, dividers */
--gray-400: #9CA3AF; /* muted icons, placeholders */
--gray-500: #6B7280; /* secondary / supporting text */
--gray-600: #4B5563; /* body text on light */
--gray-700: #374151; /* strong body text */
--gray-800: #27272A; /* near-black surfaces */
--ink: #18181A; /* primary text, hero bg, CTA, dark cards */
/* Nigerian Green — the single brand accent */
--green: #008751; /* primary brand green (Nigerian flag) */
--green-600: #00733F; /* hover / pressed */
--green-700: #005C33; /* deepest green */
--green-tint: #E6F4EE; /* pale green wash, badges, icon chips */
--green-tint-2: #CFE9DC; /* slightly stronger wash */
/* On-dark green — brighter so it reads on the #18181A hero */
--green-bright: #1FB873;
/* ---------- DIPLOMATIC ACCENTS (v2) ---------- */
/* Deep forest greens for photographic/gradient hero bands */
--green-deep: #0E5A39;
--green-forest: #0A3D28;
--green-night: #07301F;
/* Brass / gold — the diplomatic secondary accent (seal ring,
badges, card top-borders, ceremonial buttons) */
--gold: #B68A33; /* primary gold text/icons */
--gold-bright: #CBA24E; /* lit gold, gradients */
--gold-line: #D8BE7E; /* hairline gold top-borders */
--gold-soft: #F3E8CC; /* pale gold chip backgrounds */
--gold-on-dark:#D9B863; /* gold on deep-green surfaces */
/* Cream — warm ceremonial section backgrounds */
--cream: #F5EFE2;
--cream-2: #EFE6D3;
--cream-line: #E6DAC0;
/* Support / status (used sparingly for forms + alerts) */
--amber: #B45309;
--red: #B91C1C;
/* ---------- SEMANTIC COLOR ---------- */
--bg: var(--gray-50); /* app / page background */
--surface: var(--white); /* cards, header, panels */
--surface-dark: var(--ink); /* hero, dark service card, top bar */
--surface-muted: var(--gray-100);
--fg1: var(--ink); /* headings, primary text */
--fg2: var(--gray-600); /* body copy */
--fg3: var(--gray-500); /* secondary / meta */
--fg-on-dark: var(--white); /* text on dark surfaces */
--fg-on-dark-2: #C9C9CE; /* muted text on dark surfaces */
--accent: var(--green);
--accent-hover: var(--green-600);
--accent-fg: var(--white); /* text/icon on green */
--border: var(--gray-200); /* default hairline */
--border-strong: var(--gray-300);
--border-dark: #2E2E33; /* borders on dark surfaces */
--focus-ring: rgba(0,135,81,0.35);
/* ---------- TYPE FAMILIES ---------- */
--font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-serif: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
/* ---------- TYPE SCALE (base) ---------- */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 38px;
--text-5xl: 48px;
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-caps: 0.08em; /* ALL-CAPS nav + eyebrows */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extra: 800;
/* ---------- RADII ---------- */
--radius-sm: 6px;
--radius-md: 10px; /* buttons, inputs, chips */
--radius-lg: 14px; /* cards (rounded-xl feel) */
--radius-xl: 18px; /* large cards / gallery */
--radius-full: 9999px;
/* ---------- SPACING (4px base) ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* ---------- SHADOWS (soft, low-contrast depth) ---------- */
--shadow-xs: 0 1px 2px rgba(24,24,26,0.05);
--shadow-sm: 0 1px 3px rgba(24,24,26,0.07), 0 1px 2px rgba(24,24,26,0.04);
--shadow-md: 0 4px 12px rgba(24,24,26,0.07), 0 2px 4px rgba(24,24,26,0.04);
--shadow-lg: 0 12px 28px rgba(24,24,26,0.10), 0 4px 8px rgba(24,24,26,0.05);
--shadow-dark: 0 16px 40px rgba(0,0,0,0.35);
--container: 1200px;
}
/* ============================================================
SEMANTIC TYPE CLASSES
============================================================ */
.eyebrow {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--accent);
}
.h1 {
font-family: var(--font-sans);
font-size: var(--text-5xl);
font-weight: var(--weight-extra);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg1);
}
.h2 {
font-family: var(--font-sans);
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg1);
}
.h3 {
font-family: var(--font-sans);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
line-height: var(--leading-snug);
color: var(--fg1);
}
.h4 {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--fg1);
}
.lead {
font-family: var(--font-sans);
font-size: var(--text-xl);
font-weight: var(--weight-regular);
line-height: var(--leading-relaxed);
color: var(--fg2);
}
.body {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-relaxed);
color: var(--fg2);
}
.small {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
color: var(--fg3);
}
.nav-link {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--fg1);
}
.label {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--fg3);
}
.mono {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--fg2);
}
/* ---------- DIPLOMATIC DISPLAY (v2) ---------- */
/* Playfair serif for ceremonial headlines & names */
.display {
font-family: var(--font-serif);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--fg1);
}
.display-xl { font-size: 60px; }
.display-lg { font-size: 44px; }
.display-md { font-size: 34px; }
.display-sm { font-size: 26px; }
.eyebrow-gold {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--gold);
}