/* ============================================================
   ICONIC BEAUTY ACADEMY — Design Tokens
   ============================================================ */

:root {
  /* === COLORS === */
  --black:         #0A0A0A;
  --black-soft:    #111111;
  --black-card:    #161616;
  --white:         #FAFAFA;
  --white-off:     #F5F2ED;

  --gold:          #C9A84C;
  --gold-light:    #E2C97E;
  --gold-pale:     #F0E4C0;
  --gold-dark:     #9C7A2E;

  --beige:         #F5F0E8;
  --beige-mid:     #EDE6D8;
  --beige-dark:    #D9CFBF;

  --gray-100:      #F0EDE8;
  --gray-200:      #E0DDD8;
  --gray-400:      #9A9189;
  --gray-600:      #6A6360;
  --gray-700:      #4A4540;
  --gray-800:      #2E2B28;

  /* === TYPOGRAPHY === */
  --font-heading:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'Inter', 'Helvetica Neue', sans-serif;
  --font-accent:   'Cormorant Garamond', Georgia, serif;

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

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.25em;

  /* === SPACING === */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  /* === LAYOUT === */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --nav-height:     80px;

  /* === BORDERS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  --border-thin:   1px solid rgba(201, 168, 76, 0.3);
  --border-gold:   1px solid var(--gold);
  --border-light:  1px solid rgba(250, 250, 250, 0.1);

  /* === SHADOWS === */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.2);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.3);
  --shadow-lg:   0 24px 80px rgba(0,0,0,0.5);
  --shadow-gold: 0 6px 30px rgba(201, 168, 76, 0.35);
  --shadow-gold-lg: 0 12px 50px rgba(201, 168, 76, 0.25), 0 0 0 1px rgba(201,168,76,0.15);

  /* === TRANSITIONS === */
  --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0.0, 1, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   200ms;
  --duration-base:   350ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;

  /* === Z-INDEX === */
  --z-below:    -1;
  --z-base:      0;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}