/* ============================================================
   HUPFAST DESIGN SYSTEM — design-system.css
   Elevated visual foundation for Hupfast AI Ecosystem
   Arabic Primary with Alexandria Google Font & Default Light Theme
   ============================================================ */

/* ── Distinctive Google Fonts ───────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Design Tokens & Base Theme ─────────────────────────────── */
:root {
  /* Brand Core Colors */
  --brand-blue-light:  #1890ff;
  --brand-blue:        #2952e3;
  --brand-blue-deep:   #1b3bb8;
  --brand-violet:      #7c5cfc;
  --brand-cyan:        #06b6d4;

  /* Brand Gradients */
  --brand-gradient: linear-gradient(135deg, #1890ff 0%, #2952e3 50%, #7c5cfc 100%);
  --brand-gradient-glow: linear-gradient(135deg, rgba(24, 144, 255, 0.25) 0%, rgba(41, 82, 227, 0.25) 50%, rgba(124, 92, 252, 0.25) 100%);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(41, 82, 227, 0.05) 60%, rgba(124, 92, 252, 0.08) 100%);
  --brand-gradient-text: linear-gradient(135deg, #1d4ed8 0%, #2563eb 40%, #7c3aed 100%);

  /* Spacing Scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;

  /* Section Padding */
  --section-py: 80px;
  --section-py-lg: 104px;
  --section-py-sm: 48px;

  /* Refined Proportional Typography Scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   19px;
  --text-xl:   22px;
  --text-2xl:  26px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  42px;
  --text-6xl:  50px;

  /* Font Weights */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;
  --font-black:    900;

  /* Line Heights */
  --leading-tight:   1.25;
  --leading-snug:    1.4;
  --leading-normal:  1.65;
  --leading-relaxed: 1.8;

  /* Border Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 26px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   380ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index scale */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-top:     400;

  /* Container */
  --container-max: 1240px;
  --container-xl:  1140px;
  --container-lg:  980px;
  --container-md:  720px;

  /* Nav Height */
  --nav-height: 76px;

  /* Distinctive Typography Settings */
  --font-ar: 'Alexandria', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-en: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: var(--font-ar);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── DEFAULT THEME: Light Mode ───────────────────────────────── */
:root,
html[data-theme="light"] {
  --bg-primary:       #f8fafc;
  --bg-secondary:     #ffffff;
  --bg-tertiary:      #f1f5f9;
  --bg-surface:       #ffffff;
  --bg-card:          #ffffff;
  --bg-card-hover:    #ffffff;
  --bg-card-solid:    #ffffff;
  --bg-hero:          linear-gradient(180deg, #f1f6fe 0%, #ffffff 100%);
  --bg-strip:         #ffffff;

  --text-primary:     #090d1a;
  --text-secondary:   #475569;
  --text-muted:       #64748b;
  --text-white:       #ffffff;
  --text-white-70:    rgba(255, 255, 255, 0.75);
  --text-white-50:    rgba(255, 255, 255, 0.55);

  --border:           rgba(15, 23, 42, 0.08);
  --border-medium:    rgba(15, 23, 42, 0.14);
  --border-glow:      rgba(41, 82, 227, 0.18);
  --border-highlight: rgba(37, 99, 235, 0.25);

  --nav-bg:           rgba(255, 255, 255, 0.85);
  --nav-bg-scrolled:  rgba(255, 255, 255, 0.96);
  --nav-border-scrolled: rgba(15, 23, 42, 0.08);

  --shadow-xs:        0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:        0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md:        0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-lg:        0 12px 30px rgba(15, 23, 42, 0.09);
  --shadow-xl:        0 18px 45px rgba(15, 23, 42, 0.10);
  --shadow-glow:      0 0 24px rgba(41, 82, 227, 0.14);
  --shadow-brand:     0 6px 24px rgba(37, 99, 235, 0.22);
  --shadow-brand-lg:  0 12px 36px rgba(37, 99, 235, 0.28);

  --badge-bg:         rgba(37, 99, 235, 0.08);
  --badge-border:     rgba(37, 99, 235, 0.20);
  --badge-text:       #1d4ed8;

  --input-bg:         #ffffff;
  --input-border:     rgba(15, 23, 42, 0.14);

  --grid-pattern:     rgba(15, 23, 42, 0.03);
}

/* ── OVERRIDE THEME: Dark Mode ────────────────────────────────── */
html[data-theme="dark"] {
  --bg-primary:       #060913;
  --bg-secondary:     #0b1021;
  --bg-tertiary:      #11182e;
  --bg-surface:       #151e38;
  --bg-card:          #0c1224;
  --bg-card-hover:    #111a33;
  --bg-card-solid:    #0f172a;
  --bg-hero:          #060913;
  --bg-strip:         #080d1b;

  --text-primary:     #f8fafc;
  --text-secondary:   #94a3b8;
  --text-muted:       #64748b;
  --text-white:       #ffffff;
  --text-white-70:    rgba(255, 255, 255, 0.72);
  --text-white-50:    rgba(255, 255, 255, 0.50);

  --border:           rgba(255, 255, 255, 0.08);
  --border-medium:    rgba(255, 255, 255, 0.14);
  --border-glow:      rgba(41, 82, 227, 0.35);
  --border-highlight: rgba(56, 189, 248, 0.3);

  --nav-bg:           rgba(6, 9, 19, 0.80);
  --nav-bg-scrolled:  rgba(6, 9, 19, 0.94);
  --nav-border-scrolled: rgba(255, 255, 255, 0.09);

  --shadow-xs:        0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-sm:        0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md:        0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:        0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl:        0 24px 60px rgba(0, 0, 0, 0.7);
  --shadow-glow:      0 0 30px rgba(41, 82, 227, 0.30);
  --shadow-brand:     0 8px 32px rgba(37, 99, 235, 0.35);
  --shadow-brand-lg:  0 16px 48px rgba(37, 99, 235, 0.45);

  --badge-bg:         rgba(41, 82, 227, 0.15);
  --badge-border:     rgba(96, 165, 250, 0.25);
  --badge-text:       #93c5fd;

  --input-bg:         rgba(15, 23, 42, 0.7);
  --input-border:     rgba(255, 255, 255, 0.14);

  --grid-pattern:     rgba(255, 255, 255, 0.03);

  --brand-gradient-text: linear-gradient(135deg, #38bdf8 0%, #60a5fa 40%, #c084fc 100%);
}

/* ── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* Directional Typography Handlers */
[dir="rtl"],
html[dir="rtl"] body {
  font-family: var(--font-ar);
  direction: rtl;
  text-align: right;
}

[dir="ltr"],
html[dir="ltr"] body {
  font-family: var(--font-en);
  direction: ltr;
  text-align: left;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ── Typography Utilities ────────────────────────────────────── */
.text-gradient {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-base    { font-size: var(--text-base); }
.text-md      { font-size: var(--text-md); }
.text-lg      { font-size: var(--text-lg); }
.text-xl      { font-size: var(--text-xl); }
.text-2xl     { font-size: var(--text-2xl); }
.text-3xl     { font-size: var(--text-3xl); }
.text-4xl     { font-size: var(--text-4xl); }
.text-5xl     { font-size: var(--text-5xl); }
.text-6xl     { font-size: var(--text-6xl); }

.font-light    { font-weight: var(--font-light); }
.font-regular  { font-weight: var(--font-regular); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }
.font-extrabold{ font-weight: var(--font-extrabold); }
.font-black    { font-weight: var(--font-black); }

.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-white     { color: var(--text-white); }
.text-brand     { color: var(--brand-blue-light); }

/* ── Layout Containers ───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 36px;
}

.container-xl {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: 36px;
}

.section {
  padding-block: var(--section-py);
  position: relative;
}

.section-lg {
  padding-block: var(--section-py-lg);
  position: relative;
}

.section-sm {
  padding-block: var(--section-py-sm);
  position: relative;
}

/* ── Display / Flex / Grid Utilities ─────────────────────────── */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-start  { justify-content: flex-start; }
.justify-end    { justify-content: flex-end; }
.flex-wrap      { flex-wrap: wrap; }

.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-7  { gap: var(--space-7); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

.grid { display: grid; }

/* ── Section Label ───────────────────────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: var(--font-bold);
  letter-spacing: 0.02em;
  color: var(--badge-text);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.section-label-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-blue-light);
  box-shadow: 0 0 8px var(--brand-blue-light);
}

/* ── Section Heading (Refined Editorial Size) ────────────────── */
.section-heading {
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.section-heading.wide { max-width: 34ch; }
.section-heading.full { max-width: none; }
.section-heading.light { color: #ffffff !important; }

.section-subheading {
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 60ch;
}
.section-subheading.light { color: rgba(255, 255, 255, 0.82) !important; }

.section-label.light {
  background: rgba(37, 99, 235, 0.2) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #38bdf8 !important;
}


/* ── Dividers ────────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .container, .container-xl {
    padding-inline: 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-py: 56px;
    --section-py-lg: 72px;
    --section-py-sm: 40px;
    --nav-height: 68px;
  }
  .container, .container-xl {
    padding-inline: 18px;
  }
}

@media (max-width: 480px) {
  .container, .container-xl {
    padding-inline: 14px;
  }
}