/* ============================================
   MODERA TIMES — Design Tokens & Variables
   ============================================ */

:root {

  /* ── Colors ──────────────────────────────── */
  --color-white:        #FFFFFF;
  --color-warm-white:   #F8F7F4;
  --color-off-white:    #F0EEE9;
  --color-light-gray:   #E8E6E1;
  --color-mid-gray:     #9B9B9B;
  --color-dark-gray:    #3A3A3A;
  --color-charcoal:     #1A1A1A;
  --color-black:        #0A0A0A;

  /* Brand accent — deep burgundy */
  --color-gold:         #7A1528;
  --color-gold-light:   #9B2038;
  --color-gold-dark:    #5C0F1E;

  /* Functional */
  --color-bg:           var(--color-warm-white);
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-mid-gray);
  --color-text-inverse: var(--color-white);
  --color-border:       var(--color-light-gray);
  --color-surface:      var(--color-white);

  /* ── Typography ─────────────────────────── */
  --font-serif:         var(--font-sans);
  --font-sans:          'Helvetica Neue', HelveticaNeue, 'Helvetica Neue Light', 'Helvetica Light', Helvetica, Arial, sans-serif;

  /* Type scale (fluid) */
  --text-xs:            clamp(0.625rem,  0.6rem + 0.125vw,  0.75rem);
  --text-sm:            clamp(0.75rem,   0.7rem + 0.25vw,   0.875rem);
  --text-base:          clamp(0.875rem,  0.85rem + 0.125vw, 1rem);
  --text-md:            clamp(1rem,      0.95rem + 0.25vw,  1.125rem);
  --text-lg:            clamp(1.125rem,  1rem + 0.5vw,      1.375rem);
  --text-xl:            clamp(1.375rem,  1.2rem + 0.875vw,  1.875rem);
  --text-2xl:           clamp(1.75rem,   1.4rem + 1.75vw,   2.75rem);
  --text-3xl:           clamp(2.25rem,   1.6rem + 3.25vw,   4.5rem);
  --text-4xl:           clamp(3rem,      2rem + 5vw,        7rem);
  --text-hero:          clamp(3.5rem,    2.5rem + 6vw,      9rem);

  /* Font weights */
  --weight-ultralight:  100;
  --weight-light:       200;
  --weight-regular:     300;
  --weight-medium:      400;
  --weight-semibold:    500;
  --weight-bold:        600;

  /* Letter spacing */
  --tracking-tight:     -0.02em;
  --tracking-normal:    0em;
  --tracking-wide:      0.05em;
  --tracking-wider:     0.1em;
  --tracking-widest:    0.2em;

  /* Line heights */
  --leading-tight:      1.1;
  --leading-snug:       1.25;
  --leading-normal:     1.5;
  --leading-relaxed:    1.75;

  /* ── 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;
  --space-48:   12rem;

  /* ── Layout ──────────────────────────────── */
  --max-width:          1440px;
  --content-width:      1200px;
  --narrow-width:       800px;
  --gutter:             clamp(1.5rem, 5vw, 5rem);

  /* ── Borders & Radius ────────────────────── */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-full:        9999px;
  --border-thin:        1px solid var(--color-border);
  --border-gold:        1px solid var(--color-gold);

  /* ── Shadows ─────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.16), 0 8px 24px rgba(0,0,0,0.10);
  --shadow-gold: 0 4px 24px rgba(122,21,40,0.2);

  /* ── Transitions ─────────────────────────── */
  --ease-out:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:        cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-luxury:        cubic-bezier(0.16, 1, 0.3, 1);

  --duration-fast:      150ms;
  --duration-base:      300ms;
  --duration-slow:      500ms;
  --duration-slower:    800ms;
  --duration-slowest:   1200ms;

  --transition-base:    var(--duration-base) var(--ease-out);
  --transition-slow:    var(--duration-slow) var(--ease-luxury);

  /* ── Z-index ─────────────────────────────── */
  --z-below:    -1;
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-tooltip:  400;

  /* ── Navbar ──────────────────────────────── */
  --navbar-height:      72px;
  --navbar-height-sm:   60px;
}