/* =======================================================
   K12 CRAFTER — DESIGN TOKENS
   Custom properties only. No selectors beyond :root.
   ======================================================= */
:root {
  /* Brand — Blue */
  --k-blue:        #0047BB;
  --k-blue-dark:   #00338A;
  --k-blue-light:  #EBF3FF;
  --k-blue-mid:    #CCDFF8;

  /* Brand — Green (CTA) */
  --k-green:       #2BB656;
  --k-green-dark:  #1E8C40;
  --k-green-light: #E6F7EC;

  /* Brand — Navy */
  --k-navy:        #001D6E;

  /* Brand — Sky */
  --k-sky:         #D6ECFF;

  /* Neutrals */
  --k-white:       #FFFFFF;
  --k-gray-50:     #F7F8FC;
  --k-gray-100:    #EFF1F6;
  --k-gray-200:    #DDE0EA;
  --k-gray-300:    #C8CDDB;
  --k-gray-500:    #7A809A;
  --k-gray-700:    #3D4260;
  --k-gray-900:    #111827;

  /* Semantic */
  --color-cta:          var(--k-green);
  --color-cta-hover:    var(--k-green-dark);
  --color-link:         var(--k-blue);
  --color-link-hover:   var(--k-blue-dark);
  --color-heading:      var(--k-navy);
  --color-body:         var(--k-gray-700);
  --color-muted:        var(--k-gray-500);
  --color-border:       var(--k-gray-200);
  --color-border-focus: var(--k-blue);
  --color-bg-page:      var(--k-gray-50);
  --color-bg-surface:   var(--k-white);
  --color-bg-tint:      var(--k-blue-light);
  --color-bg-footer:    var(--k-navy);
  --color-success:      var(--k-green-dark);
  --color-warning:      #92400E;
  --color-error:        #E24B4A;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Container widths */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* Motion */
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-default:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:       120ms;
  --dur-normal:     200ms;
  --dur-slow:       350ms;
  --duration-fast:   var(--dur-fast);
  --duration-normal: var(--dur-normal);
  --duration-slow:   var(--dur-slow);
}