/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  SOVEREIGN DESIGN TOKENS — Vibe OS 4.0                      ║
 * ║  Golden Ratio Fluid Typography + Fibonacci Spacing           ║
 * ║  Must load FIRST before all other stylesheets               ║
 * ╚══════════════════════════════════════════════════════════════╝
 *
 * Typography Scale: Golden Ratio (1.618)
 * Viewport min: 375px  |  Viewport max: 1440px
 * Base: 1rem = 16px
 */

:root {

  /* ── FLUID TYPOGRAPHY — clamp(min, preferred, max) ────────────────────
   * Scale built from base 1rem using ratio 1.25 (Major Third) for body
   * and 1.414 (√2) for display sizes — optimised for Arabic + Latin mix.
   * Formula: clamp(min, [vi * 1vw + vmin], max)
   * ──────────────────────────────────────────────────────────────────── */
  --text-2xs:  clamp(0.625rem,  0.56vw  + 0.52rem, 0.75rem);   /* 10-12px */
  --text-xs:   clamp(0.75rem,   0.65vw  + 0.63rem, 0.875rem);  /* 12-14px */
  --text-sm:   clamp(0.875rem,  0.78vw  + 0.73rem, 1rem);      /* 14-16px */
  --text-base: clamp(1rem,      0.91vw  + 0.83rem, 1.125rem);  /* 16-18px */
  --text-md:   clamp(1.125rem,  1.17vw  + 0.91rem, 1.375rem);  /* 18-22px */
  --text-lg:   clamp(1.25rem,   1.43vw  + 0.98rem, 1.625rem);  /* 20-26px */
  --text-xl:   clamp(1.5rem,    1.95vw  + 1.13rem, 2rem);      /* 24-32px */
  --text-2xl:  clamp(1.875rem,  2.73vw  + 1.36rem, 2.75rem);   /* 30-44px */
  --text-3xl:  clamp(2.25rem,   3.9vw   + 1.52rem, 3.5rem);    /* 36-56px */
  --text-4xl:  clamp(2.75rem,   5.2vw   + 1.75rem, 4.5rem);    /* 44-72px */
  --text-hero: clamp(3.25rem,   7.5vw   + 1.8rem,  6.5rem);    /* 52-104px */

  /* ── LINE HEIGHTS ──────────────────────────────────────────────────── */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;
  --lh-loose:   2.0;

  /* ── LETTER SPACING (kerning) ──────────────────────────────────────── */
  --ls-tight:   -0.04em;
  --ls-snug:    -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.14em;

  /* ── FIBONACCI / GOLDEN RATIO SPACING SCALE ───────────────────────────
   * Base unit: 8px (0.5rem)
   * Each step ≈ previous × φ (1.618)
   * 8 → 13 → 21 → 34 → 55 → 89 → 144 → 233 → 377
   * ──────────────────────────────────────────────────────────────────── */
  --sp-1:  0.5rem;    /* 8px  */
  --sp-2:  0.8125rem; /* 13px */
  --sp-3:  1.3125rem; /* 21px */
  --sp-4:  2.125rem;  /* 34px */
  --sp-5:  3.4375rem; /* 55px */
  --sp-6:  5.5625rem; /* 89px */
  --sp-7:  9rem;      /* 144px */
  --sp-8:  14.5625rem;/* 233px */

  /* Fluid section padding using clamp */
  --section-y: clamp(var(--sp-5), 8vw, var(--sp-7));  /* 55-144px */
  --section-x: clamp(var(--sp-3), 5vw, var(--sp-6));  /* 21-89px  */
  --card-pad:  clamp(var(--sp-3), 3vw, var(--sp-5));  /* 21-55px  */

  /* ── ANIMATION TIMING — Precision Easing Library ──────────────────── */
  --ease-expo-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-expo-inout: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-back-out:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-back-in:    cubic-bezier(0.36, 0, 0.66, -0.56);
  --ease-circ-out:   cubic-bezier(0, 0.55, 0.45, 1);
  --ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Duration scale */
  --dur-instant:  80ms;
  --dur-fast:     160ms;
  --dur-normal:   300ms;
  --dur-slow:     500ms;
  --dur-slower:   800ms;
  --dur-cinematic:1200ms;

  /* ── SHADOW SYSTEM — Elevation layers ──────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.25), 0 1px 1px rgba(0,0,0,0.15);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.3),  0 1px 3px rgba(0,0,0,0.2);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.38), 0 2px 8px rgba(0,0,0,0.22);
  --shadow-4: 0 16px 48px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.28);
  --shadow-5: 0 32px 80px rgba(0,0,0,0.55), 0 8px 32px rgba(0,0,0,0.35);

  /* Coloured glows */
  --glow-lime:  0 0 32px rgba(163,207,43,0.28), 0 0 64px rgba(163,207,43,0.12);
  --glow-teal:  0 0 32px rgba(0,137,123,0.28),  0 0 64px rgba(0,137,123,0.12);
  --glow-cyan:  0 0 32px rgba(0,224,198,0.2),   0 0 64px rgba(0,224,198,0.08);

  /* ── BORDER RADIUS SCALE ─────────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --r-pill: 9999px;

  /* ── GLASS TOKEN SYSTEM ─────────────────────────────────────────────── */
  --glass-depth-1: rgba(2,  18, 22, 0.45);
  --glass-depth-2: rgba(4,  22, 28, 0.60);
  --glass-depth-3: rgba(6,  26, 34, 0.72);
  --glass-blur-sm: saturate(160%) blur(12px);
  --glass-blur-md: saturate(180%) blur(20px);
  --glass-blur-lg: saturate(200%) blur(32px);

  /* Cursor glow (updated by JS) */
  --cursor-glow-x:  50%;
  --cursor-glow-y:  -20%;
}

/* ── Apply fluid typography globally ─────────────────────────────────────── */

/* Hero H1 */
.hero-title,
h1.hero-title { font-size: var(--text-hero) !important; line-height: var(--lh-tight); letter-spacing: var(--ls-snug); }

/* Section titles */
.section-title,
h2.section-title { font-size: var(--text-3xl) !important; line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }

/* Card titles */
.card-title,
.srv-title,
.course-title,
h3 { font-size: var(--text-xl); line-height: var(--lh-snug); }

/* Body text */
.hero-desc,
.section-desc,
.srv-desc,
p { font-size: var(--text-base); line-height: var(--lh-relaxed); }

/* Labels & meta */
.section-tag,
.badge,
.label,
small { font-size: var(--text-sm); letter-spacing: var(--ls-wide); }

/* Navigation */
.nav-link { font-size: var(--text-sm); letter-spacing: var(--ls-wide); }

/* Micro text */
.micro,
.caption { font-size: var(--text-xs); letter-spacing: var(--ls-wider); }

/* ── Cairo font optical correction ─────────────────────────────────────── */
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
body.rtl h1,
body.rtl h2,
body.rtl h3 {
  font-feature-settings: "kern" 1, "calt" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── Outfit font optical correction ────────────────────────────────────── */
body.ltr h1,
body.ltr h2,
body.ltr .hero-title {
  font-feature-settings: "kern" 1, "ss01" 1, "calt" 1;
  letter-spacing: var(--ls-tight);
}

/* ── Bento Grid Golden Ratio spacing ───────────────────────────────────── */
.bento-grid,
.srv-main-grid,
.projects-grid,
.courses-grid,
.skills-grid {
  gap: var(--sp-3) !important;
}

/* Section padding standardised */
.section {
  padding: var(--section-y) 0;
}

/* ── prefers-reduced-motion safety ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration:       0.01ms !important;
    animation-iteration-count:1      !important;
    transition-duration:      0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   UNIFIED BUTTON SYSTEM
   Usage: <button class="btn btn-primary">, <a class="btn btn-ghost btn-lg">
   Existing page-specific button classes are unaffected (additive only).
══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 0.75em 1.5em;
  border-radius: var(--r-pill);
  font-family: 'Cairo', 'Space Grotesk', sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-expo-out),
    box-shadow var(--dur-fast) var(--ease-expo-out),
    background var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}

.btn:active { transform: scale(0.97); }

/* Primary — lime → teal gradient */
.btn-primary {
  background: linear-gradient(135deg, #a3cf2b 0%, #00897b 100%);
  color: #021a1e;
  border-color: transparent;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-lime), var(--shadow-3);
}

/* Secondary — teal fill */
.btn-secondary {
  background: linear-gradient(135deg, #00897b 0%, #006d64 100%);
  color: #ffffff;
  border-color: transparent;
}
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-teal), var(--shadow-3);
}

/* Ghost — glass border */
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(163, 207, 43, 0.08);
  border-color: rgba(163, 207, 43, 0.3);
  color: #a3cf2b;
  transform: translateY(-2px);
}

/* Size modifiers */
.btn-sm {
  font-size: var(--text-xs);
  padding: 0.6em 1.2em;
}
.btn-lg {
  font-size: var(--text-base);
  padding: 0.9em 2em;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none !important; }
  .btn:hover, .btn:active { transform: none !important; }
}