/* ============================================================
   SPECTRAL CONSULTING — "Dusk"
   Foundational tokens: color, type, spacing, radius, elevation
   ------------------------------------------------------------
   Fonts: Sora self-hosted (brand files in /fonts); Hanken Grotesk and
   JetBrains Mono delivered from the Google Fonts CDN.
   Sora           → geometric-sans display (800 hero / 700 headers)
   Hanken Grotesk → UI / body copy
   JetBrains Mono → uppercase labels, kickers, data tags
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Archivo:wdth,wght@125,400;125,800;125,900&display=swap');

/* ---------- Sora — self-hosted brand font (variable, 100–800) ---------- */
@font-face {
  font-family: 'Sora';
  src: url('fonts/Sora-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Warm graphite backgrounds (dark → raised) */
  --ink-900: #100B09;   /* deepest — page base */
  --ink-850: #14100E;   /* canonical background */
  --ink-800: #1A1411;   /* raised surface */
  --ink-700: #221A15;   /* graphite / card */
  --ink-600: #2C231C;   /* elevated card / hover */
  --ink-500: #3A2E25;   /* hairline-on-dark / divider tint */

  /* Warm neutrals / text */
  --cream:     #F3EBE2; /* primary text on dark */
  --cream-dim: #D9CFC4; /* secondary text */
  --taupe:     #AB9F93; /* muted labels, captions */
  --taupe-dim: #6E6157; /* faint meta, disabled */

  /* ---------- ACCENT — the Dusk gradient ---------- */
  --amber:  #FCB168;    /* gradient start  */
  --ember:  #FD8C59;    /* gradient middle */
  --coral:  #FD6156;    /* gradient end    */
  --amber-deep: #E8954E;
  --coral-deep: #E84A47;

  /* ---------- SIGNAL — the logo mark's own gradient ----------
     Brighter amber-gold than the UI Dusk gradient. This is a LOCKED
     logo asset value — recolor the mark only via the one-color masters
     (mark-cream / mark-ink / mark-amber), never by editing these stops. */
  --signal-1: #FFD8A8;  /* core glow / top */
  --signal-2: #FFB347;  /* mid */
  --signal-3: #FF8A3D;  /* outer / bottom */
  --grad-signal: linear-gradient(180deg, var(--signal-1) 0%, var(--signal-2) 48%, var(--signal-3) 100%);
  --signal-core: #FFE6C4; /* the warm center dot */

  /* The signature accent gradient */
  --grad-dusk: linear-gradient(100deg, var(--amber) 0%, var(--ember) 48%, var(--coral) 100%);
  --grad-dusk-h: linear-gradient(90deg, var(--amber) 0%, var(--ember) 50%, var(--coral) 100%);
  /* A subtle warm-glow radial used behind hero content & panels */
  --glow-dusk: radial-gradient(60% 80% at 78% 30%, rgba(253,140,89,0.28) 0%, rgba(253,97,86,0.10) 38%, rgba(16,11,9,0) 72%);

  /* Glassy panel fill + border (over dark) */
  --glass-fill: rgba(247, 236, 226, 0.045);
  --glass-fill-strong: rgba(247, 236, 226, 0.07);
  --glass-border: rgba(247, 236, 226, 0.12);
  --glass-border-soft: rgba(247, 236, 226, 0.07);

  /* Semantic single-accent (for fills, focus, links) */
  --accent: var(--ember);
  --accent-quiet: rgba(253,140,89,0.14);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Logo wordmark ONLY — the locked Archivo Expanded lockup type.
     Never use for UI/headings; that's --font-display (Sora). */
  --font-wordmark: 'Archivo', 'Arial Narrow', sans-serif;

  /* ---------- TYPE SCALE (fluid-ish, px) ---------- */
  --t-display: 72px;   /* hero headline */
  --t-h1: 52px;
  --t-h2: 38px;
  --t-h3: 27px;
  --t-h4: 21px;
  --t-body-lg: 19px;
  --t-body: 17px;
  --t-small: 15px;
  --t-caption: 13px;
  --t-eyebrow: 13px;   /* tracked-out uppercase label */

  /* ---------- SPACING (8pt-ish) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- RADIUS ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;     /* glass panels */
  --r-xl: 26px;     /* large cards / hero panel */
  --r-pill: 999px;

  /* ---------- ELEVATION / SHADOW ---------- */
  /* Dark UI uses deep ambient shadow + a faint top inner highlight on glass */
  --sh-card: 0 1px 0 0 rgba(247,236,226,0.04) inset, 0 18px 40px -24px rgba(0,0,0,0.8);
  --sh-panel: 0 1px 0 0 rgba(247,236,226,0.06) inset, 0 30px 80px -40px rgba(0,0,0,0.9);
  --sh-glow: 0 0 0 1px var(--glass-border-soft), 0 8px 40px -8px rgba(253,120,80,0.22);
  --sh-pop: 0 24px 60px -20px rgba(0,0,0,0.7);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply .ds-* helper classes, or copy these rules.
   ============================================================ */

.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}

.ds-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--cream);
}

h1, .ds-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--cream);
}

h2, .ds-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cream);
}

h3, .ds-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--cream);
}

h4, .ds-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cream);
}

p, .ds-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--cream-dim);
}

.ds-body-lg {
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--cream-dim);
}

.ds-small { font-size: var(--t-small); line-height: 1.5; color: var(--taupe); }
.ds-caption { font-size: var(--t-caption); line-height: 1.45; color: var(--taupe-dim); }

.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.02em;
  color: var(--taupe);
}

/* The signature gradient text treatment */
.ds-gradient-text {
  background: var(--grad-dusk-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Gradient hairline / underline accent */
.ds-rule {
  height: 2px;
  border: 0;
  background: var(--grad-dusk-h);
  border-radius: 2px;
}

/* ============================================================
   LOGO — the "ping" mark + Spectral lockups
   ------------------------------------------------------------
   Mark master: assets/logo/mark.svg (gradient) and the one-color
   variants mark-cream / mark-ink / mark-amber. Drop the lockup with:

     <a class="ds-logo" href="#">
       <img class="ds-logo__mark" src="assets/logo/mark.svg" alt="">
       <span class="ds-logo__rule"></span>
       <span class="ds-logo__word">
         <span class="ds-logo__name">Spectral</span>
         <span class="ds-logo__sub">Consulting</span>
       </span>
     </a>

   Use .ds-logo--stacked for the vertical lockup, .ds-logo--light on
   light backgrounds. Size the whole lockup by overriding --logo-mark.
   ============================================================ */
.ds-logo {
  --logo-mark: 46px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-mark) * 0.34);
  text-decoration: none;
  line-height: 1;
}
.ds-logo__mark {
  width: var(--logo-mark);
  height: var(--logo-mark);
  flex: none;
  display: block;
}
.ds-logo__rule {
  width: 1px;
  align-self: stretch;
  min-height: var(--logo-mark);
  background: var(--glass-border);
  flex: none;
}
.ds-logo__word { display: flex; flex-direction: column; gap: calc(var(--logo-mark) * 0.11); }
.ds-logo__name {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  font-size: calc(var(--logo-mark) * 0.66);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--cream);
}
.ds-logo__sub {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--logo-mark) * 0.205);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--taupe);
}
/* Stacked lockup — mark centered over centered word, no divider */
.ds-logo--stacked { flex-direction: column; gap: calc(var(--logo-mark) * 0.28); }
.ds-logo--stacked .ds-logo__rule { display: none; }
.ds-logo--stacked .ds-logo__word { align-items: center; text-align: center; }
/* Light-background variant — ink wordmark; pair with mark-ink.svg */
.ds-logo--light .ds-logo__name { color: var(--ink-900); }
.ds-logo--light .ds-logo__sub { color: var(--taupe-dim); }
.ds-logo--light .ds-logo__rule { background: rgba(20,15,10,0.18); }

/* The app/avatar tile — mark on a rounded dark square */
.ds-logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 22%;
  background: var(--ink-900);
  box-shadow: var(--sh-card);
}
.ds-logo-tile img { width: 72%; height: 72%; display: block; }