/**
 * YemBlue Authoritative Design Tokens
 * Master vocabulary derived directly from YemBlue_Hub.html
 * Shared across:
 * - Official Website (yemblue.org)
 * - YemBlue Academy (academy.yemblue.org)
 * - YemBlue Ocean (ocean.yemblue.org)
 */

:root {
  /* --- Core Brand Colors --- */
  --yb-color-primary-blue: #063B66;
  --yb-color-deep-ocean:   #072F3A;
  --yb-color-ocean-teal:   #0B6F7A;
  --yb-color-tidal-mint:   #26C6B7;
  --yb-color-signal-coral: #FF6B4A;
  --yb-color-coastal-sand: #F1EBD7;
  --yb-color-mist:         #E9F1F0;
  --yb-color-paper:        #F7F8F6;
  --yb-color-charcoal:     #12252A;
  --yb-color-mint-wash:    #99E1D9;

  /* Aliases for universal compatibility */
  --color-primary:     var(--yb-color-primary-blue);
  --color-deep:        var(--yb-color-deep-ocean);
  --color-teal:        var(--yb-color-ocean-teal);
  --color-mint:        var(--yb-color-tidal-mint);
  --color-coral:       var(--yb-color-signal-coral);
  --color-sand:        var(--yb-color-coastal-sand);
  --color-mist:        var(--yb-color-mist);
  --color-paper:       var(--yb-color-paper);
  --color-charcoal:    var(--yb-color-charcoal);

  /* --- Typography --- */
  --yb-font-arabic: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --yb-font-latin:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --yb-font-ar:     var(--yb-font-arabic);
  --yb-font-en:     var(--yb-font-latin);

  /* --- Spacing & Radii --- */
  --yb-radius-sm: 8px;
  --yb-radius-md: 12px;
  --yb-radius-lg: 16px;
  --yb-radius-xl: 24px;
  --yb-radius-full: 9999px;

  /* --- Component Variables --- */
  --yb-header-bg-dark:  rgba(7, 47, 58, 0.95);
  --yb-header-bg-light: #F7F8F6;
  --yb-card-bg-light:   #FFFFFF;
  --yb-card-bg-dark:    rgba(6, 59, 102, 0.4);
  --yb-border-light:    rgba(11, 111, 122, 0.15);
  --yb-border-dark:     rgba(255, 255, 255, 0.1);
}

/* Force Approved Typography System-Wide */
html[lang="ar"],
html[dir="rtl"],
body.rtl,
.font-ar {
  font-family: var(--yb-font-arabic) !important;
}

html[lang="en"],
html[dir="ltr"],
.font-en {
  font-family: var(--yb-font-latin) !important;
}

/* Reusable Utility Classes */
.bg-yb-primary { background-color: var(--yb-color-primary-blue) !important; }
.bg-yb-deep    { background-color: var(--yb-color-deep-ocean) !important; }
.bg-yb-teal    { background-color: var(--yb-color-ocean-teal) !important; }
.bg-yb-mint    { background-color: var(--yb-color-tidal-mint) !important; }
.bg-yb-coral   { background-color: var(--yb-color-signal-coral) !important; }
.bg-yb-paper   { background-color: var(--yb-color-paper) !important; }

.text-yb-primary { color: var(--yb-color-primary-blue) !important; }
.text-yb-deep    { color: var(--yb-color-deep-ocean) !important; }
.text-yb-teal    { color: var(--yb-color-ocean-teal) !important; }
.text-yb-mint    { color: var(--yb-color-tidal-mint) !important; }
.text-yb-coral   { color: var(--yb-color-signal-coral) !important; }
.text-yb-paper   { color: var(--yb-color-paper) !important; }

/* Light Site Header Baseline (Academy Reference Authority) */
header.yb-site-header,
.yb-site-header {
  background-color: var(--yb-color-paper) !important;
  background: var(--yb-color-paper) !important;
  border-bottom: 1px solid rgba(11, 111, 122, 0.15) !important;
  box-shadow: 0 1px 4px rgba(7, 47, 58, 0.05) !important;
}