/* ============================================================
   DESIGN TOKENS — TLC Montessori Clone
   Source: https://www.tlcmontessoripreschool.co.in/
   ============================================================ */

@font-face {
  font-family: "ARCENA";
  src: url("../fonts/ARCENA.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {

  /* ── Colors ───────────────────────────────────────────── */
  --color-primary:          #FBD432;
  --color-primary-dark:     #fd8e00;
  --color-primary-light:    #fec311;
  --color-secondary:        #77cabd;
  --color-accent:           #ff9a00;

  --color-text-base:        #777777;
  --color-text-dark:        #232323;
  --color-text-muted:       #999999;
  --color-text-inverse:     #ffffff;
  --color-heading:          #232323;
  --color-nav-link:         #646464;

  --color-bg-body:          #ffffff;
  --color-bg-section-alt:   #f6f6f7;
  --color-bg-card:          #ffffff;
  --color-bg-footer:        #77cabd;
  --color-bg-footer-bottom: #5db8aa;
  --color-bg-navbar:        transparent;
  --color-bg-navbar-scroll: #ffffff;
  --color-bg-nav-link:      linear-gradient(to right, #fec311 0%, rgba(251,211,50,0.79) 51%, #fdc714 100%);

  --color-border:           #ececec;
  --color-shadow:           rgba(0,0,0,0.1);

  /* ── Program card accent colors ──────────────────────── */
  --color-card-1:  #8373ce;
  --color-card-2:  #77cabd;
  --color-card-3:  #84bed6;
  --color-card-4:  #fc5b4e;
  --color-card-5:  #adcb69;
  --color-card-6:  #f8b54d;
  --color-card-7:  #ec4f74;
  --color-card-8:  #5bc89f;

  /* ── Typography ───────────────────────────────────────── */
  --font-primary:    "ARCENA", sans-serif;
  --font-secondary:  'Poppins', 'Raleway', sans-serif;
  --font-body:       'Poppins', sans-serif;
  --font-dosis:      'Dosis', sans-serif;
  --font-icon:       "FontAwesome";

  --text-xs:    10px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   20px;
  --text-3xl:   25px;
  --text-4xl:   30px;
  --text-5xl:   42px;
  --text-hero:  50px;

  --weight-thin:      100;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  --leading-tight:  1.2;
  --leading-base:   1.5;
  --leading-loose:  1.8;
  --leading-nav:    1.0;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.05em;

  /* ── 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;
  --space-30:  120px;

  --section-padding-y:      120px;
  --section-padding-y-sm:   60px;
  --section-padding-y-xs:   40px;
  --container-max-width:    1170px;
  --container-padding-x:    15px;

  /* ── Layout ───────────────────────────────────────────── */
  --hero-height:            490px;
  --navbar-height:          70px;
  --navbar-height-scrolled: 60px;

  --border-radius-sm:   5px;
  --border-radius-md:   10px;
  --border-radius-lg:   15px;
  --border-radius-pill: 9999px;

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:    0.3s ease;
  --transition-base:    0.5s ease;
  --transition-slow:    0.8s ease;

  /* ── Z-index ──────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  5;
  --z-overlay: 9;
  --z-navbar:  99;
  --z-fixed:   999;
  --z-modal:   9999;
  --z-top:     99999;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.16);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.10);
}