/* ============================================================
   PRIVATE OFFICE — Design Foundations
   Colors + Typography tokens
   Family office · Luxembourg
   ============================================================ */

/* --- Web fonts (self-hosted, latin subset) ---
   Each face below is the file that actually carries it. Playfair Display and
   Cormorant Garamond are variable on the weight axis only — neither ships an
   `ital` axis, so a genuine italic must be its own file. Pointing an
   `font-style: italic` rule at a roman file makes the browser slant the
   upright glyphs, which reads as a fake on a high-contrast Didone — the
   hero's "conviction." is set in exactly that face. */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/static/fonts/PlayfairDisplay.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/static/fonts/PlayfairDisplay-Italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/CormorantGaramond-Light.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* The serif's italic register carries the drafting notes, the declined-gate
   notice and the enquiry form's status line — all set in --font-serif. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/CormorantGaramond-LightItalic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/Inter-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ============================================================
   COLOR SYSTEM
   Drawn directly from the crest identity:
   navy field · brass emblem · ivory ground
   ============================================================ */
:root {
  /* Navy — the "field" of the crest. */
  --navy-900:  #08111d;
  --navy-800:  #0e1b2c;
  --navy-700:  #142338;
  --navy-600:  #1c2e46;
  --navy-500:  #2a3f5a;
  --navy-400:  #4b5e78;
  --navy-300:  #7d8ba3;
  --navy-200:  #b6bfce;
  --navy-100:  #dfe3ec;

  /* Brass — the emblem accent. */
  --brass-900: #6d5424;
  --brass-800: #856934;
  --brass-700: #9a7c3f;
  --brass-600: #b18f4b;
  --brass-500: #c2a25c;
  --brass-400: #d4b877;
  --brass-300: #e3cd9a;
  --brass-200: #efdfbf;

  /* Ivory / paper — the ground. */
  --ivory-50:  #fbf8f2;
  --ivory-100: #f5f0e6;
  --ivory-200: #ede6d5;
  --ivory-300: #ded3ba;

  --white:     #ffffff;
  --black:     #000000;

  /* ---------- Semantic — light (ivory) surfaces ---------- */
  --bg:            var(--ivory-50);
  --bg-raised:     var(--ivory-100);
  --bg-sunken:     #f2ecdf;

  --fg:            var(--navy-800);
  --fg-strong:     var(--navy-900);
  --fg-muted:      var(--navy-500);
  --fg-subtle:     var(--navy-400);
  --fg-faint:      var(--navy-300);

  --rule:          var(--brass-700);
  --rule-soft:     var(--ivory-300);
  --rule-cold:     var(--navy-100);

  --accent:        var(--brass-700);
  --accent-hover:  var(--brass-800);
  --accent-press:  var(--brass-900);

  /* ---------- Semantic — dark (navy) surfaces ---------- */
  --on-navy-fg:        var(--ivory-50);
  --on-navy-fg-muted:  #c9d2df;
  --on-navy-fg-subtle: #8a97ab;
  --on-navy-rule:      var(--brass-600);
  --on-navy-rule-soft: rgba(194, 162, 92, 0.24);
  --on-navy-accent:    var(--brass-500);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Playfair Display', 'Didot', 'Bodoni 72', 'Bodoni MT', Georgia, serif;
  --font-serif:   'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display:   clamp(64px, 8vw, 120px);
  --fs-h1:        clamp(44px, 5.5vw, 84px);
  --fs-h2:        clamp(32px, 3.8vw, 56px);
  --fs-h3:        clamp(24px, 2.4vw, 36px);
  --fs-h4:        20px;
  --fs-lead:      21px;
  --fs-body:      17px;
  --fs-small:     15px;
  --fs-caption:   13px;
  --fs-eyebrow:   12px;
  --fs-micro:     11px;

  --lh-display:   1.02;
  --lh-heading:   1.12;
  --lh-body:      1.62;
  --lh-tight:     1.28;

  --ls-display:   -0.015em;
  --ls-heading:   -0.008em;
  --ls-body:       0em;
  --ls-eyebrow:   0.22em;
  --ls-wordmark:  0.34em;
  --ls-small-caps: 0.14em;

  /* ============================================================
     SPACING / RADIUS / SHADOW / MOTION
     ============================================================ */
  --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;
  --space-11: 160px;
  --space-12: 200px;

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-pill: 999px;

  --hairline:      1px;
  --hairline-thick: 2px;

  --shadow-sm:  0 1px 2px rgba(14, 27, 44, 0.04);
  --shadow-md:  0 8px 24px -12px rgba(14, 27, 44, 0.18);
  --shadow-lg:  0 24px 60px -20px rgba(14, 27, 44, 0.28);
  --shadow-inset-brass: inset 0 0 0 1px var(--brass-700);

  --ease-standard:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 0.7, 0.2);
  --ease-out:       cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.65, 0.05, 0.35, 1);
  --dur-fast:       220ms;
  --dur-med:        480ms;
  --dur-slow:       720ms;
  --dur-xslow:      900ms;

  --container-max: 1360px;
  --container-pad: clamp(24px, 5vw, 88px);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  margin: 0;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 400;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-5) 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; }

p  { margin: 0 0 var(--space-4) 0; text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-standard),
              color       var(--dur-med) var(--ease-standard),
              opacity     var(--dur-med) var(--ease-standard);
}
a:hover { border-bottom-color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}

/* --- Utility classes for typographic patterns --- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  display: inline-block;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
}

.small-caps {
  font-variant: small-caps;
  letter-spacing: var(--ls-small-caps);
}

.serif { font-family: var(--font-serif); }
.display { font-family: var(--font-display); }

/* Dark-surface text context */
.on-navy { color: var(--on-navy-fg); }
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4, .on-navy h5 { color: var(--ivory-50); }

/* Visually hidden, still read by assistive technology */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ivory-50); color: var(--navy-800);
  padding: 12px 20px; font-family: var(--font-sans); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }