/* ===========================================================================
   VALIORO — Colors & Type
   Premium valuation consultancy. Black + gold + cream foundation.
   --------------------------------------------------------------------------
   Use restraint. The brand lives in BLACK and CREAM. Gold is punctuation.
   =========================================================================== */

@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=Geist:wght@300;400;500;600;700&display=swap");

:root {
  /* --- Brand core ------------------------------------------------------- */
  --valioro-black:        #0A0A0A;   /* Authority. Hero backgrounds. Headlines on cream. */
  --valioro-gold:         #B8962E;   /* Primary accent. CTAs. Dividers. Logo. */
  --valioro-gold-light:   #D4AF5A;   /* Hover state, secondary detail. */
  --valioro-gold-deep:    #8E711E;   /* Pressed state. High-contrast on cream. */
  --valioro-cream:        #F5F0E8;   /* Primary background. Warmth + elegance. */
  --valioro-slate:        #1C2331;   /* Body text on light, secondary dark surface. */

  /* --- Extended neutrals (derived) -------------------------------------- */
  --cream-50:             #FBF8F3;   /* Lightest surface, modals on cream. */
  --cream-100:            #F5F0E8;   /* = valioro-cream */
  --cream-200:            #ECE4D6;   /* Cards on cream, subtle elevation. */
  --cream-300:            #DCD0BA;   /* Borders, hairlines on cream. */
  --cream-400:            #B8AC95;   /* Disabled text on cream. */

  --slate-900:            #0F141C;   /* Near-black slate, surfaces on dark. */
  --slate-800:            #1C2331;   /* = valioro-slate */
  --slate-700:            #2C3445;   /* Dark elevated surface. */
  --slate-600:            #4A5468;   /* Tertiary text on light. */
  --slate-500:            #6B7588;   /* Muted text. */
  --slate-400:            #98A0B0;   /* Meta, captions. */

  /* --- Semantic foreground / background --------------------------------- */
  --bg:                   var(--valioro-cream);
  --bg-elevated:          var(--cream-50);
  --bg-sunken:            var(--cream-200);
  --bg-inverse:           var(--valioro-black);
  --bg-slate:             var(--valioro-slate);

  --fg:                   var(--valioro-slate);          /* Body on cream */
  --fg-strong:            var(--valioro-black);          /* Headings on cream */
  --fg-muted:             var(--slate-600);              /* Secondary copy */
  --fg-subtle:            var(--slate-500);              /* Captions, meta */
  --fg-inverse:           var(--valioro-cream);          /* Copy on black */
  --fg-inverse-muted:     #BDB6A8;                       /* Muted on black */
  --fg-accent:            var(--valioro-gold);           /* Eyebrows, links, marks */

  --border:               var(--cream-300);              /* Default hairline */
  --border-strong:        #C0B49B;                       /* Card borders */
  --border-gold:          var(--valioro-gold);
  --border-inverse:       #2A2A2A;                       /* On black surfaces */

  /* --- Status (used very sparingly, financial context) ------------------ */
  --positive:             #2F6E4B;   /* "Upside" green — never neon. */
  --positive-bg:          #E8F0EA;
  --negative:             #8E2F2F;   /* Risk, warning. Muted brick, never red. */
  --negative-bg:          #F1E6E4;
  --info:                 #2A3E5C;   /* Quiet informational slate-blue. */
  --info-bg:              #E3E7EE;

  /* --- Type families ---------------------------------------------------- */
  --font-display: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
  --font-sans:    "Geist", "Söhne", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type scale (fluid-ish; bias toward generous sizing) -------------- */
  --fs-display-xl:        clamp(56px, 7.5vw, 112px);   /* Hero */
  --fs-display-l:         clamp(44px, 5.5vw, 80px);    /* Section openers */
  --fs-display-m:         clamp(36px, 4vw, 56px);      /* Lead-in headlines */
  --fs-h1:                40px;
  --fs-h2:                32px;
  --fs-h3:                24px;
  --fs-h4:                20px;
  --fs-body-l:            19px;
  --fs-body:              17px;
  --fs-body-s:            15px;
  --fs-caption:           13px;
  --fs-eyebrow:           12px;

  --lh-tight:             1.05;
  --lh-display:           1.1;
  --lh-heading:           1.2;
  --lh-body:              1.55;
  --lh-loose:             1.7;

  --tracking-display:    -0.02em;     /* Tighten the serif a touch */
  --tracking-body:        0;
  --tracking-eyebrow:     0.16em;      /* Sparse, sophisticated */
  --tracking-caps:        0.08em;

  /* --- Spacing (8pt baseline) ------------------------------------------ */
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              24px;
  --space-6:              32px;
  --space-7:              48px;
  --space-8:              64px;
  --space-9:              96px;
  --space-10:             128px;

  /* --- Radii (restrained; consultancy not consumer app) ---------------- */
  --radius-xs:            2px;
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            20px;
  --radius-pill:          999px;

  /* --- Borders --------------------------------------------------------- */
  --border-w-hair:        1px;
  --border-w-rule:        2px;        /* Gold dividers */
  --border-w-heavy:       3px;

  /* --- Shadows — minimal. Lean on borders + cream tints, not blur. ----- */
  --shadow-xs:            0 1px 0 rgba(28, 35, 49, 0.04);
  --shadow-sm:            0 1px 2px rgba(28, 35, 49, 0.06), 0 0 0 1px rgba(28, 35, 49, 0.04);
  --shadow-md:            0 8px 24px -12px rgba(28, 35, 49, 0.18), 0 0 0 1px rgba(28, 35, 49, 0.06);
  --shadow-lg:            0 24px 56px -24px rgba(10, 10, 10, 0.25);
  --shadow-gold-glow:     0 0 0 1px rgba(184, 150, 46, 0.4), 0 12px 40px -16px rgba(184, 150, 46, 0.45);

  /* --- Motion ---------------------------------------------------------- */
  --ease-standard:        cubic-bezier(0.22, 0.61, 0.36, 1);     /* default */
  --ease-emphasized:      cubic-bezier(0.16, 1, 0.3, 1);          /* deliberate */
  --ease-in:              cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:             140ms;
  --dur-base:             220ms;
  --dur-slow:             420ms;

  /* --- Layout ---------------------------------------------------------- */
  --container-narrow:     720px;
  --container:            1120px;
  --container-wide:       1320px;
  --gutter:               clamp(20px, 4vw, 56px);
}

/* ===========================================================================
   Semantic typography — apply directly to elements OR via .v-h1 helpers.
   =========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.v-display-xl, .v-display-l, .v-display-m,
h1, h2, h3, h4,
.v-h1, .v-h2, .v-h3, .v-h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg-strong);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

.v-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); }
.v-display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-tight); }
.v-display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-display); }

h1, .v-h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2, .v-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3, .v-h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: 600; }
h4, .v-h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: 600; }

p, .v-body  { font-size: var(--fs-body);   line-height: var(--lh-body); text-wrap: pretty; }
.v-body-l   { font-size: var(--fs-body-l); line-height: var(--lh-body); }
.v-body-s   { font-size: var(--fs-body-s); line-height: var(--lh-body); }
.v-lead     { font-family: var(--font-sans); font-size: var(--fs-body-l); line-height: 1.5; color: var(--fg-muted); }

.v-caption  { font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-subtle); }

.v-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.v-tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

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

/* The gold rule used as a divider under section eyebrows or above CTAs */
.v-rule-gold {
  display: inline-block;
  width: 48px;
  height: var(--border-w-rule);
  background: var(--valioro-gold);
}

/* Inverse text on black backgrounds */
.on-black, .on-black h1, .on-black h2, .on-black h3, .on-black h4 { color: var(--fg-inverse); }
.on-black p, .on-black .v-body { color: var(--fg-inverse-muted); }
.on-black .v-eyebrow { color: var(--valioro-gold); }

/* Selection */
::selection { background: var(--valioro-gold); color: var(--valioro-black); }