/* ===========================================================================
   VKV Group — Design System
   Deep navy foundation · refined gold accents · selective glassmorphism.
   Tokens first; everything else derives from them.
   =========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --navy-900: #070E23;   /* deepest background */
  --navy-800: #0A1633;   /* primary brand navy */
  --navy-700: #101E42;
  --navy-600: #17264F;
  --navy-500: #1F3160;

  --gold-500: #C9A24B;   /* primary gold accent */
  --gold-400: #E4C77E;   /* champagne highlight */
  --gold-300: #F1DEAE;

  --paper:    #F7F9FC;   /* light contrast surface */
  --paper-2:  #EEF2F9;
  --ink:      #0A1633;   /* text on light */
  --slate-600:#5C6883;
  --slate-400:#8A97B1;   /* muted text on dark */

  --line:      rgba(255, 255, 255, 0.08);
  --line-solid:#E3E8F2;

  /* ---- Semantic ---- */
  --bg:         var(--navy-800);
  --bg-deep:    var(--navy-900);
  --surface:    var(--navy-700);
  --text:       #EAF0FB;
  --text-muted: var(--slate-400);
  --accent:     var(--gold-500);
  --accent-soft:var(--gold-400);

  /* ---- Glass ---- */
  --glass-bg:     rgba(23, 38, 79, 0.55);
  --glass-border: rgba(228, 199, 126, 0.16);
  --glass-blur:   14px;

  /* ---- Typography ---- */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-eyebrow: 0.78rem;
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --fs-h6:      1.05rem;
  --fs-h5:      1.2rem;
  --fs-h4:      clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  --fs-h3:      clamp(1.55rem, 1.3rem + 1vw, 2rem);
  --fs-h2:      clamp(2rem, 1.6rem + 1.8vw, 2.9rem);
  --fs-h1:      clamp(2.6rem, 1.9rem + 3.2vw, 4.2rem);

  --lh-tight: 1.1;
  --lh-snug:  1.28;
  --lh-body:  1.65;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;    --space-9: 6rem;

  /* ---- Radii & shadow ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 2px 8px rgba(3, 8, 22, 0.25);
  --shadow-2: 0 14px 40px rgba(3, 8, 22, 0.45);
  --shadow-gold: 0 10px 30px rgba(201, 162, 75, 0.22);

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 760px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* decisive settle */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur:  240ms;
  --dur-fast: 140ms;
  --dur-slow: 520ms;

  /* ---- Module 2 additions ------------------------------------------------ */
  /* Status / semantic feedback (forms, badges, alerts) */
  --success: #3FB984;  --success-bg: rgba(63, 185, 132, 0.12);
  --warning: #E0A63C;  --warning-bg: rgba(224, 166, 60, 0.12);
  --danger:  #E5695B;  --danger-bg:  rgba(229, 105, 91, 0.12);
  --info:    #5AA0E6;  --info-bg:    rgba(90, 160, 230, 0.12);

  /* Light-surface text ramp (cards on paper, later light sections) */
  --ink-2:     #33405C;
  --on-light-muted: #5C6883;

  /* Signature gradients */
  --grad-gold:   linear-gradient(135deg, var(--gold-400), var(--gold-500));
  --grad-navy:   linear-gradient(160deg, var(--navy-700), var(--navy-800));
  --grad-navy-deep: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  --grad-sheen:  linear-gradient(115deg, transparent 20%, rgba(228,199,126,0.10) 50%, transparent 80%);
  --hairline-gold: linear-gradient(90deg, transparent, var(--gold-500), transparent);

  /* Elevation additions */
  --shadow-3:    0 30px 80px rgba(3, 8, 22, 0.55);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ring: 0 0 0 3px rgba(228, 199, 126, 0.28);

  /* Grid / gutters */
  --gutter: var(--space-4);
  --container-wide: 1320px;

  /* Z-index scale */
  --z-base: 1; --z-raised: 10; --z-header: 100; --z-overlay: 900;
  --z-modal: 1000; --z-popup: 1050; --z-toast: 1100;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: var(--lh-snug); font-weight: 600; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }
p  { color: var(--text-muted); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.text-gold { color: var(--accent-soft); }

/* ---- Layout primitives ---- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-9); }
.section-center { text-align: center; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 0.7rem 1.35rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-lg { padding: 0.95rem 1.9rem; font-size: 1.02rem; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--navy-900); box-shadow: var(--shadow-gold);
}
.btn-gold:hover { box-shadow: 0 16px 40px rgba(201, 162, 75, 0.34); }

.btn-outline { border-color: var(--glass-border); color: var(--text); background: transparent; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-soft); }

.btn-ghost { color: var(--text); background: transparent; }
.btn-ghost:hover { color: var(--accent-soft); }

/* ---- Glass surface utility ---- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
}

/* ---- Accessibility ---- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--gold-500); color: var(--navy-900);
  padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 4px; }

.brand-fallback { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text); letter-spacing: -0.01em; }

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .btn:hover { transform: none; }
}