/* ============================================================
   PARALLAX — Design System Foundations
   Minimalist, technical, print-first system for workshop
   programme booklets and exhibition collateral.
   Fonts: Fragment Mono (display/mono) + Inter (text)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Brand monospace — self-hosted Fragment Mono (single weight 400). */
@font-face {
  font-family: 'Fragment Mono';
  src: url('fonts/FragmentMono-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLOR · Structure / Signal ----------
     Deep wine channel. Charts, data, primary "signal" accents. */
  --structure-claret:  #A82D3C;
  --structure-wine:  #6E2030;
  --structure-burgundy: #45131F;

  /* ---------- COLOR · Narrative / Human ----------
     Warm bronze channel. Editorial accents, human/story content. */
  --narrative-bronze:  #9A6A3C;
  --narrative-ochre: #C8983F;
  --narrative-rust:    #B14A2B;

  /* ---------- COLOR · Context / Environment ----------
     The grayscale substrate everything is built on. */
  --context-100: #F4F1EC;
  --context-300: #D9D3CB;
  --context-500: #A89E92;
  --context-700: #6B6158;
  --context-900: #2E2723;
  --context-ink: #181210;  /* near-black page ground for dark spreads */
  --paper:       #F4EFE7;  /* warm cream paper ground for editorial mode */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg-dark:   var(--context-ink);
  --bg-light:  var(--context-100);
  --bg-paper:  var(--paper);
  --fg-on-dark:  var(--context-100);
  --fg-on-light: var(--context-900);
  --fg-muted-on-dark:  var(--context-500);
  --fg-muted-on-light: var(--context-700);
  --hairline-on-dark:  rgba(245,245,245,0.45);
  --hairline-on-light: var(--context-300);
  --accent: var(--structure-wine);     /* default signal accent */
  --accent-hover: var(--structure-claret);
  --accent-narrative: var(--narrative-rust);

  /* ---------- TYPE FAMILIES ---------- */
  --font-mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Fragment Mono ships a single weight (400). Display hierarchy is carried
     by SIZE, not weight — do not request 500/600 on the mono family. */
  --font-sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ---------- TYPE SCALE (px → rem at 16px base) ----------
     Display set uses Fragment Mono; text set uses Inter. */
  --display-xl: 72px;  --display-xl-lh: 84px;  --display-xl-ls: -0.02em;
  --display-l:  56px;  --display-l-lh:  64px;  --display-l-ls:  -0.015em;
  --display-m:  40px;  --display-m-lh:  48px;  --display-m-ls:  -0.01em;
  --heading:    24px;  --heading-lh:    32px;
  --body:       16px;  --body-lh:       24px;
  --caption:    12px;  --caption-lh:    16px;  --caption-ls: 0.04em;

  /* ---------- SPACING · 8px base unit ---------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* ---------- LAYOUT ---------- */
  --grid-cols-desktop: 12;
  --grid-cols-tablet: 8;
  --grid-cols-mobile: 4;
  --margin-desktop: 80px;
  --gutter-desktop: 24px;

  /* ---------- RADII · system is square by intent ---------- */
  --radius: 0px;

  /* ---------- MOTION TOKENS ---------- */
  --ease-resolve: cubic-bezier(0.2, 0, 0, 1);
  --dur-resolve: 300ms;       /* elements sharpen into focus */
  --dur-synchronize: 600ms;   /* stripe layers align */
  --dur-drift: 12s;           /* subtle looping phase shift */
}

/* ============================================================
   BASE TYPOGRAPHIC ROLES
   Apply these classes (or @extend the rules) for consistency.
   ============================================================ */

.t-display-xl {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--display-xl);
  line-height: var(--display-xl-lh);
  letter-spacing: var(--display-xl-ls);
}
.t-display-l {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--display-l);
  line-height: var(--display-l-lh);
  letter-spacing: var(--display-l-ls);
}
.t-display-m {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--display-m);
  line-height: var(--display-m-lh);
  letter-spacing: var(--display-m-ls);
}
.t-heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--heading);
  line-height: var(--heading-lh);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--body);
  line-height: var(--body-lh);
}
.t-caption {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--caption);
  line-height: var(--caption-lh);
  letter-spacing: var(--caption-ls);
}

/* Section label, e.g. "_Financial Highlights" — leading underscore is a motif */
.t-section-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--heading);
  line-height: var(--heading-lh);
}
.t-section-label::before { content: "_"; opacity: 0.7; }

/* Monospace tag / metadata, e.g. "AUTOCAD", "QGIS + ILLUSTRATOR" */
.t-tag {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--caption);
  line-height: var(--caption-lh);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   SIGNAL FIELD — the fundamental visual component.
   Horizontal hairline stripes. Vary --sf-gap for density.
   ============================================================ */
.signal-field {
  --sf-stripe: 1px;
  --sf-gap: 6px;            /* low density; 4px med; 2px high */
  --sf-color: var(--context-500);
  background-image: repeating-linear-gradient(
    180deg,
    var(--sf-color) 0,
    var(--sf-color) var(--sf-stripe),
    transparent var(--sf-stripe),
    transparent calc(var(--sf-stripe) + var(--sf-gap))
  );
}
.signal-field.density-medium { --sf-gap: 4px; }
.signal-field.density-high   { --sf-gap: 2px; }
.signal-field.channel-structure { --sf-color: var(--structure-wine); }
.signal-field.channel-narrative { --sf-color: var(--narrative-bronze); }