/* ============================================================
   SAWYAA DESIGN SYSTEM — colors_and_type.css
   Fonts loaded via Google Fonts CDN:
   - Plus Jakarta Sans (Latin)
   - Tajawal (Arabic)
   - JetBrains Mono (mono)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   BASE TOKENS — Colors
   ============================================================ */
:root {
  /* Brand Gold */
  --color-gold-light:    #FFD740;
  --color-gold:          #F5C518;
  --color-gold-dark:     #D4A900;
  --color-gold-muted:    rgba(245, 197, 24, 0.15);

  /* Dark Surfaces */
  --color-dark-bg:       #1A1A1A;
  --color-dark-surface:  #242424;
  --color-dark-elevated: #2E2E2E;
  --color-dark-border:   rgba(255,255,255,0.08);
  --color-dark-divider:  rgba(255,255,255,0.05);

  /* Light Surfaces */
  --color-light-bg:      #F5F5F0;
  --color-light-surface: #FFFFFF;
  --color-light-elevated:#FFFFFF;
  --color-light-border:  rgba(0,0,0,0.08);
  --color-light-divider: rgba(0,0,0,0.05);

  /* Text on Dark */
  --color-text-primary-dark:   #FFFFFF;
  --color-text-secondary-dark: #9A9A9A;
  --color-text-muted-dark:     #6B6B6B;

  /* Text on Light */
  --color-text-primary-light:   #1A1A1A;
  --color-text-secondary-light: #5A5A5A;
  --color-text-muted-light:     #9A9A9A;

  /* Neutral Scale */
  --color-neutral-50:  #F5F5F0;
  --color-neutral-100: #EBEBEB;
  --color-neutral-200: #D4D4D0;
  --color-neutral-300: #AFAFAF;
  --color-neutral-400: #9A9A9A;
  --color-neutral-500: #6B6B6B;
  --color-neutral-600: #4A4A4A;
  --color-neutral-700: #3A3A3A;
  --color-neutral-800: #2C2C2C;
  --color-neutral-900: #1A1A1A;

  /* Semantic Colors */
  --color-success:      #22C55E;
  --color-success-bg:   rgba(34, 197, 94, 0.12);
  --color-warning:      #F5C518;
  --color-warning-bg:   rgba(245, 197, 24, 0.12);
  --color-error:        #EF4444;
  --color-error-bg:     rgba(239, 68, 68, 0.12);
  --color-info:         #3B82F6;
  --color-info-bg:      rgba(59, 130, 246, 0.12);

  /* ============================================================
     SPACING TOKENS (4px base grid)
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ============================================================
     CORNER RADII
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  /* Light mode shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.08);

  /* Gold glow (dark surfaces) */
  --shadow-gold-sm: 0 0 12px rgba(245, 197, 24, 0.25);
  --shadow-gold-md: 0 0 24px rgba(245, 197, 24, 0.35);
  --shadow-gold-lg: 0 0 48px rgba(245, 197, 24, 0.30);

  /* ============================================================
     TYPOGRAPHY — Base Scale
     ============================================================ */
  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-arabic:  'Tajawal', 'Plus Jakarta Sans', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Size scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;

  /* Weight */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  --duration-micro:    150ms;
  --duration-standard: 250ms;
  --duration-enter:    400ms;
  --duration-page:     600ms;
}

/* ============================================================
   SEMANTIC ALIASES — Light Mode (default)
   ============================================================ */
:root,
[data-theme="light"] {
  --bg:           var(--color-light-bg);
  --surface:      var(--color-light-surface);
  --surface-elevated: var(--color-light-elevated);
  --border:       var(--color-light-border);
  --divider:      var(--color-light-divider);

  --fg1:          var(--color-text-primary-light);
  --fg2:          var(--color-text-secondary-light);
  --fg3:          var(--color-text-muted-light);

  --accent:       var(--color-gold);
  --accent-hover: var(--color-gold-light);
  --accent-press: var(--color-gold-dark);

  --shadow:       var(--shadow-md);
}

/* ============================================================
   SEMANTIC ALIASES — Dark Mode
   ============================================================ */
[data-theme="dark"] {
  --bg:           var(--color-dark-bg);
  --surface:      var(--color-dark-surface);
  --surface-elevated: var(--color-dark-elevated);
  --border:       var(--color-dark-border);
  --divider:      var(--color-dark-divider);

  --fg1:          var(--color-text-primary-dark);
  --fg2:          var(--color-text-secondary-dark);
  --fg3:          var(--color-text-muted-dark);

  --accent:       var(--color-gold);
  --accent-hover: var(--color-gold-light);
  --accent-press: var(--color-gold-dark);

  --shadow:       none;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */

/* Latin */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-wide);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

/* Arabic */
.ar {
  font-family: var(--font-arabic);
  direction: rtl;
}

.ar-h1 {
  font-family: var(--font-arabic);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  direction: rtl;
}

.ar-h2 {
  font-family: var(--font-arabic);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  direction: rtl;
}

.ar-body {
  font-family: var(--font-arabic);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  direction: rtl;
}

.ar-caption {
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  direction: rtl;
}