/* ==========================================================================
   ovh-style-newlook.css — site-specific design tokens, typography, and
   theme utilities for the new-look public pages.
   Loaded after ovh-style-newlook-tailwind.css.
   ========================================================================== */

/* --- Self-hosted fonts (air-gap safe) --- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/instrument-serif-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/instrument-serif-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
  --bg: oklch(98.8% 0.004 240);
  --surface: oklch(100% 0 0);
  --ink: oklch(18% 0.012 240);
  --ink-soft: oklch(38% 0.012 240);
  --ink-mute: oklch(58% 0.010 240);
  --rule: oklch(90% 0.008 240);
  --rule-soft: oklch(94% 0.006 240);
  --accent: #9C1491;
  --accent-soft: oklch(94% 0.04 330);
}

html {
  scroll-behavior: smooth;
}

html, body {
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
}

/* --- Typography helpers --- */
.font-serif {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.display {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96;
}

.pull-quote { text-wrap: balance; }
.body-prose { text-wrap: pretty; }
.num-tag    { font-variant-numeric: tabular-nums; }

/* --- Color theme classes --- */
.text-ink       { color: var(--ink); }
.text-ink-soft  { color: var(--ink-soft); }
.text-ink-mute  { color: var(--ink-mute); }
.text-accent    { color: var(--accent); }

.bg-ink     { background: var(--ink); }
.bg-ink-mute     { background: var(--ink-mute); }
.bg-accent  { background: var(--accent); }
.bg-surface { background: var(--surface); }
.bg-rule    { background: var(--rule); }
.bg-bg      { background: var(--bg); }
.bg-accent-soft { background: var(--accent-soft); }

.border-rule      { border-color: var(--rule); }
.border-rule-soft { border-color: var(--rule-soft); }

/* --- Video contrast boost (white-bg videos wash out against page) --- */
video {
  filter: contrast(1.1) saturate(1.05);
}

/* --- Decorative bits --- */
.cap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.hairline { height: 1px; background: var(--rule); }

.placeholder-stripe {
  background-image: repeating-linear-gradient(
    135deg,
    var(--rule-soft) 0 12px,
    transparent 12px 24px
  );
}