/* =========================================
   SHAILY RAJWANSHI — Design Tokens
   ========================================= */

:root {
  /* ---- Color Palette ---- */
  --color-sage:          #8B9E7C;
  --color-sage-light:    #D4DEC9;
  --color-sage-lighter:  #E8EFE0;
  --color-sage-dark:     #6B7E5E;
  --color-sage-label:    #5C7049;

  --color-terracotta:       #C4704B;
  --color-terracotta-light: #E0A98C;
  --color-terracotta-dark:  #A85A3A;

  --color-sand:          #F5EDE3;
  --color-sand-dark:     #EBE0D2;
  --color-cream:         #FAF7F2;
  --color-white:         #FFFFFF;

  --color-charcoal:      #3A3A3A;
  --color-charcoal-light:#5A5A5A;
  --color-charcoal-muted:#7A7A7A;

  /* Semantic */
  --color-bg-primary:    var(--color-cream);
  --color-bg-secondary:  var(--color-sand);
  --color-bg-accent:     var(--color-sage-lighter);
  --color-text-primary:  var(--color-charcoal);
  --color-text-secondary:var(--color-charcoal-light);
  --color-text-muted:    var(--color-charcoal-muted);
  --color-accent:        var(--color-terracotta);
  --color-accent-hover:  var(--color-terracotta-dark);

  /* ---- Typography ---- */
  --font-serif:   'Playfair Display', 'Georgia', serif;
  --font-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --fs-hero:      clamp(2.5rem, 5vw, 3.75rem);
  --fs-h1:        clamp(2rem, 4vw, 3.5rem);
  --fs-h2:        clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3:        clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h4:        clamp(1.1rem, 2vw, 1.35rem);
  --fs-body:      1.0625rem;
  --fs-body-lg:   1.175rem;
  --fs-nav:       0.9375rem;
  --fs-caption:   0.875rem;
  --fs-small:     0.8125rem;

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

  --lh-tight:     1.25;
  --lh-heading:   1.3;
  --lh-body:      1.75;
  --lh-relaxed:   1.85;

  --ls-tight:     -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.05em;
  --ls-wider:     0.12em;

  /* ---- Spacing (4px base) ---- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* ---- Layout ---- */
  --max-width:       1200px;
  --max-width-narrow: 800px;
  --max-width-wide:  1400px;
  --gutter:          clamp(1.5rem, 4vw, 3rem);

  /* ---- Borders & Radii ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:50%;

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 3px rgba(58, 58, 58, 0.06);
  --shadow-md:   0 4px 12px rgba(58, 58, 58, 0.08);
  --shadow-lg:   0 8px 30px rgba(58, 58, 58, 0.10);
  --shadow-xl:   0 16px 50px rgba(58, 58, 58, 0.12);
  --shadow-glow: 0 0 40px rgba(139, 158, 124, 0.15);

  /* ---- Transitions ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* ---- z-index scale ---- */
  --z-behind:   -1;
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}