/* ============================================================
   ATELIER ISAISA — Design Foundations
   Colors + Type tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&display=swap');

:root {
  /* ---- Brand palette ---- */
  --cream:        #F7F2EA;
  --rose:         #F5CDD5;
  --rose-deep:    #83505A;
  --terracotta:   #944931;
  --sage:         #4F6350;
  --ink:          #1D1C17;

  /* ---- Derived surfaces (separation = background shift, never borders) ---- */
  --surface:        #FFFFFF;          /* card lift off cream */
  --surface-warm:   #FBF7F1;          /* subtle warm panel */
  --surface-sink:   #EFE7DA;          /* recessed / hover well on cream */
  --rose-tint:      #FAE8EC;          /* rose at low strength — bio strip, chips */
  --rose-deep-2:    #6E424B;          /* deeper well inside dark sections */
  --rose-deep-3:    #9A6670;          /* lighter lift inside dark sections */

  /* ---- ISA ISA logotype letter sequence ---- */
  --logo-1: #E8A8B4;  /* rose   */
  --logo-2: #9B6B9E;  /* violet */
  --logo-3: #4A9B8E;  /* teal   */
  --logo-4: #E8874A;  /* orange */
  --logo-5: #E8C84A;  /* yellow */
  --logo-6: #C84A4A;  /* red    */

  /* ---- Text on light ---- */
  --fg1: var(--ink);
  --fg2: #5A5750;
  --fg3: #8A867C;

  /* ---- Text on dark (rose-deep section) ---- */
  --on-dark-1: var(--cream);
  --on-dark-2: #E4D2D4;
  --on-dark-3: #C7AEB2;

  /* ---- Type families ---- */
  --font-display: 'Epilogue', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-label:   'Be Vietnam Pro', sans-serif;

  /* ---- Type scale (fluid, clamp-based) ---- */
  --t-display:  clamp(2.75rem, 1.6rem + 5.2vw, 4.5rem);
  --t-h1:       clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  --t-h2:       clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --t-h3:       1.25rem;
  --t-lead:     clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --t-body:     1.0625rem;
  --t-small:    0.9375rem;
  --t-label:    0.78rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.65;

  --ls-label:   0.14em;
  --ls-tight:   -0.02em;

  /* ---- Radii (NO sharp corners; min 0.5rem, prefer 1rem) ---- */
  --r-sm:   0.5rem;
  --r-md:   1rem;
  --r-lg:   1.5rem;
  --r-xl:   2rem;
  --r-pill: 999px;

  /* ---- Spacing rhythm ---- */
  --section-y: clamp(4rem, 3rem + 8vw, 8rem);
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.5s;

  /* ---- Glass nav ---- */
  --glass-bg:   rgba(247, 242, 234, 0.72);
  --glass-blur: 16px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg1);
  margin: 0;
  line-height: var(--lh-snug);
  font-weight: 700;
}

h1 { font-size: var(--t-h1); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0; text-wrap: pretty; }

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

/* Eyebrow / label */
.label {
  font-family: var(--font-label);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg3);
}

/* Display headline helper */
.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
}

.subline-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* ---- ISA ISA logotype ---- */
.isaisa {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}
.isaisa .c1 { color: var(--logo-1); }
.isaisa .c2 { color: var(--logo-2); }
.isaisa .c3 { color: var(--logo-3); }
.isaisa .c4 { color: var(--logo-4); }
.isaisa .c5 { color: var(--logo-5); }
.isaisa .c6 { color: var(--logo-6); }
.isaisa .sp { display: inline-block; width: 0.32em; }
.isaisa-sm { font-size: 1.35rem; }
.isaisa-lg { font-size: clamp(3rem, 2rem + 5vw, 5.5rem); }
.isaisa-xl { font-size: clamp(3.5rem, 2rem + 7vw, 7rem); }

/* ---- Pills & buttons ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  font-weight: 500;
  padding: 0.55rem 1.1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
  cursor: pointer;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-body);
  padding: 0.95rem 1.75rem;
  background: var(--rose-deep);
  color: var(--cream);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--rose-deep-2); }
.btn:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--rose-deep);
  padding: 0.5rem 0;
}
.btn-ghost:hover { background: transparent; color: var(--terracotta); }

.btn-outline {
  background: transparent;
  color: var(--cream);
  box-shadow: inset 0 0 0 1.5px rgba(247,242,234,0.6);
}
.btn-outline:hover { background: rgba(247,242,234,0.12); }

/* ---- Nav links: hover = tonal background shift, no shadow ---- */
.nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-small);
  color: var(--fg1);
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link:hover { background: var(--surface-sink); }
.nav-link[data-active="true"] {
  background: var(--rose-tint);
  color: var(--rose-deep);
}

.footer-link {
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--fg2);
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-link:hover { background: var(--rose-tint); color: var(--rose-deep); }

/* ---- Cards: separation by surface shift; hover = tonal shift, no shadow ---- */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { background: var(--surface-warm); }

/* ---- Staggered entrance ---- */
@keyframes riseFade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Base state is VISIBLE. Entrance fade is opt-in via .anim-ready on <html>. */
.rise { animation: none; }
html.anim-ready .rise {
  opacity: 0;
  animation: riseFade 0.8s var(--ease) forwards;
}
html.anim-settled .rise {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.18s; }
.rise-3 { animation-delay: 0.31s; }
.rise-4 { animation-delay: 0.44s; }
.rise-5 { animation-delay: 0.57s; }
.rise-6 { animation-delay: 0.70s; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}