/* ==========================================================================
   Design Tokens — 埼玉スウィン加須校 / Renaissance-inspired
   Navy-dominant, teal accents, trusted chain feel
   ========================================================================== */

:root {
  /* ----- Colors (Renaissance-tuned) ----- */
  --navy:          #0A2D52;   /* primary: deep navy, headers, headings */
  --navy-deep:     #061E38;   /* deepest navy */
  --navy-soft:     #1A4A7A;

  --blue:          #2B8FD4;   /* brighter accent blue for CTAs/links */
  --blue-deep:     #1A6FB0;
  --blue-light:    #E6F1FA;
  --blue-bg:       #F2F7FC;

  --cyan:          #4BAFA3;   /* Renaissance-style teal */
  --cyan-deep:     #348679;
  --cyan-soft:     #D9ECEA;
  --cyan-bg:       #EBF5F3;

  --pink:          #EAB5B7;   /* soft spring campaign pink */
  --pink-soft:     #FAEBEC;

  --coral:         #E85A5F;   /* trial CTA — slightly muted */
  --coral-deep:    #D04449;
  --coral-soft:    #FBE8E9;

  --yellow:        #F5C542;   /* less saturated, more grown-up */
  --yellow-soft:   #FBF0CF;

  --ink:           #0F1A2E;
  --body:          #546575;
  --caption:       #8593A4;

  --line:          #DDE4ED;
  --line-soft:     #EEF2F7;

  --bg:            #FFFFFF;
  --bg-soft:       #F5F7FA;
  --bg-alt:        #EDF2F7;
  --white:         #FFFFFF;

  /* ----- Gradients — subtle ----- */
  --grad-navy:     linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  --grad-blue:     linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  --grad-cyan:     linear-gradient(135deg, #5FC4B8 0%, var(--cyan) 100%);
  --grad-pink:     linear-gradient(135deg, #F4C8CA 0%, var(--pink) 100%);
  --grad-coral:    linear-gradient(135deg, #F07377 0%, var(--coral) 100%);

  /* ----- Typography ----- */
  --font-display:  'M PLUS 1p', 'Noto Sans JP', sans-serif;
  --font-body:     'Noto Sans JP', sans-serif;
  --font-en:       'Archivo', 'Noto Sans JP', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  4rem;

  --lh-tight:  1.25;
  --lh-snug:   1.45;
  --lh-base:   1.7;
  --lh-loose:  1.9;

  --tracking-tight: -0.02em;
  --tracking-jp:    0.02em;
  --tracking-wide:  0.1em;

  /* ----- Spacing ----- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ----- Radii — Renaissance uses ~4-8px ----- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-pill: 9999px;

  /* ----- Shadows ----- */
  --shadow-sm:  0 1px 3px rgba(10, 45, 82, 0.06);
  --shadow-md:  0 4px 16px rgba(10, 45, 82, 0.08);
  --shadow-lg:  0 16px 40px rgba(10, 45, 82, 0.12);
  --shadow-cta: 0 4px 14px rgba(232, 90, 95, 0.3);
  --shadow-blue: 0 4px 14px rgba(43, 143, 212, 0.3);

  /* ----- Layout ----- */
  --container-max: 1200px;
  --utility-h: 36px;
  --header-h: 72px;

  /* ----- Backward-compat aliases ----- */
  --blue-darker:  var(--navy-deep);
  --blue-mist:    var(--blue-light);
  --aqua:         var(--cyan);
  --aqua-deep:    var(--cyan-deep);
  --paper:        var(--bg);
  --paper-soft:   var(--bg-soft);
  --gold:         var(--yellow);
  --gold-tint:    var(--yellow-soft);
  --coral-tint:   var(--coral-soft);
}