/* ============================================================ TUOJING — Brand Web Tokens Source of truth for the international site (EN / AR / FA). Brand: premium-industrial, oil & gas trust. Mono-blue discipline. Signature azure #33A7FF extracted from the approved logo vector. ============================================================ */ :root { /* ---- Brand: navy anchor + signature azure ---- */ --navy-900: #06223F; /* deepest — hero/footer dark */ --navy-800: #0A2E54; --navy-700: #0E3A68; /* primary brand navy (surfaces on dark) */ --navy-600: #134A82; --blue-700: #0B5FA6; --blue-600: #0E72C4; /* links / text-on-white accent (AA ≥4.5) */ --blue-500: #1E8FE6; /* primary button fill */ --sky-400: #33A7FF; /* SIGNATURE azure — logo, accents, on-dark */ --sky-300: #66BDFF; --sky-200: #A8D8FF; --ice-100: #E8F3FF; /* tinted surface */ --ice-50: #F2F8FF; /* ---- Neutrals ---- */ --white: #FFFFFF; --bg: #F5F8FB; /* page background */ --surface: #FFFFFF; /* cards */ --border: #DDE6EF; /* hairline 1px */ --border-strong: #C4D2E0; --ink: #0F1B29; /* primary text */ --ink-soft: #3A4A5C; /* secondary text */ --muted: #6A7B8C; /* captions / labels */ /* ---- Semantic ---- */ --ok: #1F9D6B; --warn: #C8861A; /* ---- Typography ---- EN : Archivo (display, 700/800, uppercase punch) + Inter (text) AR : Cairo FA : Vazirmatn (set on ) */ --font-display: "Archivo", "Cairo", "Vazirmatn", system-ui, sans-serif; --font-text: "Inter", "Cairo", "Vazirmatn", system-ui, sans-serif; /* type scale (1.250) */ --t-xs: 0.75rem; /* 12 */ --t-sm: 0.875rem; /* 14 */ --t-base: 1rem; /* 16 */ --t-md: 1.25rem; /* 20 */ --t-lg: 1.75rem; /* 28 */ --t-xl: 2.5rem; /* 40 */ --t-2xl: 3.5rem; /* 56 */ --t-3xl: 4.5rem; /* 72 — hero */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-text: 1.6; /* ---- Spacing — 8px rhythm ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---- Radius / shadow / layout ---- */ --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(8,30,55,.06), 0 1px 3px rgba(8,30,55,.05); --shadow-md: 0 6px 18px rgba(8,30,55,.08), 0 2px 6px rgba(8,30,55,.05); --shadow-lg: 0 20px 50px rgba(8,30,55,.14); --ring: 0 0 0 3px rgba(51,167,255,.45); --maxw: 1200px; --gutter: clamp(16px, 4vw, 40px); } /* RTL flips for AR/FA — builder sets dir="rtl" on */ [dir="rtl"] { --start: right; --end: left; } [dir="ltr"], :root { --start: left; --end: right; }