/* ══════════════════════════════════════════
   Rekastok — Design Tokens
   ══════════════════════════════════════════ */

:root {
  /* Brand */
  --navy:         #1B3F7A;
  --blue:         #2563EB;
  --blue-dark:    #1e40af;
  --blue-light:   #EFF4FF;
  --purple:       #7C3AED;
  --green:        #22C55E;
  --amber:        #F59E0B;

  /* Neutrals */
  --gray-50:      #F8FAFC;
  --gray-100:     #F1F5F9;
  --gray-200:     #E2E8F0;
  --gray-300:     #CBD5E1;
  --gray-400:     #94A3B8;
  --gray-500:     #64748B;
  --gray-600:     #475569;
  --gray-700:     #334155;
  --gray-800:     #1E293B;
  --gray-900:     #0F172A;

  /* Text */
  --text-primary:   #0F172A;
  --text-secondary: #334155;
  --text-muted:     #64748B;
  --text-light:     #94A3B8;

  /* Surface */
  --surface-0: #FFFFFF;
  --surface-1: #F8FAFC;
  --surface-2: #F1F5F9;

  /* Border */
  --border:      #E2E8F0;
  --border-dark: #CBD5E1;

  /* Radii */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm:  0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md:  0 4px 16px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
  --shadow-lg:  0 12px 40px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.07);
  --shadow-xl:  0 24px 64px rgba(15,23,42,0.14), 0 8px 20px rgba(15,23,42,0.08);

  /* Easing */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);

  /* Duration */
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;
}