/* ============================================================
   RELIANCE CLUB — DESIGN SYSTEM
   Premium Digital Flagship, Bengaluru
   ============================================================ */

/* ── Google Fonts ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500&family=Inter:wght@300;400;500;600&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* COLOUR */
  --obsidian:        #FFFFFF;
  --charcoal:        #F8F8F8;
  --carbon:          #032a58;
  --slate:           #053670;
  --warm-dark:       #022247;

  --ivory:           #011937; /* inverted from #F5F0E8 */
  --cream:           #022045; /* inverted from #EDE8DC */
  --linen:           #E8E2D6;
  --mist:            #9A9590;
  --smoke:           #6A6560;

  --gold:            #C9A96E;
  --gold-light:      #DFC28A;
  --gold-pale:       #EDD9A3;
  --gold-deep:       #A07840;
  --gold-glow:       rgba(201,169,110,0.15);

  --sage:            #3A5445;
  --sage-light:      #4C6E5A;
  --sage-pale:       rgba(58,84,69,0.3);

  --rust:            #7A3E28;
  --ruby:            #6B2C2C;

  --white:           #FFFFFF;
  --black:           #000000;

  /* TYPOGRAPHY */
  --font-display:    'Playfair Display', Georgia, serif;
  --font-ui:         'Inter', system-ui, sans-serif;
  --font-body:       'Lora', Georgia, serif;

  /* TYPE SCALE — fluid */
  --text-xs:         clamp(0.65rem, 1vw, 0.75rem);
  --text-sm:         clamp(0.75rem, 1.2vw, 0.875rem);
  --text-base:       clamp(0.9rem, 1.5vw, 1rem);
  --text-md:         clamp(1rem, 1.8vw, 1.125rem);
  --text-lg:         clamp(1.1rem, 2vw, 1.375rem);
  --text-xl:         clamp(1.25rem, 2.5vw, 1.75rem);
  --text-2xl:        clamp(1.5rem, 3vw, 2.25rem);
  --text-3xl:        clamp(2rem, 4vw, 3rem);
  --text-4xl:        clamp(2.5rem, 5vw, 4rem);
  --text-5xl:        clamp(3rem, 7vw, 5.5rem);
  --text-hero:       clamp(3.5rem, 10vw, 8rem);
  --text-titan:      clamp(5rem, 15vw, 14rem);

  /* TRACKING */
  --track-tight:     -0.02em;
  --track-normal:    0;
  --track-wide:      0.08em;
  --track-wider:     0.15em;
  --track-widest:    0.25em;
  --track-titan:     0.05em;

  /* LEADING */
  --lead-tight:      1.1;
  --lead-snug:       1.25;
  --lead-normal:     1.5;
  --lead-relaxed:    1.65;
  --lead-loose:      1.8;

  /* 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;
  --space-64:  16rem;

  /* RADIUS */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* BORDERS */
  --border-gold:       1px solid rgba(201,169,110,0.25);
  --border-gold-med:   1px solid rgba(201,169,110,0.45);
  --border-gold-strong:1px solid rgba(201,169,110,0.7);
  --border-light:      1px solid rgba(255,255,255,0.08);
  --border-dark:       1px solid rgba(0,0,0,0.3);

  /* SHADOWS */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.6);
  --shadow-xl:   0 40px 80px rgba(0,0,0,0.7);
  --shadow-gold: 0 0 40px rgba(201,169,110,0.12);

  /* OVERLAYS */
  --overlay-dark:       rgba(10, 9, 7, 0.35);
  --overlay-darker:     rgba(10, 9, 7, 0.55);
  --overlay-darkest:    rgba(10, 9, 7, 0.75);
  --overlay-warm:       rgba(20, 15, 10, 0.4);
  --overlay-vignette:   radial-gradient(ellipse at center, transparent 20%, rgba(10, 9, 7, 0.65) 100%);

  /* MOTION TOKENS */
  --ease-luxury:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-reveal:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-cinematic: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in:        cubic-bezier(0.55, 0, 1, 0.45);
  --ease-out:       cubic-bezier(0, 0.55, 0.45, 1);

  --motion-instant:  100ms;
  --motion-fast:     250ms;
  --motion-normal:   400ms;
  --motion-medium:   600ms;
  --motion-slow:     900ms;
  --motion-cinematic:1400ms;
  --motion-epic:     2000ms;

  /* Z-INDEX */
  --z-base:        0;
  --z-raised:      10;
  --z-overlay:     100;
  --z-nav:         500;
  --z-menu:        600;
  --z-curtain:     700;
  --z-gateway:     800;
  --z-cursor:      9999;
  --z-top:         999;

  /* LAYOUT */
  --container:     1440px;
  --gutter:        clamp(1.5rem, 5vw, 5rem);
  --nav-height:    80px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ivory);
  background-color: #FFFFFF;
  line-height: var(--lead-relaxed);
  overflow-x: hidden;
  cursor: none;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: none;
  background: none;
  cursor: none;
  font: inherit;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

::selection {
  background: var(--gold);
  color: var(--obsidian);
}

/* ── Custom Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: #FFFFFF;
}
::-webkit-scrollbar-thumb {
  background: var(--gold-deep);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* ── Typography ─────────────────────────────────────────────── */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-tight);
}

.t-display--bold {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-tight);
}

.t-display--italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lead-tight);
}

.t-ui {
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: var(--lead-normal);
}

.t-ui--medium {
  font-family: var(--font-ui);
  font-weight: 500;
}

.t-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}

.t-meta {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--mist);
}

/* ── Utility ────────────────────────────────────────────────── */
.u-gold { color: var(--gold); }
.u-ivory { color: var(--ivory); }
.u-mist { color: var(--mist); }
.u-cream { color: var(--cream); }

.u-center { text-align: center; }
.u-right { text-align: right; }
.u-left { text-align: left; }

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.u-flex { display: flex; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-flex-col { display: flex; flex-direction: column; }

.u-fill { width: 100%; height: 100%; }
.u-cover { object-fit: cover; width: 100%; height: 100%; }
.u-contain { object-fit: contain; }

.u-abs-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Container ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Gold line divider ──────────────────────────────────────── */
.gold-line {
  width: 40px;
  height: 1px;
  background: var(--gold);
  display: block;
}

.gold-line--center {
  margin: 0 auto;
}

/* ── Gold Rule ──────────────────────────────────────────────── */
hr.gold-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.35;
  margin: var(--space-8) 0;
}

/* ── Overlay utility ────────────────────────────────────────── */
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.overlay--dark    { background: var(--overlay-dark); }
.overlay--darker  { background: var(--overlay-darker); }
.overlay--warm    { background: var(--overlay-warm); }
.overlay--vignette { background: var(--overlay-vignette); }

.overlay--gradient-bottom {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 40%,
    rgba(10,9,7,0.6) 75%,
    rgba(10,9,7,0.95) 100%
  );
}

.overlay--gradient-top {
  background: linear-gradient(to top,
    transparent 0%,
    rgba(10,9,7,0.5) 100%
  );
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}