/* ============================================================
   IMPALA KIDS — DESIGN TOKENS
   Source of truth for all colors, type, spacing, radius, shadow.
   Load this BEFORE bootstrap.rtl.min.css is NOT required —
   it works either order since it only sets custom properties,
   but Bootstrap's own var() usages will pick these up as long
   as this file loads before or after on the same page (CSS
   custom properties resolve at paint time, not load time).
   ============================================================ */

:root {
  /* ---------- 1. RAW COLOR SCALE (--ik- = Impala Kids) ---------- */
  --ik-primary-50:  #EEF7F6;
  --ik-primary-100: #D3EBE9;
  --ik-primary-300: #7FC3BE;
  --ik-primary-500: #0F6E6A;
  --ik-primary-600: #0C5A57;
  --ik-primary-700: #094644;
  --ik-primary-900: #052C2A;

  --ik-secondary-50:  #FFF3EC;
  --ik-secondary-300: #FFB48C;
  --ik-secondary-500: #FF7A4D;
  --ik-secondary-600: #F26030;
  --ik-secondary-700: #D14A1E;

  --ik-bg:            #FAFAF8;
  --ik-surface:       #FFFFFF;
  --ik-surface-alt:   #F4F3F1;
  --ik-border:        #E5E3DF;
  --ik-border-strong: #CFCCC6;
  --ik-text:          #1E2422;
  --ik-text-muted:    #6B7370;
  --ik-text-disabled: #A8ADAA;

  --ik-success:    #1E8A5F;
  --ik-success-bg: #EAF7F1;
  --ik-warning:    #B26A00;
  --ik-warning-bg: #FFF4E0;
  --ik-error:      #C6362E;
  --ik-error-bg:   #FBEAE9;
  --ik-info:       #2563A6;
  --ik-info-bg:    #E9F1FA;

  /* ---------- 2. TYPE SCALE ---------- */
  --ik-font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;

  --ik-fs-display: 40px; --ik-lh-display: 48px; --ik-fw-display: 700;
  --ik-fs-h1:      32px; --ik-lh-h1:      40px; --ik-fw-h1:      700;
  --ik-fs-h2:      24px; --ik-lh-h2:      32px; --ik-fw-h2:      700;
  --ik-fs-h3:      20px; --ik-lh-h3:      28px; --ik-fw-h3:      600;
  --ik-fs-body:    16px; --ik-lh-body:    26px; --ik-fw-body:    400;
  --ik-fs-small:   14px; --ik-lh-small:   22px; --ik-fw-small:   400;
  --ik-fs-caption: 12px; --ik-lh-caption: 18px; --ik-fw-caption: 400;
  --ik-fs-button:  16px; --ik-lh-button:  24px; --ik-fw-button:  600;
  --ik-fs-label:   14px; --ik-lh-label:   20px; --ik-fw-label:   500;

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

  /* ---------- 4. RADIUS ---------- */
  --ik-radius-sm:    6px;
  --ik-radius-md:    10px;
  --ik-radius-lg:    16px;
  --ik-radius-modal: 20px;
  --ik-radius-full:  999px;

  /* ---------- 5. SHADOW ---------- */
  --ik-shadow-xs: 0 1px 2px rgba(20,24,22,0.04);
  --ik-shadow-sm: 0 2px 6px rgba(20,24,22,0.06);
  --ik-shadow-md: 0 6px 16px rgba(20,24,22,0.08);
  --ik-shadow-lg: 0 12px 32px rgba(20,24,22,0.10);

  /* ---------- 6. MOTION ---------- */
  --ik-duration-fast: 120ms;
  --ik-duration-base: 200ms;
  --ik-easing: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---------- 7. Z-INDEX SCALE ---------- */
  --ik-z-dropdown: 1000;
  --ik-z-sticky:   1020;
  --ik-z-sidebar:  1030;
  --ik-z-modal:    1050;
  --ik-z-toast:    1080;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ik-duration-fast: 0ms; --ik-duration-base: 0ms; }
}

/* ============================================================
   BRIDGE LAYER — map IK tokens onto Bootstrap 5.3's own CSS
   variables. This is what lets native .btn, .card, .badge,
   .alert, .modal, .table, .form-control etc. inherit the brand
   automatically, with ZERO Sass recompile and ZERO Bootstrap
   source edits (safe on shared hosting, upgrade-safe).
   ============================================================ */
:root {
  /* Bootstrap theme colors -> IK palette */
  --bs-primary:        var(--ik-primary-500);
  --bs-primary-rgb:     15, 110, 106;
  --bs-secondary:       var(--ik-text-muted);
  --bs-secondary-rgb:  107, 115, 112;
  --bs-success:         var(--ik-success);
  --bs-success-rgb:     30, 138, 95;
  --bs-warning:         var(--ik-warning);
  --bs-warning-rgb:     178, 106, 0;
  --bs-danger:          var(--ik-error);
  --bs-danger-rgb:      198, 54, 46;
  --bs-info:            var(--ik-info);
  --bs-info-rgb:        37, 99, 166;
  --bs-light:           var(--ik-surface-alt);
  --bs-dark:            var(--ik-text);

  --bs-body-bg:         var(--ik-bg);
  --bs-body-color:      var(--ik-text);
  --bs-body-font-family: var(--ik-font-family);
  --bs-body-font-size:  var(--ik-fs-body);
  --bs-body-line-height: 1.6;

  --bs-border-color:    var(--ik-border);
  --bs-border-radius:        var(--ik-radius-md);
  --bs-border-radius-sm:     var(--ik-radius-sm);
  --bs-border-radius-lg:     var(--ik-radius-lg);
  --bs-border-radius-xl:     var(--ik-radius-lg);
  --bs-border-radius-2xl:    var(--ik-radius-modal);
  --bs-border-radius-pill:   var(--ik-radius-full);

  --bs-link-color:       var(--ik-primary-600);
  --bs-link-hover-color: var(--ik-primary-700);

  --bs-emphasis-color: var(--ik-text);
  --bs-secondary-color: var(--ik-text-muted);
  --bs-tertiary-bg: var(--ik-surface-alt);

  --bs-box-shadow:     var(--ik-shadow-md);
  --bs-box-shadow-sm:  var(--ik-shadow-sm);
  --bs-box-shadow-lg:  var(--ik-shadow-lg);

  --bs-btn-font-weight: var(--ik-fw-button);
  --bs-btn-border-radius: var(--ik-radius-md);
  --bs-focus-ring-color: rgba(15, 110, 106, 0.35);
  --bs-focus-ring-width: 0.2rem;
}