/* ============================================
   tokens.css — Digital Dawn Design System
   دروب النور — Paths of Light
   ============================================ */

:root {

  /* ── Backgrounds ── */
  --color-bg:           #0B0907;
  --color-surface:      #141009;
  --color-surface-soft: #1C160F;
  --color-surface-2:    #221B12;

  /* ── Gold (primary brand + CTA) ── */
  --color-primary:      #C9963A;
  --color-primary-dim:  #7A5520;
  --color-accent:       #F0C060;

  /* ── CTA alias ── */
  --color-cta:          #C9963A;

  /* ── Teal (secondary / pills / success) ── */
  --color-secondary:    #26B5A0;
  --color-secondary-bg: rgba(38, 181, 160, 0.14);

  /* ── Decor ── */
  --color-decor:        #F0C060;

  /* ── Text ── */
  --color-text:         #F0EBE1;
  --color-text-muted:   rgba(240, 235, 225, 0.58);
  --color-text-subtle:  rgba(240, 235, 225, 0.32);

  /* ── Borders / Dividers ── */
  --color-divider:      rgba(201, 150, 58, 0.18);
  --color-border:       rgba(201, 150, 58, 0.24);

  /* ── Status ── */
  --color-danger:       #E05252;
  --color-success:      #26B5A0;
  --color-warning:      #F0C060;

  /* ── Gradients ── */
  --grad-hero:   radial-gradient(ellipse 90% 55% at 50% -5%,
                   rgba(201, 150, 58, 0.22) 0%,
                   transparent 65%);
  --grad-card:   linear-gradient(145deg,
                   rgba(28, 22, 15, 0.94),
                   rgba(18, 13, 7, 0.90));
  --grad-cta:    linear-gradient(135deg, #C9963A 0%, #E0AA4A 100%);
  --grad-page-head: linear-gradient(180deg,
                   rgba(201, 150, 58, 0.12) 0%,
                   transparent 100%);
  --grad-divider: linear-gradient(90deg,
                   transparent,
                   var(--color-divider),
                   transparent);

  /* ── Glass ── */
  --glass-bg:     rgba(18, 13, 7, 0.72);
  --glass-border: rgba(201, 150, 58, 0.22);
  --glass-blur:   20px;

  /* ── Shadows ── */
  --shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-md:  0 8px 32px rgba(0, 0, 0, 0.65);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.70);

  /* ── Glow ── */
  --glow-gold:    0 0 28px rgba(201, 150, 58, 0.42);
  --glow-gold-sm: 0 0 14px rgba(201, 150, 58, 0.28);
  --glow-teal:    0 0 20px rgba(38, 181, 160, 0.32);

  /* ── Typography ── */
  --font-family-ar: "Tajawal", "Cairo", "Noto Kufi Arabic",
                    system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  18px;
  --font-size-xl:  22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-4xl: clamp(36px, 5vw, 54px);

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Spacing ── */
  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* ── Radius ── */
  --radius-8:   8px;
  --radius-12:  12px;
  --radius-16:  16px;
  --radius-20:  20px;
  --radius-full: 9999px;

  /* ── Layout ── */
  --container-max: 1120px;

  /* ── Motion ── */
  --motion-fast: 160ms;
  --motion-med:  260ms;
  --motion-slow: 400ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}