/* ==========================================================================
   Kawkab Academy — design tokens
   Single source of truth for the brand system. Do not introduce colors,
   fonts or spacing values outside this file.
   ========================================================================== */

:root {
  /* --- Brand color ------------------------------------------------------ */
  --kw-purple:        #392F5A;  /* Deep Purple — primary brand */
  --kw-gold:          #F8B400;  /* Bright Gold — accent / action */
  --kw-white:         #FFFFFF;

  /* Purple tints (derived — backgrounds, borders, secondary text) */
  --kw-purple-900:    #2B2345;
  --kw-purple-700:    #4A4166;
  --kw-purple-500:    #6B6480;
  --kw-purple-300:    #8A83A0;
  --kw-purple-200:    #A29CB5;
  --kw-purple-100:    #DCD8E8;
  --kw-purple-050:    #ECEAF2;
  --kw-purple-025:    #F4F3F8;
  --kw-purple-012:    #FBFAFE;

  /* Gold tints */
  --kw-gold-700:      #7A5B00;  /* readable gold-family text on light fills */
  --kw-gold-200:      #F3E2B8;
  --kw-gold-100:      #FEF6E3;
  --kw-gold-050:      #FEFBF2;

  /* Semantic roles */
  --kw-bg:            var(--kw-white);
  --kw-bg-soft:       var(--kw-purple-012);
  --kw-text:          var(--kw-purple);
  --kw-text-muted:    var(--kw-purple-500);
  --kw-text-faint:    var(--kw-purple-300);
  --kw-border:        var(--kw-purple-050);
  --kw-border-strong: var(--kw-purple-100);

  /* --- Typography ------------------------------------------------------- */
  --kw-font-head:     'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kw-font-body:     'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kw-font-accent:   'Nunito', var(--kw-font-body);  /* sparing use only */

  /* Fluid type scale */
  --kw-fs-h1:         clamp(34px, 5.2vw, 58px);
  --kw-fs-h2:         clamp(27px, 3.4vw, 38px);
  --kw-fs-h3:         clamp(18px, 1.8vw, 22px);
  --kw-fs-lead:       clamp(16px, 1.5vw, 18.5px);
  --kw-fs-body:       16px;
  --kw-fs-sm:         14px;
  --kw-fs-xs:         12.5px;
  --kw-fs-eyebrow:    11.5px;

  /* --- Space ------------------------------------------------------------ */
  --kw-gutter:        clamp(16px, 3vw, 40px);
  --kw-section-y:     clamp(56px, 6vw, 84px);
  --kw-gap:           clamp(16px, 2vw, 24px);
  --kw-maxw:          1360px;
  --kw-maxw-narrow:   1100px;
  --kw-maxw-text:     840px;

  /* --- Radii ------------------------------------------------------------ */
  --kw-r-sm:          9px;
  --kw-r-md:          12px;
  --kw-r-lg:          18px;
  --kw-r-xl:          22px;
  --kw-r-pill:        30px;

  /* --- Elevation -------------------------------------------------------- */
  --kw-shadow-sm:     0 6px 22px rgba(57,47,90,.05);
  --kw-shadow-md:     0 16px 40px rgba(57,47,90,.09);
  --kw-shadow-lg:     0 24px 52px rgba(57,47,90,.13);
  --kw-shadow-gold:   0 4px 16px rgba(248,180,0,.35);

  /* --- Motion ----------------------------------------------------------- */
  --kw-ease:          cubic-bezier(.22,.7,.3,1);
  --kw-t-fast:        .18s ease;
  --kw-t:             .22s ease;
  --kw-t-slow:        .55s var(--kw-ease);

  /* --- Chrome ----------------------------------------------------------- */
  --kw-header-h:      86px;
  --kw-header-h-sm:   70px;
  --kw-z-header:      60;
  --kw-z-drawer:      80;
}