/* ============================================================
   PLEDGER DESIGN SYSTEM — colors & type
   The lighthouse is not rescue. It is signal.
   Three connected brands: source (TDP) → stability (TDL) → projection (PS)
   ============================================================ */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-SemiboldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("fonts/Degular-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     CORE PALETTE — documented in the brand book
     ============================================================ */

  /* Deep neutrals — the structural foundation */
  --c-nightfall:        #13171e; /* deepest. richer than black. atmospheric base */
  --c-imperial-indigo:  #0a1939; /* primary brand navy. dominant surface for TDP & PS */
  --c-admiral-ink:      #17344b; /* mid-navy, ink-like. surfaces, dividers, hover */
  --c-slate-ocean:      #2d577c; /* lifted blue. lines, secondary type on dark */

  /* Steel & silver — the lighthouse stone */
  --c-steel-700:        #5a6b7e; /* steel grey, structural */
  --c-steel-500:        #8a99ad; /* TDL lighthouse body */
  --c-steel-300:        #b9c2cf; /* light steel — borders on dark */
  --c-steel-100:        #e6e9ee; /* near-white steel */

  /* Light beam (TDL) — restrained whites */
  --c-paper:            #f4f1ea; /* warm off-white. editorial paper */
  --c-bone:             #ece7da; /* soft bone for cream surfaces */
  --c-white:            #ffffff;

  /* Lighthouse glow — the gold */
  --c-glow-deep:        #b78a2a; /* deepest gold, structural */
  --c-glow-500:         #d4a942; /* primary brand gold */
  --c-glow-400:         #e7c674; /* mid glow */
  --c-glow-200:         #f3deaa; /* soft glow, halo */
  --c-glow-100:         #faf0d4; /* nearly-paper glow tip */

  /* ============================================================
     SEMANTIC TOKENS — default = The Daniel Pledger (parent)
     Each brand-scope below overrides these.
     ============================================================ */

  /* Surfaces */
  --bg:                 var(--c-imperial-indigo);
  --bg-elev:            var(--c-admiral-ink);
  --bg-deep:            var(--c-nightfall);
  --bg-paper:           var(--c-paper);

  /* Foregrounds */
  --fg:                 var(--c-steel-100);   /* primary text on dark */
  --fg-strong:          var(--c-white);
  --fg-muted:           var(--c-steel-300);
  --fg-faint:           var(--c-slate-ocean);
  --fg-ink:             var(--c-nightfall);   /* primary text on paper */
  --fg-ink-muted:       var(--c-admiral-ink);

  /* Accent — the beam */
  --accent:             var(--c-glow-500);
  --accent-soft:        var(--c-glow-200);
  --accent-deep:        var(--c-glow-deep);
  --beam-from:          rgba(212, 169, 66, 0.55);
  --beam-to:            rgba(212, 169, 66, 0);

  /* Lines & borders */
  --line:               rgba(230, 233, 238, 0.10);
  --line-strong:        rgba(230, 233, 238, 0.22);
  --line-ink:           rgba(10, 25, 57, 0.12);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: "Degular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Type scale — editorial, generous */
  --t-display:   clamp(56px, 7.2vw, 112px);  /* hero monolith */
  --t-h1:        clamp(40px, 4.6vw, 72px);   /* dominant headline */
  --t-h2:        clamp(30px, 3.0vw, 48px);   /* section headline */
  --t-h3:        clamp(22px, 1.9vw, 30px);   /* subsection */
  --t-h4:        18px;
  --t-body-lg:   20px;
  --t-body:      17px;
  --t-body-sm:   15px;
  --t-meta:      13px;
  --t-eyebrow:   12px;

  /* Weights */
  --w-thin: 100;
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 900;

  /* Tracking — tight for headlines, open for labels */
  --tr-tight:   -0.02em;
  --tr-normal:   0;
  --tr-loose:    0.04em;
  --tr-label:    0.22em;  /* the small structural ALL CAPS labels */

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* ============================================================
     SPACE & SHAPE
     ============================================================ */
  --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: 144px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Shadows — restrained, mostly atmospheric */
  --shadow-sm: 0 1px 2px rgba(10, 25, 57, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 25, 57, 0.18);
  --shadow-lg: 0 24px 80px rgba(10, 25, 57, 0.32);
  --shadow-glow: 0 0 0 1px rgba(212, 169, 66, 0.18), 0 12px 40px rgba(212, 169, 66, 0.15);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo out, slow settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
  --dur-drift: 7s;          /* spotlight drift */
}

/* ============================================================
   BRAND SCOPES — apply with [data-brand="..."] on any ancestor
   ============================================================ */

/* The Daniel Pledger — parent. Deepest, most restrained. Narrow gold beam. */
[data-brand="tdp"] {
  --bg: var(--c-imperial-indigo);
  --bg-elev: var(--c-admiral-ink);
  --bg-deep: var(--c-nightfall);
  --accent: var(--c-glow-500);
  --accent-soft: var(--c-glow-200);
  --beam-from: rgba(212, 169, 66, 0.55);
  --beam-to: rgba(212, 169, 66, 0);
}

/* The Distinctive Leader — corporate. Slate, structured. White uni-directional beam. */
[data-brand="tdl"] {
  --bg: #0e2236;          /* slightly bluer / more architectural than TDP */
  --bg-elev: var(--c-admiral-ink);
  --bg-deep: #081827;
  --accent: var(--c-paper);          /* clear white beam */
  --accent-soft: rgba(244, 241, 234, 0.6);
  --accent-deep: var(--c-glow-500);  /* gold survives as secondary detail */
  --beam-from: rgba(244, 241, 234, 0.55);
  --beam-to: rgba(244, 241, 234, 0);
}

/* PledgerSpeaks — public. Bright, more open. Reverberating gold beam. */
[data-brand="ps"] {
  --bg: var(--c-imperial-indigo);
  --bg-elev: #142a4a;
  --bg-deep: #081229;
  --accent: var(--c-glow-400);       /* slightly brighter */
  --accent-soft: var(--c-glow-200);
  --accent-deep: var(--c-glow-deep);
  --beam-from: rgba(231, 198, 116, 0.65);
  --beam-to: rgba(231, 198, 116, 0);
}

/* Paper inversion — for inside-cards, articles, slides on cream */
[data-surface="paper"] {
  --bg: var(--c-paper);
  --bg-elev: var(--c-bone);
  --bg-deep: var(--c-white);
  --fg: var(--c-nightfall);
  --fg-strong: var(--c-nightfall);
  --fg-muted: var(--c-admiral-ink);
  --fg-faint: var(--c-slate-ocean);
  --line: rgba(10, 25, 57, 0.08);
  --line-strong: rgba(10, 25, 57, 0.18);
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--t-h1);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-strong);
  text-wrap: balance;
  margin: 0 0 var(--space-5);
}
h2, .h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-strong);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}
h3, .h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-strong);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-size: var(--t-h4);
  font-weight: var(--w-medium);
  line-height: 1.3;
  color: var(--fg-strong);
  margin: 0 0 var(--space-2);
}

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

.display {
  font-size: var(--t-display);
  font-weight: var(--w-bold);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--fg-strong);
  text-wrap: balance;
}

/* The small structural label — sentence-level signal */
.eyebrow, .label {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
}

.meta {
  font-size: var(--t-meta);
  font-weight: var(--w-regular);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

.lede {
  font-size: var(--t-body-lg);
  line-height: 1.45;
  color: var(--fg);
  font-weight: var(--w-light);
  max-width: 56ch;
}

/* Quiet quote, used in editorial sections */
.pull-quote {
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: var(--w-light);
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  max-width: 22ch;
}

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