/* 
  Aljawharaa Media Sales Engine - Design System 
  Based on Brand Image: Gradient Violet -> Cyan + Glassmorphism
*/

/* Arabic Font Import */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Outfit:wght@500;700&display=swap');

:root {
  /* Brand Core - Extracted from Logo Image */
  --brand-violet: #6a1b9a;
  --brand-purple: #8e24aa;
  --brand-cyan: #00bcd4;
  --brand-blue: #0288d1;

  /* Gradients */
  --bg-gradient: linear-gradient(135deg, #2e003e 0%, #0d001a 50%, #001e26 100%);
  --brand-gradient: linear-gradient(135deg, var(--brand-violet) 0%, var(--brand-cyan) 100%);
  --glass-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);

  /* Neutral / Functional */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.4);

  --surface-glass: rgba(255, 255, 255, 0.03);
  --surface-glass-hover: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(255, 255, 255, 0.1);
  --border-shine: rgba(255, 255, 255, 0.3);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  /* Typography */
  --font-heading: 'Cairo', 'Outfit', sans-serif;
  /* Arabic First */
  --font-body: 'Cairo', sans-serif;

  /* Shadows / Effects */
  --shadow-glow: 0 0 20px rgba(0, 188, 212, 0.15);
  --backdrop-blur: 20px;
}

/* Base Reset & Typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--bg-gradient);
  background-attachment: fixed;
  /* Parallax feel */
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  direction: rtl;
  /* Default Arabic Direction */
  text-align: right;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* LTR Override helper */
body.ltr {
  direction: ltr;
  text-align: left;
}

body.ltr h1,
body.ltr h2,
body.ltr h3 {
  font-family: 'Outfit', sans-serif;
}

/* Utilities */
.glass-panel {
  background: var(--surface-glass);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  border: 1px solid var(--border-glass);
  border-top: 1px solid var(--border-shine);
  /* Top shine for 3D effect */
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}