/* ═══════════════════════════════════════════════════════════════════════
   CPHL Design System — Colors & Typography
   ═══════════════════════════════════════════════════════════════════════

   Single source of truth for all color and type variables.
   Usage: Import this CSS into any CPHL project.

   Fonts: Schibsted Grotesk (display/body), Newsreader (editorial),
          Spline Sans Mono (data/labels)
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap');

:root {
  /* ─────────────────────────────────────────────────────────────────────
     COLOR PALETTE
     ───────────────────────────────────────────────────────────────────── */

  /* Ink Navy — Primary brand color (deepened, near-ink) */
  --cphl-navy: #152238;
  --cphl-navy-deep: #0B1424;
  --cphl-navy-80: #152238cc;
  --cphl-navy-60: #15223899;
  --cphl-navy-12: #1522381f;

  /* Aged Brass — Premium accent (CTAs, metrics, highlights) */
  --cphl-gold: #B3925A;
  --cphl-gold-soft: #D8C69C;
  --cphl-gold-deep: #8F6F3D;

  /* Slate Teal — Data, charts, secondary highlights */
  --cphl-teal: #3F7183;
  --cphl-teal-soft: #7DA3B0;
  --cphl-teal-deep: #28505F;

  /* Neutrals — warm paper, not stark white */
  --cphl-ivory: #F2EDE3;         /* Paper backgrounds */
  --cphl-ivory-deep: #E6DECD;
  --cphl-stone: #857E71;         /* Supporting text, captions */
  --cphl-stone-soft: #AFA795;
  --cphl-charcoal: #22262E;

  /* Status colors */
  --cphl-sage: #6F9351;          /* Success, optimal zone */
  --cphl-sage-soft: #9BB77E;
  --cphl-clay: #B26D3D;          /* Warning, suboptimal zone */
  --cphl-clay-soft: #D19A73;

  /* Utility */
  --cphl-white: #FFFFFF;
  --cphl-black: #080C13;
  --cphl-line: rgba(21, 34, 56, 0.14);
  --cphl-line-dark: rgba(255, 255, 255, 0.13);
  --cphl-hairline: rgba(21, 34, 56, 0.22);       /* Editorial rules, stronger than card borders */
  --cphl-hairline-dark: rgba(255, 255, 255, 0.24);

  /* ─────────────────────────────────────────────────────────────────────
     SEMANTIC COLORS (mapped to palette)
     ───────────────────────────────────────────────────────────────────── */

  --color-primary: var(--cphl-navy);
  --color-accent: var(--cphl-gold);
  --color-data: var(--cphl-teal);
  --color-bg-light: var(--cphl-ivory);
  --color-bg-dark: var(--cphl-navy-deep);
  --color-text-primary: var(--cphl-navy);
  --color-text-secondary: var(--cphl-stone);
  --color-text-on-dark: var(--cphl-ivory);
  --color-success: var(--cphl-sage);
  --color-warning: var(--cphl-clay);
  --color-border: var(--cphl-line);

  /* ─────────────────────────────────────────────────────────────────────
     CHART / DATA-VIZ LANGUAGE
     ───────────────────────────────────────────────────────────────────── */

  --chart-grid: rgba(21, 34, 56, 0.08);
  --chart-grid-dark: rgba(255, 255, 255, 0.08);
  --chart-track: rgba(21, 34, 56, 0.07);
  --chart-band-optimal: rgba(111, 147, 81, 0.14);
  --chart-band-warning: rgba(178, 109, 61, 0.12);
  --chart-series-1: var(--cphl-teal);
  --chart-series-2: var(--cphl-gold);
  --chart-series-3: var(--cphl-stone-soft);

  /* ─────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — Font Families
     ───────────────────────────────────────────────────────────────────── */

  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-body: 'Schibsted Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-editorial: 'Newsreader', 'Times New Roman', Georgia, serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;

  /* ─────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — Font Sizes (Desktop)
     Mobile: Scale by 0.75–0.85×
     ───────────────────────────────────────────────────────────────────── */

  --text-display-1: 132px;       /* Oversize hero */
  --text-display-2: 88px;        /* Section hero */
  --text-display-3: 72px;        /* Slide hero */
  --text-h1: 56px;
  --text-h2: 40px;
  --text-h3: 28px;
  --text-h4: 20px;
  --text-body: 17px;
  --text-small: 14px;
  --text-micro: 12px;
  --text-eyebrow: 11px;          /* Monospace uppercase labels */

  /* ─────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — Font Weights
     ───────────────────────────────────────────────────────────────────── */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;           /* Display-only, Schibsted at hero sizes */

  /* ─────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — Letter Spacing
     ───────────────────────────────────────────────────────────────────── */

  --tracking-tight: -0.04em;     /* Display 1 */
  --tracking-snug: -0.03em;      /* Display 2, 3, H1 */
  --tracking-normal: -0.01em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.22em;      /* Eyebrows, nav links */
  --tracking-widest: 0.28em;     /* Uppercase labels */

  /* ─────────────────────────────────────────────────────────────────────
     SPACING SCALE
     ───────────────────────────────────────────────────────────────────── */

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-h1: 64px;
  --space-h2: 96px;
  --space-h3: 128px;

  /* ─────────────────────────────────────────────────────────────────────
     BORDER RADIUS
     ───────────────────────────────────────────────────────────────────── */

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ─────────────────────────────────────────────────────────────────────
     SHADOWS
     ───────────────────────────────────────────────────────────────────── */

  --shadow-sm: 0 1px 2px rgba(11, 20, 36, 0.06), 0 1px 3px rgba(11, 20, 36, 0.08);
  --shadow-md: 0 4px 14px rgba(11, 20, 36, 0.08), 0 2px 4px rgba(11, 20, 36, 0.05);
  --shadow-lg: 0 20px 50px rgba(11, 20, 36, 0.12), 0 6px 12px rgba(11, 20, 36, 0.06);
  --shadow-glow: 0 0 40px rgba(179, 146, 90, 0.22);

  /* ─────────────────────────────────────────────────────────────────────
     MOTION — Durations & Easing
     ───────────────────────────────────────────────────────────────────── */

  --duration-fast: 180ms; /* @kind other */
  --duration-base: 360ms; /* @kind other */
  --duration-slow: 620ms; /* @kind other */
  --duration-cinematic: 1100ms; /* @kind other */

  --ease-signature: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); /* @kind other */

  /* ─────────────────────────────────────────────────────────────────────
     TEXTURE — Grain (dark surfaces only)
     ───────────────────────────────────────────────────────────────────── */

  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* @kind other */
  --grain-opacity: 0.05; /* @kind other */
}

/* ═══════════════════════════════════════════════════════════════════════
   SEMANTIC TEXT STYLES
   Ready-to-use classes for common typographic patterns
   ═══════════════════════════════════════════════════════════════════════ */

.cphl-display-1 {
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 0.98;
}

.cphl-display-2 {
  font-family: var(--font-display);
  font-size: var(--text-display-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.02;
}

.cphl-display-3 {
  font-family: var(--font-display);
  font-size: var(--text-display-3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.05;
}

.cphl-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.1;
}

.cphl-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.cphl-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.cphl-editorial {
  font-family: var(--font-editorial);
  font-size: 32px;
  font-style: italic;
  font-weight: var(--weight-regular);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.cphl-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.55;
  color: var(--color-text-primary);
}

.cphl-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cphl-gold-deep);
}

.cphl-data {
  font-family: var(--font-mono);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   EDITORIAL STRUCTURE — hairlines, folios, running heads, section numbers
   Print-inspired details that anchor CPHL layouts
   ═══════════════════════════════════════════════════════════════════════ */

/* Strong editorial rule — section openers, above running heads */
.cphl-rule {
  border: none;
  border-top: 1px solid var(--cphl-hairline);
  margin: 0;
}

.cphl-rule--dark {
  border-top-color: var(--cphl-hairline-dark);
}

/* Running head — top-of-page identity strip.
   Usage: <div class="cphl-running-head"><span>CPHL</span><span>RAPPORT · Q2 2026</span></div> */
.cphl-running-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cphl-hairline);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--cphl-stone);
}

/* Folio — bottom-of-page strip: document title left, page number right.
   Usage: <div class="cphl-folio"><span>CONFIDENTIEL</span><span>04 / 12</span></div> */
.cphl-folio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid var(--cphl-hairline);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cphl-stone);
}

/* Section number — oversized marginal numeral, print-magazine style.
   Usage: <div class="cphl-section-num">02</div> */
.cphl-section-num {
  font-family: var(--font-editorial);
  font-size: 64px;
  font-weight: var(--weight-regular);
  font-style: italic;
  line-height: 1;
  color: var(--cphl-gold);
  font-variant-numeric: oldstyle-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   GRAIN — subtle film-grain texture for dark surfaces.
   Apply .cphl-grain to any element with position: relative (or let the
   class set it). Never use on light/ivory surfaces.
   ═══════════════════════════════════════════════════════════════════════ */

.cphl-grain {
  position: relative;
  isolation: isolate;
}

.cphl-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain-url);
  background-size: 160px 160px;
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════════════════════
   BASE RESETS
   ═══════════════════════════════════════════════════════════════════════ */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--cphl-ivory);
  color: var(--cphl-navy);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}