/* Auto-generated /brand-vars.css — Brand Identity (Phase 5A.2)
   Last update: 2026-06-19T08:35:47.962Z
   Edit at /brand.html
   Tip: use rgba(var(--brand-primary-rgb), .12) for translucent shades */
:root {
  --brand-primary: #0ea5e9;
  --brand-primary-rgb: 14,165,233;
  --brand-primary-h: #38bdf8;
  --brand-primary-h-rgb: 56,189,248;
  --brand-secondary: #06b6d4;
  --brand-secondary-rgb: 6,182,212;
  --brand-accent: #3b82f6;
  --brand-accent-rgb: 59,130,246;
  --brand-bg: #002090;
  --brand-bg-rgb: 0,32,144;
  --brand-bg-2: #15171c;
  --brand-bg-2-rgb: 21,23,28;
  --brand-bg-3: #1c1f26;
  --brand-bg-3-rgb: 28,31,38;
  --brand-border: #2a2e38;
  --brand-border-rgb: 42,46,56;
  --brand-text: #e6e8ec;
  --brand-text-rgb: 230,232,236;
  --brand-text-muted: #8a8f99;
  --brand-text-muted-rgb: 138,143,153;
  --brand-success: #10b981;
  --brand-success-rgb: 16,185,129;
  --brand-warning: #f59e0b;
  --brand-warning-rgb: 245,158,11;
  --brand-danger: #ef4444;
  --brand-danger-rgb: 239,68,68;
  --brand-info: #06b6d4;
  --brand-info-rgb: 6,182,212;
  --brand-site-bg: #030610;
  --brand-site-bg-rgb: 3,6,16;
  --brand-site-text: #eef2ff;
  --brand-site-text-rgb: 238,242,255;
  --brand-light-bg: #f5f7fb;
  --brand-light-bg-rgb: 245,247,251;
  --brand-light-bg-2: #ffffff;
  --brand-light-bg-2-rgb: 255,255,255;
  --brand-light-bg-3: #f0f2f7;
  --brand-light-bg-3-rgb: 240,242,247;
  --brand-light-border: #e5e7eb;
  --brand-light-border-rgb: 229,231,235;
  --brand-light-text: #111827;
  --brand-light-text-rgb: 17,24,39;
  --brand-light-text-muted: #6b7280;
  --brand-light-text-muted-rgb: 107,114,128;
  --brand-light-site-bg: #f0f2ff;
  --brand-light-site-bg-rgb: 240,242,255;
  --brand-light-site-text: #111827;
  --brand-light-site-text-rgb: 17,24,39;
  --brand-font-size-base: 16px;
  --brand-font-size-xs: 12px;
  --brand-font-size-sm: 14px;
  --brand-font-size-md: 16px;
  --brand-font-size-lg: 18px;
  --brand-font-size-xl: 20px;
  --brand-font-size-2xl: 24px;
  --brand-font-size-3xl: 30px;
  --brand-font-size-4xl: 36px;
  --brand-font-size-5xl: 48px;
  --brand-font-weight-normal: 400;
  --brand-font-weight-medium: 500;
  --brand-font-weight-semibold: 600;
  --brand-font-weight-bold: 700;
  --brand-font-weight-black: 900;
  --brand-line-height-tight: 1.25;
  --brand-line-height-normal: 1.5;
  --brand-line-height-loose: 1.75;
  --brand-space-0: 0;
  --brand-space-1: 4px;
  --brand-space-2: 8px;
  --brand-space-3: 12px;
  --brand-space-4: 16px;
  --brand-space-6: 24px;
  --brand-space-8: 32px;
  --brand-space-12: 48px;
  --brand-space-16: 64px;
  --brand-space-24: 96px;
  --brand-radius-none: 0;
  --brand-radius-sm: 4px;
  --brand-radius-md: 8px;
  --brand-radius-lg: 12px;
  --brand-radius-xl: 20px;
  --brand-radius-2xl: 28px;
  --brand-radius-full: 9999px;
  --brand-shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --brand-shadow-sm: 0 2px 4px rgba(0,0,0,.08);
  --brand-shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --brand-shadow-lg: 0 8px 24px rgba(0,0,0,.18);
  --brand-shadow-xl: 0 16px 48px rgba(0,0,0,.25);
  --brand-shadow-2xl: 0 24px 64px rgba(0,0,0,.35);
  --brand-shadow-inner: inset 0 2px 4px rgba(0,0,0,.06);
  --brand-duration-fast: 150ms;
  --brand-duration-normal: 250ms;
  --brand-duration-slow: 400ms;
  --brand-easing-default: cubic-bezier(.4, 0, .2, 1);
  --brand-easing-in: cubic-bezier(.4, 0, 1, 1);
  --brand-easing-out: cubic-bezier(0, 0, .2, 1);
  --brand-easing-inout: cubic-bezier(.4, 0, .2, 1);
  --brand-meta-theme-color: #6366f1;
  --brand-meta-tile-color: #6366f1;
  --brand-apple-touch-icon: /uploads/brand/apple-touch-icon.jpeg;
  --brand-custom-css: ;
  --brand-head-scripts: ;
  --brand-body-end-scripts: ;
  --brand-seo-title: تكنو ميديا — وكالة المحتوى الرقمي السينمائي;
  --brand-seo-description: نحوّل أفكارك إلى محتوى بصري يوقف التمرير. ريلز، تصاميم، هويات، وإدارة كاملة لمحتواك.;
  --brand-seo-keywords: تكنو ميديا,محتوى رقمي,ريلز,تصاميم,هوية بصرية,سوشل ميديا,الأردن,فلسطين;
  --brand-seo-og-image: /uploads/brand/logo.jpeg;
  --brand-seo-canonical: ;
  --brand-seo-business-name: Techno Media;
  --brand-seo-business-phone: +962 7 8662 3504;
  --brand-seo-business-email: ;
  --brand-seo-business-address: Jordan / Palestine;
  --brand-seo-business-lat: ;
  --brand-seo-business-lng: ;
  --brand-seo-twitter-handle: techno media;
  --brand-hero-video-url: ;
  --brand-hero-video-poster: ;
  --brand-hero-scenes: 0.5,2.5,5,7.5;
  --brand-hero-s1-eyebrow-ar: ;
  --brand-hero-s1-eyebrow-en: ;
  --brand-hero-s1-title-a-ar: ;
  --brand-hero-s1-title-a-en: ;
  --brand-hero-s1-title-b-ar: ;
  --brand-hero-s1-title-b-en: ;
  --brand-hero-s1-sub-ar: ;
  --brand-hero-s1-sub-en: ;
  --brand-hero-s2-eyebrow-ar: ;
  --brand-hero-s2-eyebrow-en: ;
  --brand-hero-s2-title-a-ar: ;
  --brand-hero-s2-title-a-en: ;
  --brand-hero-s2-title-b-ar: ;
  --brand-hero-s2-title-b-en: ;
  --brand-hero-s2-desc-ar: ;
  --brand-hero-s2-desc-en: ;
  --brand-hero-s3-eyebrow-ar: ;
  --brand-hero-s3-eyebrow-en: ;
  --brand-hero-s3-title-a-ar: ;
  --brand-hero-s3-title-a-en: ;
  --brand-hero-s3-title-b-ar: ;
  --brand-hero-s3-title-b-en: ;
  --brand-hero-s3-desc-ar: ;
  --brand-hero-s3-desc-en: ;
  --brand-hero-s4-eyebrow-ar: ;
  --brand-hero-s4-eyebrow-en: ;
  --brand-hero-s4-title-a-ar: ;
  --brand-hero-s4-title-a-en: ;
  --brand-hero-s4-title-b-ar: ;
  --brand-hero-s4-title-b-en: ;
  --brand-hero-s4-desc-ar: ;
  --brand-hero-s4-desc-en: ;
  --brand-font: 'Cairo', 'Inter', system-ui, sans-serif;
  --brand-font-heading: 'Cairo', 'Inter', system-ui, sans-serif;
}

/* ── LIGHT MODE: when body.light, swap surface colors to light palette ── */
body.light {
  --brand-bg:         var(--brand-light-bg);
  --brand-bg-rgb:     var(--brand-light-bg-rgb);
  --brand-bg-2:       var(--brand-light-bg-2);
  --brand-bg-2-rgb:   var(--brand-light-bg-2-rgb);
  --brand-bg-3:       var(--brand-light-bg-3);
  --brand-bg-3-rgb:   var(--brand-light-bg-3-rgb);
  --brand-border:     var(--brand-light-border);
  --brand-border-rgb: var(--brand-light-border-rgb);
  --brand-text:       var(--brand-light-text);
  --brand-text-rgb:   var(--brand-light-text-rgb);
  --brand-text-muted: var(--brand-light-text-muted);
  --brand-text-muted-rgb: var(--brand-light-text-muted-rgb);
  --brand-site-bg:    var(--brand-light-site-bg);
  --brand-site-text:  var(--brand-light-site-text);
}

/* ── Bridge: Studio --ss-* vars → brand ── */
:root {
  --ss-bg: var(--brand-bg); --ss-bg-2: var(--brand-bg-2); --ss-bg-3: var(--brand-bg-3);
  --ss-border: var(--brand-border); --ss-text: var(--brand-text); --ss-text-muted: var(--brand-text-muted);
  --ss-accent: var(--brand-primary); --ss-accent-h: var(--brand-primary-h);
  --ss-success: var(--brand-success); --ss-warning: var(--brand-warning);
  --ss-danger: var(--brand-danger); --ss-info: var(--brand-info);
}

/* ── Bridge: legacy admin dashboard vars ── */
:root {
  --primary: var(--brand-primary); --primary-rgb: var(--brand-primary-rgb);
  --secondary: var(--brand-secondary); --secondary-rgb: var(--brand-secondary-rgb);
  --accent: var(--brand-accent); --accent-rgb: var(--brand-accent-rgb);
  --success: var(--brand-success); --warning: var(--brand-warning);
  --danger: var(--brand-danger); --info: var(--brand-info);
}

/* ── Apply font family to everything ── */
body, html { font-family: var(--brand-font); }
h1, h2, h3, h4, h5, h6 { font-family: var(--brand-font-heading); }