/* ============================================================
   CONNECT DISCONNECT — Foundations: Color + Type
   ------------------------------------------------------------
   A clarity residency. Editorial, cinematic, quietly premium.
   Built on contrast: connect / disconnect · signal / noise ·
   warm / cool · structure / space · stillness / movement.

   Fonts are Google Fonts SUBSTITUTES for the original
   commercial faces (see README → VISUAL FOUNDATIONS).
   ============================================================ */

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

:root {
  /* ---------- RAW PALETTE ---------- */
  /* Two poles — the whole identity lives between them. */
  --cd-paper:        #EDECE2; /* warm off-white — primary light ground   */
  --cd-paper-dim:    #E4E2D5; /* slightly recessed paper surface          */
  --cd-paper-deep:   #D9D6C7; /* pressed / inset paper                    */
  --cd-ink:          #1D1B1A; /* warm near-black — primary dark ground    */
  --cd-ink-soft:     #211F20; /* the literal brand near-black (cards)      */
  --cd-ink-raise:    #2A2826; /* raised surface on ink                    */

  /* Text-on-dark (paper never goes pure white) */
  --cd-paper-on-ink: #E6E5DB;
  --cd-paper-faint:  #B7B5A9;

  /* Cool pole — used sparingly for the warm/cool tension */
  --cd-slate:        #223039; /* deep cool slate (strategy/secondary ink) */
  --cd-slate-soft:   #36474F;

  /* ---------- SUPPORTING NEUTRALS (muted earth / stone) ----------
     Derived to sit in harmony with paper & ink — NOT brand swatches.
     Use for quiet fills, dividers, captions, secondary surfaces. */
  --cd-stone-100:    #DEDBCE;
  --cd-stone-200:    #CCC8B9;
  --cd-stone-300:    #B3AE9D;
  --cd-taupe-400:    #9A9384;
  --cd-taupe-500:    #7E776A; /* muted mid text on paper                  */
  --cd-clay-600:     #8A7864; /* warm earth accent                        */
  --cd-moss-700:     #4C5247; /* muted deep moss — rare organic accent    */

  /* Hairlines */
  --cd-line:         rgba(29,27,26,0.14);  /* on paper  */
  --cd-line-strong:  rgba(29,27,26,0.28);
  --cd-line-on-ink:  rgba(237,236,226,0.16);

  /* ---------- SEMANTIC (light context — the default) ---------- */
  --bg:        var(--cd-paper);
  --surface:   var(--cd-paper-dim);
  --fg:        var(--cd-ink);
  --fg-muted:  var(--cd-taupe-500);
  --fg-faint:  var(--cd-stone-300);
  --line:      var(--cd-line);
  --accent:    var(--cd-ink);   /* the brand is restrained — ink IS the accent */

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- TYPE SCALE (fluid, editorial) ---------- */
  --t-display:  clamp(3.25rem, 1.6rem + 6.4vw, 7rem) /* @kind other */;  /* hero statements */
  --t-h1:       clamp(2.4rem, 1.5rem + 3.6vw, 4.25rem) /* @kind other */;
  --t-h2:       clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem) /* @kind other */;
  --t-h3:       clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem) /* @kind other */;
  --t-lead:     clamp(1.18rem, 1.02rem + 0.6vw, 1.5rem) /* @kind other */; /* intro paragraph */
  --t-body:     1.0625rem;
  --t-small:    0.875rem;
  --t-label:    0.75rem;   /* letterspaced caps */

  /* ---------- RHYTHM ---------- */
  --lh-tight:   1.04 /* @kind other */;
  --lh-snug:    1.18 /* @kind other */;
  --lh-body:    1.62 /* @kind other */;
  --tracking-label: 0.18em;
  --tracking-caps:  0.08em;

  /* ---------- SPACE (8pt base, generous) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;

  /* ---------- RADII (minimal — near-square) ---------- */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;

  /* ---------- ELEVATION (whisper-soft, warm) ---------- */
  --shadow-sm: 0 1px 2px rgba(29,27,26,0.05);
  --shadow-md: 0 8px 30px -12px rgba(29,27,26,0.18);
  --shadow-lg: 0 30px 80px -28px rgba(29,27,26,0.34);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1) /* @kind other */;
  --dur:  420ms /* @kind other */;
}

/* ---------- DARK CONTEXT ----------
   Apply .on-ink to any container to flip into the night side. */
.on-ink {
  --bg:       var(--cd-ink);
  --surface:  var(--cd-ink-raise);
  --fg:       var(--cd-paper-on-ink);
  --fg-muted: var(--cd-paper-faint);
  --fg-faint: rgba(237,236,226,0.45);
  --line:     var(--cd-line-on-ink);
  --accent:   var(--cd-paper-on-ink);
  background: var(--bg);
  color: var(--fg);
}

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

/* ---- Display & headings: the serif carries the voice ----
   (Licensed Cardea overrides live in fonts/cardea.css, injected at runtime by
   fonts/cardea-loader.js on the licensed domain only — never referenced here.) */
.cd-display {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  font-weight: 400;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1, .cd-h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2, .cd-h2 {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  font-weight: 400;
  letter-spacing: -0.006em;
  text-wrap: balance;
}
h3, .cd-h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  font-weight: 400;
}

/* Optical italic for emphasis inside running serif text */
.cd-em { font-style: italic; }

/* ---- Lead / intro paragraph ---- */
.cd-lead {
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  line-height: 1.5;
  font-weight: 400;
  color: var(--fg);
  max-width: 46ch;
  text-wrap: pretty;
}

/* ---- Body ---- */
p, .cd-body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  max-width: 64ch;
  text-wrap: pretty;
}

/* ---- Label / microcopy: letterspaced caps sans ---- */
.cd-label {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1.3;
}
.cd-small { font-size: var(--t-small); color: var(--fg-muted); }

/* ---- Links: quiet, underline on intent ---- */
a { color: inherit; text-decoration: none; }
.cd-link {
  border-bottom: 1px solid var(--line-strong, var(--cd-line-strong));
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.cd-link:hover { opacity: 0.6; }

/* ---- Hairline rule ---- */
.cd-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ============================================================
   THE ORB — core motif.  A soft sphere that inverts between
   the day side (dark orb on paper = CONNECT / lock in) and the
   night side (glowing orb on ink = DISCONNECT / zoom out).
   Pure CSS — no image needed.
   ============================================================ */
.cd-orb {
  aspect-ratio: 1; border-radius: 50%;
  /* CONNECT — a dense dark body resting on light */
  background: radial-gradient(circle at 50% 42%,
    #4a4844 0%, #2a2825 36%, var(--cd-ink) 72%, var(--cd-ink) 100%);
  box-shadow: 0 40px 90px -40px rgba(29,27,26,0.55);
}
.cd-orb--glow {
  /* DISCONNECT — a luminous body emerging from the dark */
  background: radial-gradient(circle at 50% 50%,
    #f4f2ea 0%, #e9e7dd 24%, rgba(150,148,138,0.5) 48%,
    rgba(40,38,35,0.2) 66%, transparent 74%);
  box-shadow: none;
}