/* ================================================================
   Fidare Gestion — Color & Type Foundations
   ----------------------------------------------------------------
   Wealth management cabinet • French • conservative, refined.
   Anchors: deep navy (#011536), warm champagne (#FFE1B6), white.
   ================================================================ */

/* Marcellus SC — brand-supplied .ttf, served locally. */
@font-face {
  font-family: "Marcellus SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/MarcellusSC-Regular.ttf") format("truetype");
}

/* Quicksand — brand-supplied variable font, served locally. */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/Quicksand-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Quicksand-VariableFont_wght.ttf") format("truetype");
}

:root {
  /* -----------------------------------------------------------
     1. CORE BRAND COLORS
     ----------------------------------------------------------- */
  --fg-navy:           #011536;   /* Primary brand. Headlines, ink, accents. */
  --fg-navy-700:       #0a2350;   /* Highlight on the diamond gradient. */
  --fg-navy-500:       #1d3a73;   /* Mid navy — links, hover. */
  --fg-navy-300:       #4a679f;   /* Soft navy — secondary text on light. */

  --fg-champagne:      #FFE1B6;   /* Warm accent. Calls to action, highlights, decorative. */
  --fg-champagne-600:  #f0c98a;   /* Pressed / hover state for champagne. */
  --fg-champagne-200:  #fff1d8;   /* Wash tint for backgrounds. */
  --fg-champagne-50:   #fffaf0;   /* Barely-there cream wash. */

  --fg-white:          #ffffff;
  --fg-ivory:          #fbf9f5;   /* Off-white page surface. */

  /* -----------------------------------------------------------
     2. NEUTRALS (cool, navy-leaning)
     ----------------------------------------------------------- */
  --fg-ink:            #011536;   /* alias of navy — primary text */
  --fg-ink-2:          #2a3a5a;   /* secondary text */
  --fg-ink-3:          #5b6883;   /* tertiary / meta */
  --fg-ink-4:          #8a93a9;   /* placeholder, disabled */
  --fg-line:           #e3e6ee;   /* hairline borders */
  --fg-line-strong:    #c9cfdd;   /* visible dividers */
  --fg-surface:        #ffffff;
  --fg-surface-alt:    #f6f7fb;   /* card on light page */
  --fg-surface-deep:   #011536;   /* card on dark / hero */

  /* -----------------------------------------------------------
     3. SEMANTIC
     ----------------------------------------------------------- */
  --fg-success:        #2f7a5a;
  --fg-warning:        #b97a17;
  --fg-danger:         #a4312b;

  /* -----------------------------------------------------------
     4. GRADIENTS & DECORATION
     ----------------------------------------------------------- */
  --fg-grad-diamond:   linear-gradient(160deg, #0a2350 0%, #011536 55%, #021026 100%);
  --fg-grad-hero:      linear-gradient(180deg, #011536 0%, #021a40 100%);
  --fg-grad-champagne: linear-gradient(180deg, #fff1d8 0%, #FFE1B6 100%);
  --fg-gold-rule:      linear-gradient(90deg, transparent, #FFE1B6 50%, transparent);

  /* -----------------------------------------------------------
     5. ELEVATION (subtle — this is a conservative brand)
     ----------------------------------------------------------- */
  --fg-shadow-xs:      0 1px 2px rgba(1, 21, 54, 0.06);
  --fg-shadow-sm:      0 2px 6px rgba(1, 21, 54, 0.08);
  --fg-shadow-md:      0 10px 24px -8px rgba(1, 21, 54, 0.18);
  --fg-shadow-lg:      0 24px 60px -16px rgba(1, 21, 54, 0.28);
  --fg-shadow-inset:   inset 0 1px 0 rgba(255,255,255,0.06);

  /* -----------------------------------------------------------
     6. RADII (modest — the brand reads classical, not playful)
     ----------------------------------------------------------- */
  --fg-radius-xs:  2px;
  --fg-radius-sm:  4px;
  --fg-radius-md:  8px;
  --fg-radius-lg:  14px;
  --fg-radius-pill: 999px;

  /* -----------------------------------------------------------
     7. SPACING SCALE (8-px base, sometimes 4px for tight UI)
     ----------------------------------------------------------- */
  --fg-space-1:   4px;
  --fg-space-2:   8px;
  --fg-space-3:  12px;
  --fg-space-4:  16px;
  --fg-space-5:  24px;
  --fg-space-6:  32px;
  --fg-space-7:  48px;
  --fg-space-8:  64px;
  --fg-space-9:  96px;
  --fg-space-10:128px;

  /* -----------------------------------------------------------
     8. TYPE — FAMILIES
     ----------------------------------------------------------- */
  --fg-font-display: "Marcellus SC", "Cormorant SC", "Trajan Pro", Georgia, serif;
  --fg-font-body:    "Quicksand", "Avenir Next", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --fg-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -----------------------------------------------------------
     9. TYPE — SEMANTIC TOKENS
        Display: Marcellus SC (small caps, elegant, classical)
        Body:    Quicksand (rounded, warm sans)
     ----------------------------------------------------------- */
  --fg-h1-size:    56px;
  --fg-h1-line:    1.08;
  --fg-h1-tracking: 0.01em;

  --fg-h2-size:    40px;
  --fg-h2-line:    1.15;
  --fg-h2-tracking: 0.02em;

  --fg-h3-size:    28px;
  --fg-h3-line:    1.25;
  --fg-h3-tracking: 0.03em;

  --fg-eyebrow-size: 13px;
  --fg-eyebrow-line: 1.2;
  --fg-eyebrow-tracking: 0.22em;

  --fg-lede-size:  20px;
  --fg-lede-line:  1.55;

  --fg-body-size:  16px;
  --fg-body-line:  1.65;

  --fg-small-size: 14px;
  --fg-small-line: 1.5;

  --fg-caption-size: 12px;
  --fg-caption-tracking: 0.06em;
}

/* ----------------------------------------------------------------
   BASE ELEMENT STYLES
   ---------------------------------------------------------------- */
.fg-root,
.fg {
  font-family: var(--fg-font-body);
  font-weight: 400;
  color: var(--fg-ink);
  background: var(--fg-ivory);
  font-size: var(--fg-body-size);
  line-height: var(--fg-body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fg h1, .fg-h1 {
  font-family: var(--fg-font-display);
  font-weight: 400;
  font-size: var(--fg-h1-size);
  line-height: var(--fg-h1-line);
  letter-spacing: var(--fg-h1-tracking);
  color: var(--fg-navy);
  margin: 0;
}
.fg h2, .fg-h2 {
  font-family: var(--fg-font-display);
  font-weight: 400;
  font-size: var(--fg-h2-size);
  line-height: var(--fg-h2-line);
  letter-spacing: var(--fg-h2-tracking);
  color: var(--fg-navy);
  margin: 0;
}
.fg h3, .fg-h3 {
  font-family: var(--fg-font-display);
  font-weight: 400;
  font-size: var(--fg-h3-size);
  line-height: var(--fg-h3-line);
  letter-spacing: var(--fg-h3-tracking);
  color: var(--fg-navy);
  margin: 0;
}

.fg-eyebrow {
  font-family: var(--fg-font-body);
  font-weight: 500;
  font-size: var(--fg-eyebrow-size);
  line-height: var(--fg-eyebrow-line);
  letter-spacing: var(--fg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-navy-500);
}

.fg-lede {
  font-family: var(--fg-font-body);
  font-weight: 400;
  font-size: var(--fg-lede-size);
  line-height: var(--fg-lede-line);
  color: var(--fg-ink-2);
}

.fg p, .fg-body {
  font-family: var(--fg-font-body);
  font-weight: 400;
  font-size: var(--fg-body-size);
  line-height: var(--fg-body-line);
  color: var(--fg-ink-2);
  text-wrap: pretty;
}

.fg-small {
  font-size: var(--fg-small-size);
  line-height: var(--fg-small-line);
  color: var(--fg-ink-3);
}

.fg-caption {
  font-size: var(--fg-caption-size);
  letter-spacing: var(--fg-caption-tracking);
  text-transform: uppercase;
  color: var(--fg-ink-3);
  font-weight: 500;
}

/* Pull-quote (used for the brand's signature Warren Buffett quote layout) */
.fg-quote {
  font-family: var(--fg-font-display);
  font-size: 32px;
  line-height: 1.3;
  color: var(--fg-navy);
  letter-spacing: 0.02em;
  font-style: italic;
}
.fg-quote::before { content: "« "; }
.fg-quote::after  { content: " »"; }

/* Brand wordmark — F and G capitalised, the rest lowercase (set by fidare-wordmark.js) */
.fg-name { text-transform: lowercase; }
.fg-cap { text-transform: uppercase; font-size: 1.13em; line-height: 1; }

/* Decorative gold hairline used between sections */
.fg-rule {
  height: 1px;
  background: var(--fg-gold-rule);
  border: 0;
  width: 80px;
}

/* ----------------------------------------------------------------
   BRAND MOTIF — diamond outline with subtle breath animation
   Two strokes (champagne + navy) trace the diamond contour.
   Used as a recurring brand mark across sections, dividers, hero
   decoration, the footer rule, etc.

   Usage:
     <svg class="fg-diamond-motif" viewBox="0 0 100 100" width="64" height="64" aria-hidden="true">
       <path class="fg-half fg-half-l" d="M 50 6 L 6 50 L 50 94"
             fill="none" stroke="#FFE1B6" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter"/>
       <path class="fg-half fg-half-r" d="M 50 6 L 94 50 L 50 94"
             fill="none" stroke="#011536" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter"/>
     </svg>

   Variants:
     .on-dark   — navy half flips to white for use on navy backgrounds
     .fg-still  — disables the breath animation entirely
   ---------------------------------------------------------------- */
.fg-diamond-motif {
  display: block;
  overflow: visible;
  animation: fg-motif-sway 9s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.fg-diamond-motif .fg-half-l {
  animation: fg-motif-breath 5.5s ease-in-out infinite;
}
.fg-diamond-motif .fg-half-r {
  animation: fg-motif-breath 5.5s ease-in-out 2.75s infinite;
}
.fg-diamond-motif.on-dark .fg-half-r { stroke: #ffffff !important; }
.fg-diamond-motif.fg-still,
.fg-diamond-motif.fg-still .fg-half-l,
.fg-diamond-motif.fg-still .fg-half-r {
  animation: none;
}

@keyframes fg-motif-breath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes fg-motif-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fg-diamond-motif,
  .fg-diamond-motif .fg-half-l,
  .fg-diamond-motif .fg-half-r {
    animation: none !important;
  }
}