/* =====================================================================
   تعلم بوعي — Global Design Tokens
   Phase 6B: Brand Identity System
   
   This file defines the centralized design tokens for the entire
   application. All brand colors, typography, spacing, and visual
   properties are defined here as CSS custom properties.
   
   Usage: var(--color-primary), var(--font-arabic), etc.
   ===================================================================== */

:root {
  /* ---- Brand Colors ---- */
  --color-primary: #0F3D32;
  --color-primary-light: #1A5A48;
  --color-primary-dark: #071A24;
  --color-accent: #C9A45C;
  --color-accent-dark: #B8944D;
  --color-accent-light: #D4B87A;

  /* ---- Background Colors ---- */
  --color-bg: #FAF7EF;
  --color-bg-soft: #F3EDE0;
  --color-bg-muted: #EFE3CC;
  --color-card: #FFFDF7;

  /* ---- Text Colors ---- */
  --color-text: #17201D;
  --color-text-secondary: #4A524E;
  --color-muted: #6B6F69;
  --color-on-primary: #FAF7EF;

  /* ---- Semantic Colors ---- */
  --color-success: #1A6B4A;
  --color-danger: #8B2E2E;
  --color-warning: #9C7A2B;
  --color-info: #1E5F74;

  /* ---- Border ---- */
  --color-border: #E8E0D0;
  --color-border-light: #F0EBE0;

  /* ---- Typography ---- */
  --font-arabic: 'IBM Plex Sans Arabic', 'Cairo', 'Segoe UI', sans-serif;
  --font-english: 'Inter', 'Segoe UI', sans-serif;

  /* ---- Border Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 3px rgba(15, 61, 50, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 61, 50, 0.06);
  --shadow-md: 0 4px 20px rgba(15, 61, 50, 0.08);
  --shadow-lg: 0 8px 32px rgba(15, 61, 50, 0.10);
  --shadow-card: 0 2px 16px rgba(15, 61, 50, 0.06);

  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ---- Geometric Pattern ---- */
  --pattern-geometric: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230F3D32' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Arabic-First Body Typography ---- */
body {
  font-family: var(--font-arabic);
}

body.is-ltr {
  font-family: var(--font-english);
}

/* ---- Brand Logo Text ---- */
.brand-logo-text {
  font-family: 'Cairo', var(--font-arabic);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.3;
}

.brand-logo-text:hover {
  color: var(--color-primary-light);
  text-decoration: none;
}

/* Sidebar variant */
.brand-logo-sidebar {
  color: var(--color-accent);
  font-size: 1.25rem;
}

.brand-logo-sidebar:hover {
  color: var(--color-accent-light);
}

/* ---- Geometric Pattern Backgrounds ---- */
.bg-pattern {
  background-image: var(--pattern-geometric);
}

.bg-brand {
  background-color: var(--color-bg);
}

.bg-brand-pattern {
  background-color: var(--color-bg);
  background-image: var(--pattern-geometric);
}

/* ---- Page-Level Brand Overrides ---- */

/* Auth pages (login, register, forgot-password) */
.contact-area.bg-light {
  background-color: var(--color-bg) !important;
  background-image: var(--pattern-geometric);
}

/* Course discovery / available courses wrapper — replace legacy blue/gray with brand cream */
.card-content-wrapper.bg-gray {
  background-color: var(--color-bg) !important;
}

/* Theme button override for legacy .theme-btn */
.btn.theme-btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: all var(--transition-normal);
}

.btn.theme-btn:hover,
.btn.theme-btn:focus {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-on-primary);
  box-shadow: 0 4px 16px rgba(15, 61, 50, 0.2);
  transform: translateY(-1px);
}

.btn.theme-btn:active {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(0);
}

/* Text/link color overrides */
a.text-color,
a.text-color:hover {
  color: var(--color-accent);
}

.btn-text {
  color: var(--color-accent);
}

.btn-text:hover {
  color: var(--color-accent-dark);
}