/* ============================================================
برنامج واثق — Design System
colors_and_type.css
Tokens derived from the official brand logo:
deep violet wordmark (#402070) + the orange→purple→blue
gradient ribbon. Vibrant, modern, friendly, RTL-first.
------------------------------------------------------------
Fonts: Tajawal (Arabic, self-hosted from official files) +
Plus Jakarta Sans (Latin, Google Fonts).
Load Plus Jakarta Sans in (Tajawal is wired via @font-face below):
============================================================ */
/* ---------- Tajawal — self-hosted official brand font ----------
Paths are relative to this stylesheet (project root /fonts/). */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:200;font-display:swap;src:url('fonts/ArbFONTS-Tajawal-ExtraLight.ttf') format('truetype');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/ArbFONTS-Tajawal-Light.ttf') format('truetype');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ArbFONTS-Tajawal-Regular.ttf') format('truetype');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ArbFONTS-Tajawal-Medium.ttf') format('truetype');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ArbFONTS-Tajawal-Bold.ttf') format('truetype');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/ArbFONTS-Tajawal-ExtraBold.ttf') format('truetype');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/ArbFONTS-Tajawal-Black.ttf') format('truetype');}
:root {
/* ---------- PRIMITIVE: Violet (PRIMARY — the wordmark) ---------- */
--violet-50: #F6F1FB;
--violet-100: #EBE0F4;
--violet-200: #D8C2E7;
--violet-300: #BB97D3;
--violet-400: #9A5FB5;
--violet-500: #7B3F9E; /* ribbon purple */
--violet-600: #5B3081;
--violet-700: #402070; /* PRIMARY · brand wordmark */
--violet-800: #341A5E;
--violet-900: #261047;
/* ---------- PRIMITIVE: Orange (warm accent — ribbon start) ---------- */
--orange-50: #FFF6E6;
--orange-100: #FFE7C0;
--orange-200: #FFD08A;
--orange-300: #FFAD00; /* golden */
--orange-400: #FF9100;
--orange-500: #FF7A00; /* ACCENT · vivid orange */
--orange-600: #E66600;
--orange-700: #B84F00;
/* ---------- PRIMITIVE: Blue (cool accent — ribbon end) ---------- */
--blue-50: #EEF6FC;
--blue-100: #D7EBF8;
--blue-200: #AED7F0;
--blue-300: #87CBE4; /* sky tip */
--blue-400: #5B97D4;
--blue-500: #427DBE;
--blue-600: #3565AE;
--blue-700: #2F5AA7; /* royal */
--blue-800: #244680;
/* ---------- PRIMITIVE: Neutrals (cool, faint violet tint) ---------- */
--neutral-0: #FFFFFF;
--neutral-50: #FAFAFD;
--neutral-100: #F3F2F8;
--neutral-200: #E7E5F0;
--neutral-300: #D2CFE0;
--neutral-400: #A6A2BB;
--neutral-500: #75708C;
--neutral-600: #524D67;
--neutral-700: #383249;
--neutral-800: #251F36;
--neutral-900: #18122A; /* violet-black text */
/* ---------- PRIMITIVE: Status ---------- */
--green-500: #16A06A; --green-50: #E4F6EE;
--amber-500: #F59E0B; --amber-50: #FEF3DC;
--red-500: #E5484D; --red-50: #FCE9E9;
/* ============================================================
SEMANTIC TOKENS — use these in product UI
============================================================ */
--bg: var(--neutral-50);
--surface: var(--neutral-0);
--surface-2: var(--neutral-100);
--surface-tint: var(--violet-50);
--fg: var(--neutral-900);
--fg-muted: var(--neutral-500);
--fg-subtle: var(--neutral-400);
--fg-ondark: #FFFFFF;
--fg-heading: var(--violet-700);
--border: var(--neutral-200);
--border-strong: var(--neutral-300);
--primary: var(--violet-700);
--primary-hover: var(--violet-800);
--primary-press: var(--violet-900);
--primary-fg: #FFFFFF;
--primary-soft: var(--violet-50);
--accent: var(--orange-500);
--accent-hover: var(--orange-600);
--accent-fg: #FFFFFF;
--accent-soft: var(--orange-50);
--info: var(--blue-600);
--info-soft: var(--blue-50);
--ring: color-mix(in srgb, var(--violet-500) 45%, transparent);
--success: var(--green-500); --success-soft: var(--green-50);
--warning: var(--amber-500); --warning-soft: var(--amber-50);
--error: var(--red-500); --error-soft: var(--red-50);
/* ============================================================
SIGNATURE GRADIENTS — the brand ribbon: orange → purple → blue
============================================================ */
--grad-ribbon: linear-gradient(110deg, var(--orange-400) 0%, var(--violet-500) 50%, var(--blue-600) 100%);
--grad-ribbon-soft: linear-gradient(110deg, #FFB347 0%, #9A5FB5 52%, #5B97D4 100%);
--grad-violet: linear-gradient(135deg, var(--violet-600), var(--violet-800));
--grad-warm: linear-gradient(135deg, var(--orange-300), var(--orange-500));
--grad-cool: linear-gradient(135deg, var(--blue-300), var(--blue-600));
--grad-text: linear-gradient(100deg, var(--orange-500), var(--violet-600) 55%, var(--blue-600));
/* ============================================================
TYPOGRAPHY
============================================================ */
--font-ar: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; /* Arabic UI + display */
--font-latin: 'Plus Jakarta Sans', 'Tajawal', system-ui, sans-serif;
--font-display: 'Tajawal', sans-serif;
--text-display: 3.5rem; /* 56 */
--text-h1: 2.5rem; /* 40 */
--text-h2: 2rem; /* 32 */
--text-h3: 1.5rem; /* 24 */
--text-h4: 1.25rem; /* 20 */
--text-lg: 1.125rem; /* 18 */
--text-base: 1rem; /* 16 */
--text-sm: 0.875rem; /* 14 */
--text-xs: 0.8125rem; /* 13 */
--weight-regular:400; --weight-medium:500; --weight-bold:700;
--weight-heavy:800; --weight-black:900;
--leading-tight:1.18; --leading-snug:1.32; --leading-normal:1.65;
--tracking-tight:-0.01em; --tracking-wide:0.04em;
/* ============================================================
SPACING (4pt) · RADII · SHADOWS · MOTION
============================================================ */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
--space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
--radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:22px;
--radius-xl:30px; --radius-pill:999px;
/* Soft, cool violet-tinted shadows (never pure black) */
--shadow-xs: 0 1px 2px rgba(38,16,71,0.06);
--shadow-sm: 0 2px 8px rgba(38,16,71,0.08);
--shadow-md: 0 12px 28px -10px rgba(64,32,112,0.20);
--shadow-lg: 0 26px 56px -18px rgba(64,32,112,0.30);
--shadow-violet: 0 16px 34px -12px rgba(64,32,112,0.45);
--shadow-orange: 0 16px 34px -12px rgba(255,122,0,0.42);
--ring-shadow: 0 0 0 4px var(--ring);
--ease-out:cubic-bezier(0.22,0.61,0.36,1);
--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
--dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;
}
/* ============================================================
SEMANTIC TEXT HELPERS
============================================================ */
.ds-display{font-family:var(--font-display);font-size:var(--text-display);font-weight:var(--weight-black);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--fg-heading);}
.ds-h1{font-family:var(--font-display);font-size:var(--text-h1);font-weight:var(--weight-heavy);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--fg-heading);}
.ds-h2{font-family:var(--font-display);font-size:var(--text-h2);font-weight:var(--weight-heavy);line-height:var(--leading-snug);color:var(--fg-heading);}
.ds-h3{font-family:var(--font-ar);font-size:var(--text-h3);font-weight:var(--weight-bold);line-height:var(--leading-snug);color:var(--fg);}
.ds-h4{font-family:var(--font-ar);font-size:var(--text-h4);font-weight:var(--weight-bold);line-height:var(--leading-snug);color:var(--fg);}
.ds-lead{font-family:var(--font-ar);font-size:var(--text-lg);font-weight:var(--weight-regular);line-height:var(--leading-normal);color:var(--fg-muted);}
.ds-body{font-family:var(--font-ar);font-size:var(--text-base);font-weight:var(--weight-regular);line-height:var(--leading-normal);color:var(--fg);}
.ds-small{font-family:var(--font-ar);font-size:var(--text-sm);font-weight:var(--weight-regular);line-height:var(--leading-snug);color:var(--fg-muted);}
.ds-caption{font-family:var(--font-ar);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--leading-snug);color:var(--fg-subtle);}
.ds-overline{font-family:var(--font-latin);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--orange-600);}
.ds-grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ds-num{font-family:var(--font-latin);font-feature-settings:"tnum" 1;}