/* =========================================================
   VAL&GAL CAPITAL — Foundations
   Colors + Typography tokens.
   Import first on every page.
   ========================================================= */

/* Local font faces — bundled in fonts/. Relative paths so this file works
   when included from any sibling directory (preview/, ui_kits/, slides/). */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Caslon Text';
  src: url('../fonts/LibreCaslonText-Regular.ttf') format('truetype'),
       url('fonts/LibreCaslonText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Caslon Text';
  src: url('../fonts/LibreCaslonText-Italic.ttf') format('truetype'),
       url('fonts/LibreCaslonText-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Caslon Text';
  src: url('../fonts/LibreCaslonText-Bold.ttf') format('truetype'),
       url('fonts/LibreCaslonText-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Google Fonts fallback for environments without the TTFs available. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root {
  /* ---------- CORE PALETTE ---------- */
  /* Midnight navy — hero background. Deep, desaturated, inky. */
  --vg-midnight:       #0E1B2C;  /* primary bg   */
  --vg-midnight-2:     #132339;  /* raised panel */
  --vg-midnight-3:     #1B2E48;  /* hairline/border on dark */
  --vg-ink:            #060C15;  /* near-black, for print */

  /* Paper — light surfaces. Warm, not white. */
  --vg-paper:          #F4EFE6;  /* ivory, main light bg */
  --vg-paper-2:        #EBE4D6;  /* warm mist */
  --vg-parchment:      #E2D7C1;  /* aged paper accent */

  /* Neutrals (warm gray scale) */
  --vg-stone-900:      #2A2922;
  --vg-stone-700:      #4A4739;
  --vg-stone-500:      #7A7766;
  --vg-stone-300:      #B9B4A4;
  --vg-stone-100:      #DCD6C6;

  /* Accents — used sparingly. */
  --vg-brass:          #B08A3E;  /* antiqued brass gold (primary accent) */
  --vg-brass-bright:   #D4AA54;  /* hover / highlight on dark */
  --vg-brass-dim:      #8A6C2F;
  --vg-burgundy:       #6B1F2C;  /* secondary accent (seals, emphasis) */
  --vg-olive:          #4F5A3A;  /* tertiary accent (rare) */

  /* ---------- SEMANTIC SURFACES ---------- */
  --vg-bg:             var(--vg-paper);
  --vg-bg-raised:      #FFFFFF;
  --vg-bg-sunken:      var(--vg-paper-2);

  --vg-fg:             var(--vg-ink);
  --vg-fg-muted:       var(--vg-stone-700);
  --vg-fg-subtle:      var(--vg-stone-500);
  --vg-fg-inverse:     var(--vg-paper);
  --vg-fg-inverse-muted: #B9B4A4;

  --vg-rule:           rgba(10, 15, 25, 0.18);
  --vg-rule-inverse:   rgba(244, 239, 230, 0.14);
  --vg-rule-brass:     rgba(176, 138, 62, 0.55);

  /* ---------- TYPE FAMILIES ---------- */
  --vg-serif-display:  'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --vg-serif-text:     'Libre Caslon Text', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --vg-sans:           'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --vg-mono:           ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

  /* Display uses heavier weight + tighter tracking. */
  --vg-display-weight: 500;
  --vg-display-tracking: -0.01em;

  /* Small-caps / eyebrow styling via utility */
  --vg-eyebrow-tracking: 0.22em;

  /* ---------- TYPE SCALE ---------- */
  /* Display (serif, condensed-feel) */
  --vg-fs-hero:        clamp(56px, 8vw, 120px);
  --vg-fs-h1:          clamp(40px, 5vw, 64px);
  --vg-fs-h2:          clamp(30px, 3.5vw, 44px);
  --vg-fs-h3:          24px;
  --vg-fs-h4:          18px;

  /* Body (serif text) */
  --vg-fs-lead:        20px;
  --vg-fs-body:        16px;
  --vg-fs-small:       14px;
  --vg-fs-eyebrow:     11px;

  --vg-lh-tight:       1.04;
  --vg-lh-display:     1.08;
  --vg-lh-body:        1.55;
  --vg-lh-compact:     1.35;

  /* ---------- SPACING ---------- */
  --vg-sp-0: 0;
  --vg-sp-1: 4px;
  --vg-sp-2: 8px;
  --vg-sp-3: 12px;
  --vg-sp-4: 16px;
  --vg-sp-5: 24px;
  --vg-sp-6: 32px;
  --vg-sp-7: 48px;
  --vg-sp-8: 64px;
  --vg-sp-9: 96px;
  --vg-sp-10: 128px;

  /* ---------- RADII ---------- */
  /* Brand is classical — radii are minimal. */
  --vg-radius-0: 0px;          /* cards, panels (default) */
  --vg-radius-1: 2px;          /* inputs, tags */
  --vg-radius-2: 4px;          /* buttons */
  --vg-radius-pill: 999px;     /* rare */

  /* ---------- BORDERS / HAIRLINES ---------- */
  --vg-border-hair: 1px solid var(--vg-rule);
  --vg-border-hair-inverse: 1px solid var(--vg-rule-inverse);
  --vg-border-brass: 1px solid var(--vg-rule-brass);
  --vg-border-double: 3px double var(--vg-rule);

  /* ---------- SHADOWS (understated, paper-like) ---------- */
  --vg-shadow-sm:  0 1px 2px rgba(10,15,25,0.06), 0 1px 1px rgba(10,15,25,0.04);
  --vg-shadow-md:  0 4px 14px rgba(10,15,25,0.08), 0 2px 4px rgba(10,15,25,0.05);
  --vg-shadow-lg:  0 18px 48px rgba(10,15,25,0.14), 0 6px 14px rgba(10,15,25,0.08);
  --vg-shadow-inset: inset 0 0 0 1px var(--vg-rule);

  /* ---------- MOTION ---------- */
  --vg-ease-standard: cubic-bezier(.2,.6,.2,1);
  --vg-ease-elegant:  cubic-bezier(.25,.1,.25,1);
  --vg-dur-fast:    140ms;
  --vg-dur-base:    240ms;
  --vg-dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --vg-container: 1200px;
  --vg-container-wide: 1440px;
  --vg-gutter: 32px;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   ========================================================= */
html, body {
  background: var(--vg-bg);
  color: var(--vg-fg);
  font-family: var(--vg-serif-text);
  font-size: var(--vg-fs-body);
  line-height: var(--vg-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .vg-display {
  font-family: var(--vg-serif-display);
  font-weight: var(--vg-display-weight);
  letter-spacing: var(--vg-display-tracking);
  line-height: var(--vg-lh-display);
  color: var(--vg-fg);
  margin: 0;
}
h1 { font-size: var(--vg-fs-h1); line-height: var(--vg-lh-tight); }
h2 { font-size: var(--vg-fs-h2); }
h3 { font-size: var(--vg-fs-h3); font-weight: 600; }
h4 { font-size: var(--vg-fs-h4); font-weight: 600; }

p, li { font-family: var(--vg-serif-text); font-size: var(--vg-fs-body); line-height: var(--vg-lh-body); }
.vg-lead { font-size: var(--vg-fs-lead); line-height: 1.5; color: var(--vg-fg-muted); }
.vg-small { font-size: var(--vg-fs-small); }

.vg-eyebrow {
  font-family: var(--vg-sans);
  font-size: var(--vg-fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--vg-eyebrow-tracking);
  color: var(--vg-brass);
}

.vg-rule {
  border: 0;
  border-top: 1px solid var(--vg-rule);
  margin: var(--vg-sp-6) 0;
}
.vg-rule-ornament {
  display: flex; align-items: center; gap: 14px;
  color: var(--vg-brass);
  font-family: var(--vg-serif-display);
}
.vg-rule-ornament::before,
.vg-rule-ornament::after {
  content: ""; flex: 1; height: 1px; background: var(--vg-rule-brass);
}

/* Link */
a { color: var(--vg-burgundy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--vg-brass-dim); }

/* Selection */
::selection { background: var(--vg-brass); color: var(--vg-midnight); }

/* Dark-surface helper */
.vg-on-dark {
  background: var(--vg-midnight);
  color: var(--vg-fg-inverse);
}
.vg-on-dark h1, .vg-on-dark h2, .vg-on-dark h3, .vg-on-dark h4 { color: var(--vg-paper); }
.vg-on-dark .vg-lead { color: var(--vg-fg-inverse-muted); }
.vg-on-dark a { color: var(--vg-brass-bright); }