/* ════════════════════════════════════════════════════════════════
   IRPP Figure Theme — Shared Base Styles
   Every figure imports this file. Change a value here,
   it updates everywhere.
   ════════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://use.typekit.net/qgl3xbs.css');

:root {

  /* ══════════════════════════════════════════════════════════════
     1. TYPOGRAPHY
     Primary: Proxima Nova (Adobe Fonts / Typekit kit qgl3xbs).
     Weights 400, 500, 600, 700 in normal + italic.
     ══════════════════════════════════════════════════════════════ */

  --font-primary: 'proxima-nova', system-ui, sans-serif;
  --font-secondary: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  --fs-label-xs: 8px;
  --fs-label-sm: 8px;
  --fs-label: 10px;
  --fs-body-sm: 9px;
  --fs-body: 10px;
  --fs-body-lg: 11px;
  --fs-subhead: 12px;
  --fs-head: 14px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --ls-uppercase: 0.8px;


  /* ══════════════════════════════════════════════════════════════
     2. SPACING
     ══════════════════════════════════════════════════════════════ */

  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;


  /* ══════════════════════════════════════════════════════════════
     3. FIGURE DIMENSIONS
     Print default: 550px. Export at 2× for print.
     ══════════════════════════════════════════════════════════════ */

  --fig-width: 550px;
  --fig-height: 380px;

  --fig-width-wide: 602px;
  --fig-height-wide: 480px;

  --fig-width-tall: 476px;
  --fig-height-tall: 600px;

  --fig-height-short: 320px;


  /* ══════════════════════════════════════════════════════════════
     4. INTERACTION
     ══════════════════════════════════════════════════════════════ */

  --transition-fast: 120ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow: 350ms ease-out;

  --alpha-hover: 0.85;
  --alpha-faded: 0.20;
  --alpha-muted: 0.45;


  /* ══════════════════════════════════════════════════════════════
     5. BORDER & SHADOW
     ══════════════════════════════════════════════════════════════ */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 8px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.20);
}


/* ══════════════════════════════════════════════════════════════
   BASE STYLES
   ══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  color: var(--text-layout-canvas);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ── Figure container ── */

.figure-container {
  width: 100%;
  max-width: var(--fig-width);
  height: var(--fig-height);
  background: var(--surface-layout-canvas);
  overflow: hidden;
  position: relative;
}

.figure-container--wide {
  max-width: var(--fig-width-wide);
  height: var(--fig-height-wide);
}

.figure-container--tall {
  max-width: var(--fig-width-tall);
  height: var(--fig-height-tall);
}


/* ── Development wrapper ── */

.dev-wrapper {
  background: #e8e8e8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
}


/* ══════════════════════════════════════════════════════════════
   SHARED COMPONENT PATTERNS
   ══════════════════════════════════════════════════════════════ */

/* ── Section labels (e.g., "CONTEXT", "STEP 1") ── */
.section-label {
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--text-layout-canvas-brand);
}

/* ── Panel description text ── */
.panel-text {
  font-size: var(--fs-body);
  color: var(--text-layout-canvas);
  line-height: var(--lh-normal);
}

.panel-text--small {
  font-size: var(--fs-label);
  color: var(--text-layout-canvas-subtle);
}

/* ── Axis labels (D3/SVG) ── */
.axis-label {
  font-family: var(--font-primary);
  font-size: var(--fs-label-sm);
  fill: var(--text-layout-canvas-subtle);
}

.axis-title {
  font-family: var(--font-primary);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  fill: var(--text-layout-canvas);
}

/* ── Gridlines ── */
.gridline {
  stroke: var(--border-layout-canvas-subtle);
  stroke-width: 0.5;
}

/* ── Direct labels (on chart elements) ── */
.direct-label {
  font-family: var(--font-primary);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  fill: var(--text-layout-canvas);
}


/* ══════════════════════════════════════════════════════════════
   CONTROLS (Dropdowns above figures)
   ══════════════════════════════════════════════════════════════ */

.iframe-controls {
  display: flex;
  gap: var(--sp-12);
  padding: var(--sp-8) var(--sp-16);
  background: var(--surface-layout-canvas-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-bottom: 0;
  width: var(--fig-width);
  align-items: center;
}

.control-group {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.control-group label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--text-layout-canvas-brand);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
}

.control-group select {
  appearance: none;
  background-color: transparent;
  border: none;
  font-family: var(--font-primary);
  font-size: var(--fs-body-lg);
  color: var(--text-layout-canvas);
  cursor: pointer;
  outline: none;
  padding: 0 var(--sp-12) 0 0;
}


/* ══════════════════════════════════════════════════════════════
   EXPORT HELPERS
   ══════════════════════════════════════════════════════════════ */

body.export-mode {
  background: transparent;
  padding: 0;
  margin: 0;
}

body.export-mode .dev-wrapper {
  background: transparent;
  padding: 0;
  min-height: auto;
}

body.export-mode .dev-label {
  display: none;
}

@media print {
  body {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .dev-wrapper {
    background: transparent !important;
    padding: 0 !important;
    min-height: auto !important;
  }
  .dev-label,
  .iframe-controls {
    display: none !important;
  }
}