/* ============================================================
   SHREE PAAVITRA ARTS ACADEMY
   Design Tokens — CSS Custom Properties
   Version 1.0 | 2026
   ============================================================ */

:root {

  /* --------------------------------------------------------
     BRAND COLORS
     -------------------------------------------------------- */

  /* Maroon Scale — Primary Brand Color */
  --color-maroon-950:  #1A0202;
  --color-maroon-900:  #2D0505;
  --color-maroon-800:  #3A0808;
  --color-maroon-700:  #5C1010;
  --color-maroon-600:  #751515;
  --color-maroon-500:  #8B1A1A;
  --color-maroon-400:  #A83030;
  --color-maroon-300:  #C45454;
  --color-maroon-200:  #DE9090;
  --color-maroon-100:  #F5DCDC;
  --color-maroon-50:   #FDF0F0;

  /* Gold Scale — Accent & Decorative */
  --color-gold-950:    #3D2800;
  --color-gold-900:    #5C3D00;
  --color-gold-800:    #7A5200;
  --color-gold-700:    #9A6800;
  --color-gold-600:    #B38000;
  --color-gold-500:    #C9A227;
  --color-gold-400:    #D4B540;
  --color-gold-300:    #E0C86A;
  --color-gold-200:    #ECD9A0;
  --color-gold-100:    #F5ECC8;
  --color-gold-50:     #FBF7EC;

  /* Neutral Scale */
  --color-black:       #0D0D0D;
  --color-neutral-950: #0D0D0D;
  --color-neutral-900: #171717;
  --color-neutral-800: #262626;
  --color-neutral-700: #404040;
  --color-neutral-600: #525252;
  --color-neutral-500: #737373;
  --color-neutral-400: #A3A3A3;
  --color-neutral-300: #D4D4D4;
  --color-neutral-200: #E5E5E5;
  --color-neutral-100: #F5F5F5;
  --color-neutral-50:  #FAFAFA;
  --color-white:       #FFFFFF;

  /* Ivory Scale — Warm Light Backgrounds */
  --color-ivory-900:   #C4B08A;
  --color-ivory-800:   #D4C4A0;
  --color-ivory-700:   #E2D5B8;
  --color-ivory-600:   #EDE4D0;
  --color-ivory-500:   #F0E8D8;
  --color-ivory-400:   #F4EEE2;
  --color-ivory-300:   #F7F2EA;
  --color-ivory-200:   #F9F5EF;
  --color-ivory-100:   #FAF7F3;
  --color-ivory-50:    #FDFBF8;

  /* Status Colors */
  --color-success:     #2D7A4F;
  --color-success-bg:  #E8F5EE;
  --color-warning:     #A86A00;
  --color-warning-bg:  #FFF3E0;
  --color-error:       #C0392B;
  --color-error-bg:    #FDECEA;
  --color-info:        #1A5F8A;
  --color-info-bg:     #E3F2FD;

  /* --------------------------------------------------------
     SEMANTIC COLOR ROLES
     -------------------------------------------------------- */

  --clr-bg:             var(--color-ivory-50);
  --clr-bg-alt:         var(--color-ivory-300);
  --clr-bg-dark:        var(--color-neutral-950);
  --clr-bg-maroon:      var(--color-maroon-800);
  --clr-bg-maroon-deep: var(--color-maroon-950);

  --clr-text:           var(--color-neutral-900);
  --clr-text-secondary: #4A3728;
  --clr-text-muted:     var(--color-neutral-500);
  --clr-text-gold:      var(--color-gold-500);
  --clr-text-on-dark:   var(--color-ivory-200);
  --clr-text-on-maroon: var(--color-ivory-300);

  --clr-border:         var(--color-ivory-600);
  --clr-border-gold:    rgba(201, 162, 39, 0.3);
  --clr-border-maroon:  rgba(92, 16, 16, 0.2);
  --clr-border-dark:    rgba(255, 255, 255, 0.08);

  --clr-primary:        var(--color-maroon-700);
  --clr-primary-hover:  var(--color-maroon-600);
  --clr-accent:         var(--color-gold-500);
  --clr-accent-hover:   var(--color-gold-400);

  /* --------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------- */

  --font-heading: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body:    'DM Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --font-accent:  'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Font Size Scale */
  --fs-2xs:  0.625rem;   /* 10px */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  1.875rem;   /* 30px */
  --fs-3xl:  2.25rem;    /* 36px */
  --fs-4xl:  3rem;       /* 48px */
  --fs-5xl:  3.75rem;    /* 60px */
  --fs-6xl:  4.5rem;     /* 72px */
  --fs-7xl:  6rem;       /* 96px */
  --fs-8xl:  8rem;       /* 128px */

  /* Line Height */
  --lh-none:    1;
  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   2;

  /* Letter Spacing */
  --ls-tight:   -0.05em;
  --ls-normal:  0;
  --ls-wide:    0.025em;
  --ls-wider:   0.05em;
  --ls-widest:  0.1em;
  --ls-caps:    0.15em;

  /* --------------------------------------------------------
     SPACING — 4px Base Unit
     -------------------------------------------------------- */

  --sp-0:   0;
  --sp-px:  1px;
  --sp-0-5: 0.125rem;  /* 2px  */
  --sp-1:   0.25rem;   /* 4px  */
  --sp-1-5: 0.375rem;  /* 6px  */
  --sp-2:   0.5rem;    /* 8px  */
  --sp-2-5: 0.625rem;  /* 10px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-7:   1.75rem;   /* 28px */
  --sp-8:   2rem;      /* 32px */
  --sp-9:   2.25rem;   /* 36px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-14:  3.5rem;    /* 56px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-28:  7rem;      /* 112px */
  --sp-32:  8rem;      /* 128px */
  --sp-40:  10rem;     /* 160px */
  --sp-48:  12rem;     /* 192px */
  --sp-64:  16rem;     /* 256px */

  /* Semantic Layout */
  --section-py:       clamp(4rem, 8vw, 7rem);
  --container-max:    1280px;
  --container-narrow: 860px;
  --container-wide:   1440px;
  --container-padding: clamp(1.25rem, 5vw, 4rem);
  --nav-height:       80px;

  /* --------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------- */

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* --------------------------------------------------------
     SHADOWS
     -------------------------------------------------------- */

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.07);
  --shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 35px 60px rgba(0, 0, 0, 0.15);

  --shadow-gold-sm: 0 2px 8px rgba(201, 162, 39, 0.25);
  --shadow-gold:    0 4px 20px rgba(201, 162, 39, 0.3);
  --shadow-gold-lg: 0 8px 40px rgba(201, 162, 39, 0.4);
  --shadow-maroon:  0 4px 20px rgba(92, 16, 16, 0.3);
  --shadow-dark:    0 10px 40px rgba(0, 0, 0, 0.5);

  --shadow-card:       0 2px 12px rgba(74, 55, 40, 0.1), 0 1px 4px rgba(74, 55, 40, 0.06);
  --shadow-card-hover: 0 8px 32px rgba(74, 55, 40, 0.15), 0 2px 8px rgba(74, 55, 40, 0.1);

  /* --------------------------------------------------------
     TRANSITIONS & EASING
     -------------------------------------------------------- */

  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-instant:  50ms;
  --dur-fast:     150ms;
  --dur-base:     300ms;
  --dur-slow:     500ms;
  --dur-slower:   700ms;
  --dur-slowest:  1000ms;

  --transition-base: var(--dur-base) var(--ease-in-out);
  --transition-fast: var(--dur-fast) var(--ease-in-out);
  --transition-slow: var(--dur-slow) var(--ease-in-out);

  /* --------------------------------------------------------
     Z-INDEX LAYERS
     -------------------------------------------------------- */

  --z-below:   -1;
  --z-base:     0;
  --z-above:    1;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;
}