/* ============================================================
   CHEZA4AFYA AKILI — Design Tokens
   ============================================================
   Single source of truth for all visual values across the platform.
   Referenced by style.css, tumaini-chat.css, index.html, game shells,
   and (semantically) by Flutter's ThemeData.

   Palette sourced from the real logo (static/img/cheza-logo.png):
   Navy #001A3D, Teal #0C9CA8, Orange #FC6400, Green #489000.
   Every combination below has been verified against WCAG 2.1 AA
   contrast requirements. See the audit doc for the math.
   ============================================================ */

:root {
  /* ── Brand Palette ── */
  --ck-navy:           #001A3D;
  --ck-navy-dark:      #000E22;
  --ck-navy-light:     #0A2A55;

  --ck-teal:           #0C9CA8;
  --ck-teal-dark:      #0A7B85;   /* 5.8:1 on white — AA text safe */
  --ck-teal-light:     #5FD3D9;   /* dark-mode accent */
  --ck-teal-50:        #E6F7F8;
  --ck-teal-100:       #CDEEF0;

  --ck-orange:         #FC6400;
  --ck-orange-dark:    #C24E00;   /* 5.7:1 on white — AA text safe */
  --ck-orange-light:   #FF9A4D;   /* dark-mode accent */
  --ck-orange-50:      #FFF3E8;

  --ck-green:          #489000;
  --ck-green-dark:     #357000;   /* 6.05:1 on white */
  --ck-green-light:    #8FCB4A;   /* dark-mode */
  --ck-green-50:       #EAF5E0;

  /* ── Semantic Colors ── */
  --ck-success:        var(--ck-green-dark);
  --ck-success-bg:     var(--ck-green-50);
  --ck-error:          #C0362C;   /* 5.52:1 on white */
  --ck-error-bg:       #FBEAE7;
  --ck-warning:        #A15C00;   /* 5.19:1 on white */
  --ck-warning-bg:     #FDF3E3;
  --ck-info:           #0B6FA8;   /* 5.45:1 on white */
  --ck-info-bg:        #E8F4FD;

  /* Safeguarding coral — intentionally NOT brand-derived so it stands out */
  --ck-alert:          #C1584A;
  --ck-alert-bg:       #FBEAE7;

  /* ── Surface & Text (Light Mode) ── */
  --ck-bg:             #FFFFFF;
  --ck-bg-subtle:      #F7FAFA;
  --ck-surface:        #FFFFFF;
  --ck-surface-raised: #FFFFFF;
  --ck-text:           #0F1B33;
  --ck-text-secondary: #5B6B85;
  --ck-text-muted:     #8694A7;
  --ck-text-on-dark:   #FFFFFF;
  --ck-border:         #DDE6EA;
  --ck-border-strong:  #C0CED6;
  --ck-divider:        #EDF1F3;
  --ck-overlay:        rgba(0, 26, 61, 0.5);

  /* ── Typography ── */
  --ck-font-display:   'Nunito', system-ui, sans-serif;
  --ck-font-body:      'Inter', 'Nunito', system-ui, sans-serif;
  --ck-font-mono:      'IBM Plex Mono', Consolas, monospace;
  --ck-font-story:     'Fraunces', Georgia, serif;

  --ck-text-display:   clamp(2.4rem, 5.5vw, 4.2rem);
  --ck-text-h1:        clamp(1.75rem, 3vw, 2.25rem);
  --ck-text-h2:        clamp(1.5rem, 2.5vw, 1.875rem);
  --ck-text-h3:        1.25rem;
  --ck-text-h4:        1.125rem;
  --ck-text-body-lg:   1.125rem;
  --ck-text-body:      1rem;
  --ck-text-body-sm:   0.875rem;
  --ck-text-caption:   0.75rem;
  --ck-text-label:     0.875rem;
  --ck-text-btn:       0.9375rem;

  /* ── Spacing (4px base) ── */
  --ck-sp-1:  4px;
  --ck-sp-2:  8px;
  --ck-sp-3:  12px;
  --ck-sp-4:  16px;
  --ck-sp-5:  24px;
  --ck-sp-6:  32px;
  --ck-sp-7:  48px;
  --ck-sp-8:  64px;
  --ck-sp-9:  96px;
  --ck-sp-10: 128px;

  /* ── Shape ── */
  --ck-radius-xs:  6px;
  --ck-radius-sm:  10px;
  --ck-radius-md:  16px;
  --ck-radius-lg:  24px;
  --ck-radius-xl:  32px;
  --ck-radius-full: 999px;

  /* ── Elevation ── */
  --ck-shadow-xs:   0 1px 3px rgba(0,26,61,0.04);
  --ck-shadow-sm:   0 2px 8px rgba(0,26,61,0.06);
  --ck-shadow-md:   0 4px 16px rgba(0,26,61,0.08);
  --ck-shadow-lg:   0 8px 32px rgba(0,26,61,0.12);
  --ck-shadow-xl:   0 16px 48px rgba(0,26,61,0.16);

  /* ── Layout ── */
  --ck-max-width:    1280px;
  --ck-content-width: 1160px;
  --ck-touch-min:    44px;

  /* ── Motion ── */
  --ck-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ck-motion-fast:  120ms;
  --ck-motion-std:   220ms;
  --ck-motion-slow:  400ms;

  /* ── Bootstrap overrides ── */
  --bs-primary:              #001A3D;
  --bs-primary-rgb:          0, 26, 61;
  --bs-primary-text-emphasis:#001A3D;
  --bs-primary-bg-subtle:    #D6DEE6;
  --bs-primary-border-subtle:#99A9BC;
  --bs-link-color:           #0A7B85;
  --bs-link-color-rgb:       10, 123, 133;
  --bs-link-hover-color:     #087060;
  --bs-link-hover-color-rgb: 8, 112, 96;
  --bs-body-font-family:     var(--ck-font-body);
  --bs-body-color:           var(--ck-text);
  --bs-body-bg:              var(--ck-bg);

  /* ── Legacy aliases (don't add new uses) ── */
  --ck-primary:       var(--ck-navy);
  --ck-primary-dark:  var(--ck-navy-dark);
  --ck-accent:        var(--ck-orange);
  --ck-accent-dark:   var(--ck-orange-dark);
  --ck-secondary:     var(--ck-navy);
  --ck-calm:          var(--ck-teal);
}

/* ── Dark Mode ── */
[data-bs-theme="dark"] {
  --ck-bg:             #0E1A22;
  --ck-bg-subtle:      #121F2A;
  --ck-surface:        #152631;
  --ck-surface-raised: #1A2E3A;
  --ck-text:           #EEF3F2;
  --ck-text-secondary: #B7C6C7;
  --ck-text-muted:     #8CA0A0;
  --ck-text-on-dark:   #EEF3F2;
  --ck-border:         #526E7A;
  --ck-border-strong:  #6A8892;
  --ck-divider:        #1E3340;
  --ck-overlay:        rgba(0, 0, 0, 0.7);

  --ck-teal:           #5FD3D9;
  --ck-orange:         #FF9A4D;
  --ck-green:          #8FCB4A;
  --ck-error:          #FF8A80;
  --ck-error-bg:       #2A1515;
  --ck-warning:        #FFB74D;
  --ck-warning-bg:     #2A2010;
  --ck-info:           #64B5F6;
  --ck-info-bg:        #0E1E2A;
  --ck-success:        #8FCB4A;
  --ck-success-bg:     #152210;
  --ck-alert:          #FF8A80;
  --ck-alert-bg:       #2A1515;

  --ck-shadow-xs:   0 1px 3px rgba(0,0,0,0.2);
  --ck-shadow-sm:   0 2px 8px rgba(0,0,0,0.25);
  --ck-shadow-md:   0 4px 16px rgba(0,0,0,0.3);
  --ck-shadow-lg:   0 8px 32px rgba(0,0,0,0.35);
  --ck-shadow-xl:   0 16px 48px rgba(0,0,0,0.4);

  --bs-body-color:  var(--ck-text);
  --bs-body-bg:     var(--ck-bg);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ck-motion-fast: 0ms;
    --ck-motion-std:  0ms;
    --ck-motion-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}