/* ═══════════════════════════════════════════════════════════
   V Capital — global.css
   Single source of truth for design tokens and shared styles.
   All other CSS files import this via @import or assume these
   variables are available on :root.
   ═══════════════════════════════════════════════════════════ */

/* ── @font-face declarations ─────────────────────────────── */
@font-face{font-family:'Cormorant Garamond';font-weight:300;font-style:normal;font-display:swap;src:url('/fonts/cormorant-garamond-300.woff2')format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:300;font-style:italic;font-display:swap;src:url('/fonts/cormorant-garamond-300italic.woff2')format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/cormorant-garamond-400.woff2')format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:italic;font-display:swap;src:url('/fonts/cormorant-garamond-400italic.woff2')format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/cormorant-garamond-500.woff2')format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:italic;font-display:swap;src:url('/fonts/cormorant-garamond-500italic.woff2')format('woff2')}
@font-face{font-family:'DM Sans';font-weight:300;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-300.woff2')format('woff2')}
@font-face{font-family:'DM Sans';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-400.woff2')format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-500.woff2')format('woff2')}
@font-face{font-family:'DM Mono';font-weight:300;font-style:normal;font-display:swap;src:url('/fonts/dm-mono-300.woff2')format('woff2')}
@font-face{font-family:'DM Mono';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/dm-mono-400.woff2')format('woff2')}

/* ── Design Tokens ───────────────────────────────────────── */
:root{
  /* Colour palette */
  --color-bg:          #080808;
  --color-bg-elevated: #0a0a0a;
  --color-bg-card:     #09090c;
  --color-gold:        #C9A847;
  --color-gold-dark:   #9A7A28;
  --color-gold-dim:    rgba(201,168,71,.6);
  --color-chalk:       #F5F2EC;
  --color-chalk-dim:   rgba(245,242,236,.55);
  --color-chalk-muted: rgba(245,242,236,.28);
  --color-border:      rgba(255,255,255,.07);
  --color-border-gold: rgba(201,168,71,.2);
  --color-green:       #4CAF50;
  --color-red:         #f87171;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;

  /* Layout */
  --container-max:  1200px;
  --container-text: 860px;
  --radius-sm:      2px;
  --radius-md:      4px;

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-mid:  0.28s ease;
  --transition-slow: 0.45s ease;

  /* Z-index scale */
  --z-nav:     1000;
  --z-overlay: 900;
  --z-modal:   9000;
  --z-toast:   9900;

  /* Gold gradient */
  --gradient-gold: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
}

/* ── CSS Reset ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--color-chalk-dim);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
ul,ol{list-style:none}

/* ── Utility Classes ─────────────────────────────────────── */
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 1.5rem}
.container--text{width:100%;max-width:var(--container-text);margin:0 auto;padding:0 1.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ── Typography Utilities ────────────────────────────────── */
.heading-display{font-family:var(--font-display);font-weight:300;line-height:1.12;color:var(--color-chalk)}
.heading-1{font-size:clamp(2rem,5vw,3.8rem)}
.heading-2{font-size:clamp(1.6rem,3.5vw,2.4rem)}
.heading-3{font-size:clamp(1.2rem,2.5vw,1.75rem)}
.body-text{font-family:var(--font-body);font-size:.9rem;line-height:1.9;color:var(--color-chalk-dim)}
.label{font-family:var(--font-mono);font-size:.42rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold-dim)}
.mono{font-family:var(--font-mono)}

/* ── Gold divider ────────────────────────────────────────── */
.gold-bar{height:3px;background:var(--gradient-gold)}
.gold-bar--thin{height:1px;background:var(--color-border-gold)}

/* ── Reveal animation ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s var(--transition-slow),transform .55s var(--transition-slow)}
.reveal.visible{opacity:1;transform:none}

/* ── Section spacing ─────────────────────────────────────── */
.section{padding:var(--space-2xl) 0;border-bottom:1px solid var(--color-border)}
.section:last-child{border-bottom:none}
.section-label{font-family:var(--font-mono);font-size:.42rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-gold-dim);display:block;margin-bottom:1.25rem}

/* ── Cards ───────────────────────────────────────────────── */
.card{background:var(--color-bg-card);border:1px solid var(--color-border);transition:border-color var(--transition-fast)}
.card:hover{border-color:var(--color-border-gold)}
.card--gold-top{border-top:3px solid var(--color-gold)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;padding:.875rem 1.75rem;transition:opacity var(--transition-fast);border:none;cursor:pointer}
.btn--primary{background:var(--gradient-gold);color:var(--color-bg)}
.btn--primary:hover{opacity:.88}
.btn--outline{border:1px solid var(--color-border-gold);color:var(--color-gold)}
.btn--outline:hover{background:rgba(201,168,71,.08)}
.btn--ghost{color:var(--color-gold-dim)}
.btn--ghost:hover{color:var(--color-gold)}

/* ── Form elements ───────────────────────────────────────── */
.input{background:rgba(255,255,255,.04);border:1px solid var(--color-border);padding:.75rem 1rem;color:var(--color-chalk);font-family:var(--font-body);font-size:.9rem;outline:none;transition:border-color var(--transition-fast);width:100%}
.input:focus{border-color:var(--color-border-gold)}
.input::placeholder{color:var(--color-chalk-muted)}
.label-form{font-family:var(--font-mono);font-size:.4rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-chalk-muted);display:block;margin-bottom:.4rem}

/* ── Data tables ─────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-family:var(--font-body)}
.data-table th{font-size:.4rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-chalk-muted);padding:.625rem 1rem;text-align:left;border-bottom:1px solid var(--color-border)}
.data-table td{padding:.75rem 1rem;font-size:.85rem;color:var(--color-chalk-dim);border-bottom:1px solid rgba(255,255,255,.03)}
.data-table tr:last-child td{border-bottom:none}
.data-table .cell--gold{color:var(--color-gold);font-weight:500}
.data-table .cell--up{color:var(--color-green)}
.data-table .cell--dn{color:var(--color-red)}

/* ── KPI blocks ──────────────────────────────────────────── */
.kpi-grid{display:grid;gap:1px;background:rgba(201,168,71,.12)}
.kpi-grid--4{grid-template-columns:repeat(4,1fr)}
.kpi-grid--3{grid-template-columns:repeat(3,1fr)}
.kpi-grid--2{grid-template-columns:repeat(2,1fr)}
.kpi-block{background:var(--color-bg-card);padding:1.25rem;text-align:center}
.kpi-value{font-family:var(--font-display);font-size:1.75rem;font-weight:300;color:var(--color-gold);line-height:1}
.kpi-label{font-family:var(--font-mono);font-size:.4rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-chalk-muted);margin-top:.4rem}

/* ── Quote blocks ────────────────────────────────────────── */
.blockquote{border-left:2px solid var(--color-border-gold);padding:1rem 1.5rem;font-family:var(--font-display);font-size:1.1rem;font-style:italic;color:rgba(245,242,236,.5);line-height:1.65}
.blockquote cite{font-family:var(--font-mono);font-size:.4rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold-dim);font-style:normal;display:block;margin-top:.75rem}

/* ── Source/citation ─────────────────────────────────────── */
.source-line{font-family:var(--font-mono);font-size:.38rem;letter-spacing:.07em;color:rgba(245,242,236,.18);padding-top:.5rem;border-top:1px solid rgba(255,255,255,.04);margin-top:.75rem}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb{background:rgba(255,255,255,.02);border-bottom:1px solid var(--color-border);padding:.875rem 0}
.breadcrumb__inner{display:flex;align-items:center;gap:.625rem;font-family:var(--font-mono);font-size:.42rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-chalk-muted)}
.breadcrumb__inner a{color:var(--color-chalk-muted);text-decoration:none;transition:color var(--transition-fast)}
.breadcrumb__inner a:hover{color:var(--color-gold)}
.breadcrumb__sep{color:rgba(255,255,255,.15)}

/* ── Grain overlay ───────────────────────────────────────── */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}

/* ── Responsive breakpoints ──────────────────────────────── */
@media(max-width:1024px){
  .kpi-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .kpi-grid--4,.kpi-grid--3{grid-template-columns:repeat(2,1fr)}
  .kpi-grid--2{grid-template-columns:1fr}
  :root{--space-2xl:3rem;--space-xl:2.5rem}
}
@media(max-width:480px){
  .kpi-grid--4,.kpi-grid--3,.kpi-grid--2{grid-template-columns:1fr 1fr}
}

/* ── Performance & UX improvements ─────────────────────────────── */
/* Smooth scroll — native, GPU-accelerated */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Reduce layout shift */
img,video{height:auto}
/* Page fade-in */
body{animation:vcFadeIn .35s ease forwards}
@keyframes vcFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Focus states for accessibility */
:focus-visible{outline:2px solid var(--color-gold,#C9A847);outline-offset:3px;border-radius:2px}
/* Smooth transitions on interactive elements */
a,button,input,select,textarea{transition-property:color,background,border-color,opacity,transform;transition-duration:.18s;transition-timing-function:ease}
/* Prevent text overflow */
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
/* GPU compositing for sticky elements */
[class*="sticky"],[class*="fixed"],[id*="nav"]{will-change:transform}
/* Lazy load images */
img[loading="lazy"]{background:#0a0a0a}
/* Selection color */
::selection{background:rgba(201,168,71,.25);color:#F5F2EC}
::-moz-selection{background:rgba(201,168,71,.25);color:#F5F2EC}
/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--color-bg,#080808)}
::-webkit-scrollbar-thumb{background:rgba(201,168,71,.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(201,168,71,.6)}