/* ============================================================
   VALORIAN — LUXURY FASHION DESIGN SYSTEM
   main.css — Design Tokens, Reset, Typography, Utilities
   ============================================================ */

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  /* Color Palette */
  --color-black:        #0A0A0A;
  --color-white:        #FFFFFF;
  --color-off-white:    #F7F4F0;
  --color-cream:        #EDE8E1;
  --color-warm-gray:    #C5C0B8;
  --color-mid-gray:     #7A7570;
  --color-dark-gray:    #3A3530;
  --color-gold:         #B8965A;
  --color-gold-light:   #D4AF7A;
  --color-gold-dark:    #8A6C38;
  --color-charcoal:     #1C1A18;
  --color-error:        #8B2635;
  --color-success:      #2D5016;

  /* Backgrounds */
  --bg-primary:         var(--color-off-white);
  --bg-dark:            var(--color-black);
  --bg-card:            var(--color-white);
  --bg-overlay:         rgba(10, 10, 10, 0.85);

  /* Typography */
  --font-editorial:     'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:          'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:          'Courier New', Courier, monospace;

  /* Type Scale */
  --text-xs:    0.625rem;   /* 10px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.875rem;   /* 14px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   3rem;       /* 48px */
  --text-4xl:   4.5rem;     /* 72px */
  --text-5xl:   6rem;       /* 96px */
  --text-6xl:   8rem;       /* 128px */
  --text-hero:  clamp(4rem, 10vw, 10rem);

  /* Font Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    600;

  /* Line Heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  2;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.25em;

  /* Spacing Scale */
  --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;

  /* Container */
  --container-max:    1440px;
  --container-wide:   1280px;
  --container-normal: 1080px;
  --container-narrow: 720px;
  --container-pad:    clamp(1.5rem, 4vw, 4rem);

  /* Breakpoints (reference — use in media queries) */
  /* --bp-sm: 640px | --bp-md: 768px | --bp-lg: 1024px | --bp-xl: 1280px */

  /* Border Radius */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-full:  9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.14);
  --shadow-xl:   0 32px 80px rgba(0,0,0,0.20);
  --shadow-gold: 0 4px 24px rgba(184,150,90,0.25);

  /* Transitions */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      0.15s;
  --dur-normal:    0.35s;
  --dur-slow:      0.65s;
  --dur-cinematic: 1.2s;

  /* Z-index scale */
  --z-below:   -1;
  --z-base:     0;
  --z-above:    1;
  --z-sticky:  10;
  --z-drawer:  50;
  --z-overlay: 80;
  --z-modal:   90;
  --z-top:    100;

  /* Nav height */
  --nav-height: 70px;
  --nav-height-scrolled: 56px;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-black);
  background-color: var(--bg-primary);
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
.t-hero {
  font-family: var(--font-editorial);
  font-size: var(--text-hero);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.t-display {
  font-family: var(--font-editorial);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.t-headline {
  font-family: var(--font-editorial);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
}

.t-subheadline {
  font-family: var(--font-editorial);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
}

.t-overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.t-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-mid-gray);
}

/* ── LAYOUT ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide   { max-width: var(--container-wide); }
.container--normal { max-width: var(--container-normal); }
.container--narrow { max-width: var(--container-narrow); }

.grid {
  display: grid;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── UTILITY CLASSES ──────────────────────────────────────── */
.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-overflow-hidden { overflow: hidden; }
.u-relative        { position: relative; }
.u-absolute        { position: absolute; }
.u-full            { width: 100%; height: 100%; }

/* Aspect ratios */
.aspect-portrait   { aspect-ratio: 3 / 4; }
.aspect-square     { aspect-ratio: 1 / 1; }
.aspect-landscape  { aspect-ratio: 4 / 3; }
.aspect-cinema     { aspect-ratio: 16 / 9; }
.aspect-ultra      { aspect-ratio: 21 / 9; }

.object-cover {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* Dividers */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-cream);
}

.divider--dark {
  background: var(--color-dark-gray);
}

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

/* ── PAGE LOADER ──────────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--color-black);
  z-index: var(--z-top);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.loader__logo {
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-widest);
  color: var(--color-white);
  text-transform: uppercase;
}

.loader__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-gold);
  transition: width var(--dur-cinematic) var(--ease-out);
}

/* ── PAGE TRANSITION ──────────────────────────────────────── */
#page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-black);
  z-index: calc(var(--z-top) - 1);
  transform: translateY(100%);
  pointer-events: none;
}

/* ── REVEAL ANIMATIONS ────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
}

/* ── MEDIA: PAGE PADDING ──────────────────────────────────── */
.page-content {
  padding-top: var(--nav-height);
}

@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
  }
}