/* ============================================================
   DESIGN TOKENS — Top Notch Educational Consultant
   Premium navy + gold admissions-advisory system
   ============================================================ */

:root {
  /* --- Primary: authoritative navy --- */
  --primary:        #1c3f7c;
  --primary-dark:   #142e5c;
  --primary-darker: #0d1f40;
  --primary-light:  #2f61b0;
  --primary-50:     #f2f6fc;
  --primary-100:    #dfe9f8;
  --primary-200:    #c2d6f1;

  /* --- Accent: gold (CTA, highlights, seals) --- */
  --gold:        #d4a017;
  --gold-dark:   #b3860f;
  --gold-light:  #f0c040;
  --gold-50:     #fdf9ec;
  --gold-100:    #faf0cf;

  /* --- Supporting --- */
  --success:  #16a34a;
  --success-50: #f0fdf4;
  --danger:   #dc2626;
  --warning:  #ea580c;
  --info:     #0ea5e9;

  /* --- Dark surfaces (hero, footer, CTA banner) --- */
  --bg-dark:        #0d1f40;
  --bg-dark-alt:    #142e5c;
  --bg-dark-accent: #1c3f7c;

  /* --- Light surfaces --- */
  --bg-white:     #ffffff;
  --bg-light:     #f7f9fc;
  --bg-gray:      #eef2f8;
  --bg-light-alt: #e4ebf5;

  /* --- Text on light --- */
  --text-dark:           #101a2e;
  --text-dark-secondary: #4d5a72;
  --text-dark-tertiary:  #808da3;

  /* --- Text on dark --- */
  --text-primary:   #f4f7fc;
  --text-secondary: #b3c2da;
  --text-tertiary:  #7d8daa;

  /* --- Gradients --- */
  --gradient-hero:    linear-gradient(135deg, #0d1f40 0%, #142e5c 55%, #1c3f7c 100%);
  --gradient-primary: linear-gradient(135deg, #1c3f7c 0%, #2f61b0 100%);
  --gradient-gold:    linear-gradient(135deg, #d4a017 0%, #f0c040 100%);
  --gradient-text:    linear-gradient(135deg, #d4a017, #f0c040);

  /* --- Borders --- */
  --border-color: #dbe3ee;
  --border-light: #e9eef5;

  /* --- Shadows (navy-tinted) --- */
  --shadow-sm:         0 1px 2px rgba(13, 31, 64, 0.05);
  --shadow-card:       0 1px 3px rgba(13, 31, 64, 0.07), 0 1px 2px rgba(13, 31, 64, 0.04);
  --shadow-card-hover: 0 14px 30px rgba(13, 31, 64, 0.13), 0 4px 10px rgba(13, 31, 64, 0.06);
  --shadow-md:         0 4px 6px -1px rgba(13, 31, 64, 0.09), 0 2px 4px -2px rgba(13, 31, 64, 0.05);
  --shadow-lg:         0 10px 15px -3px rgba(13, 31, 64, 0.1), 0 4px 6px -4px rgba(13, 31, 64, 0.05);
  --shadow-xl:         0 20px 25px -5px rgba(13, 31, 64, 0.11), 0 8px 10px -6px rgba(13, 31, 64, 0.05);
  --shadow-2xl:        0 25px 50px -12px rgba(13, 31, 64, 0.24);
  --shadow-gold:       0 4px 14px rgba(212, 160, 23, 0.34);
  --shadow-navy:       0 4px 14px rgba(28, 63, 124, 0.28);

  /* --- Radius --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- Typography --- */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* --- Spacing --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --section-y:    84px;
  --section-y-md: 56px;
  --section-y-sm: 40px;

  --container:    1200px;
  --container-sm: 880px;

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* --- Layers --- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-popup:    500;
  --z-toast:    600;
}