/* ============================================================
   Aligned — Brand Works & Brand Hub · Design System v1
   colors_and_type.css
   ------------------------------------------------------------
   Source of truth for colour tokens, type scale, font stacks.
   Focus: the Brand Works & Brand Hub product family — the
   landing page, social cards and LinkedIn carousels.
   Authority: uploads/aligned-design-system.html
   ------------------------------------------------------------
   Voice summary:
   · Satoshi 700/900 for headings and caps labels
   · Inter 400 for body — body copy never goes bold
   · JetBrains Mono for machine strings ONLY (the mono rule)
   · Light-first. Blue Glow = brand + action. Bold Green =
     resolved / locked / fixed. Nothing else carries meaning.
   · Square corners, hairline rules, no shadows.
   ============================================================ */

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

/* Satoshi — self-hosted (from Fontshare) */
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Light.woff2') format('woff2');font-weight:300;font-display:swap;font-style:normal;}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal;}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal;}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal;}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Black.woff2') format('woff2');font-weight:900;font-display:swap;font-style:normal;}

/* --- Lemon (RESERVED — "Lemon Drop" event voice) ---------------
   Lemon stays licensed and loadable but is NOT part of the
   Brand Works / Brand Hub system. It pairs with Orange for
   loud, special-event work only. Do not use for product-family
   headlines, labels or body. */
@font-face { font-family: 'Lemon'; font-style: normal; font-weight: 400;
  src: url('fonts/Lemon-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Lemon'; font-style: normal; font-weight: 700;
  src: url('fonts/Lemon-Bold.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Lemon'; font-style: normal; font-weight: 900;
  src: url('fonts/Lemon-Black.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Lemon Wide'; font-style: normal; font-weight: 700;
  src: url('fonts/Lemon-BoldWide.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Lemon Wide'; font-style: normal; font-weight: 900;
  src: url('fonts/Lemon-BlackWide.otf') format('opentype'); font-display: swap; }

:root {
  /* === BRAND COLOURS === */
  /* Working pair — the only two that carry meaning */
  --aligned-blue-glow:  #4824F5;  /* brand + action: buttons, links, slash marker, figures */
  --aligned-bold-green: #6AFF7E;  /* resolved, locked, fixed, "after" states, editable zones */

  /* Core neutrals */
  --ink:     #121215;  /* all body and heading text, dark grounds */
  --paper:   #FAFAF8;  /* default ground — the system is light-first */
  --paper-2: #F1F1EE;  /* alternating grounds, inset panels */
  --slate:   #63636E;  /* secondary text, labels, captions, unmanaged states */

  /* Reserved — present in the palette, unused by this system */
  --aligned-deep-blue: #250E65;  /* gradient mid-stop ONLY, never a flat fill */
  --aligned-pale-blue: #8870F7;  /* reserved — candidate second CTA variant */
  --aligned-mint:      #C3FFCB;  /* reserved — softer green alt */
  --aligned-clover:    #4EAA6A;  /* reserved */
  --aligned-snowflake: #EFEFF0;  /* HEX UNCONFIRMED — source doc lists Blue Glow's hex in error */
  --aligned-orange:    #F56C10;  /* Lemon Drop / loud events only — stays out of this system */

  /* === GRADIENTS === */
  --gradient-glow: linear-gradient(158deg, var(--aligned-blue-glow) 0%, var(--aligned-deep-blue) 58%, #000 100%); /* the one dark moment — once per artefact */
  --gradient-bold: linear-gradient(158deg, var(--aligned-bold-green) 0%, #1B5F2A 58%, #000 100%); /* reserved — competes with Glow's signal */

  /* === RULES / BORDERS === */
  --rule:        rgba(18,18,21,.13);    /* 1px hairline on light */
  --rule-light:  rgba(250,250,248,.22); /* 1px hairline on dark */
  --border:      var(--rule);
  --border-strong: var(--ink);          /* 2px asserting containers */
  --border-signal: var(--aligned-blue-glow); /* 3–5px signalling rules */

  /* === SEMANTIC COLOUR TOKENS === */
  --bg:          var(--paper);
  --bg-alt:      var(--paper-2);
  --bg-dark:     var(--ink);
  --fg-1:        var(--ink);
  --fg-2:        var(--slate);
  --fg-on-dark-1: var(--paper);
  --fg-on-dark-2: rgba(250,250,248,.72);
  --accent:      var(--aligned-blue-glow);  /* brand + action */
  --accent-on:   #FFFFFF;
  --resolved:    var(--aligned-bold-green); /* locked / fixed / after */
  --resolved-on: var(--ink);

  /* === TYPE === */
  /* Display + labels — Satoshi. Contrast comes from weight,
     case and tracking, not a second family. */
  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif; /* headings 700, emphasis 900 */
  --font-label:   'Satoshi', 'Inter', system-ui, sans-serif; /* caps labels 700 */
  /* Body — Inter 400. Body copy never goes bold; emphasis in
     body is a colour or a label, not a weight. */
  --font-sans:    'Inter', system-ui, sans-serif;
  /* System voice — machine strings only (file names, paths,
     statuses, specs). Never prose. */
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  /* Reserved event voice — not part of this system */
  --font-event:   'Lemon', 'Helvetica Neue', Arial, sans-serif;
  --font-wide:    'Lemon Wide', 'Lemon', 'Helvetica Neue', Arial, sans-serif;

  /* Tracking */
  --track-heading: -0.03em; /* headings, −30 */
  --track-label:    0.17em; /* caps labels, +170 */
  --th: var(--track-heading);
  --tl: var(--track-label);

  /* Mono sizes — two only */
  --mono-lg:   .8rem;   /* primary strings, mixed case, 400, tracking 0 */
  --mono-sm:   .66rem;  /* meta / paths / chips — UPPERCASE, 700, +0.07em */
  --mono-caps: .07em;

  /* Type scale */
  --fs-hero:    clamp(2.6rem, 6vw, 4.6rem);   /* @kind font */
  --fs-display: clamp(1.9rem, 3.4vw, 2.8rem); /* @kind font */
  --fs-h1:      clamp(1.9rem, 3.4vw, 2.8rem); /* @kind font */
  --fs-h2:      clamp(1.5rem, 2.4vw, 2rem);   /* @kind font */
  --fs-h3:      1.35rem;
  --fs-h4:      1rem;
  --fs-body:    16px;
  --fs-lede:    1.15rem;
  --fs-sm:      .92rem;
  --fs-xs:      .78rem;
  --fs-label:   .66rem;  /* eyebrows, buttons, caps labels */

  --lh-tight:   1;     /* @kind font */
  --lh-snug:    1.12;  /* @kind font */
  --lh-normal:  1.45;  /* @kind font */
  --lh-loose:   1.6;   /* @kind font */

  --measure-body: 52ch;

  /* Spacing — 4px base */
  --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: 128px;

  /* Radii — nothing is rounded and nothing floats. Mild radii
     exist only for client product-UI contexts, never marketing. */
  --radius-none: 0;
  --radius-ui:   8px;  /* product-UI exception only */

  /* === LEGACY ALIASES ===
     Kept so pre-focus cards/kits keep rendering. Do not use in
     new Brand Works / Brand Hub work. */
  --ink-1000: var(--ink);
  --ink-900: #1B1B1F;
  --ink-800: #26262B;
  --ink-700: #3C3C44;
  --ink-500: var(--slate);
  --ink-400: #989DA8;
  --ink-300: #C5C9D1;
  --ink-200: #E3E5EA;
  --ink-100: var(--paper-2);
  --paper-warm: var(--paper-2);
  --bg-elevated: var(--ink-900);
  --bg-inverse: var(--paper);
  --bg-subtle: var(--paper-2);
  --fg-3: var(--slate);
  --fg-on-light-1: var(--ink);
  --fg-on-light-2: var(--ink-700);
  --fg-on-light-3: var(--slate);
  --accent-alt: var(--aligned-blue-glow);
  --accent-warm: var(--aligned-orange);
  --font-serif: var(--font-sans);
  --fs-micro: 11px;
  --gradient-pale: linear-gradient(135deg, var(--aligned-pale-blue) 0%, var(--aligned-blue-glow) 100%);
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --elev-1: 0 1px 2px rgba(18,18,21,0.06), 0 1px 1px rgba(18,18,21,0.04);
  --elev-2: 0 4px 12px rgba(18,18,21,0.08), 0 2px 4px rgba(18,18,21,0.04);
  --elev-3: 0 14px 40px rgba(18,18,21,0.12), 0 4px 12px rgba(18,18,21,0.06);
  --glow-green: 0 0 0 1px rgba(106,255,126,0.30), 0 12px 40px rgba(106,255,126,0.18);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);     /* @kind other */
  --ease-in-out: cubic-bezier(.65,0,.35,1); /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur-base: 240ms;  /* @kind other */
  --dur-slow: 480ms;  /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE — apply directly when authoring artefacts
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — Satoshi 700, SENTENCE CASE, tight. Emphasis inside
   a heading is 900 on one or two words max. Headings must be
   genuinely large or the single-family hierarchy flattens. */
.aligned-display, .aligned-h0 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-heading);
}
.aligned-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-heading);
}
.aligned-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-heading);
}
.aligned-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: var(--track-heading); }
.aligned-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: var(--track-heading); }
.aligned-display b, .aligned-h1 b, .aligned-h2 b,
.aligned-display strong, .aligned-h1 strong, .aligned-h2 strong { font-weight: 900; }

/* Figures — prices, counts, stats. Satoshi 900. */
.aligned-figure {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--track-heading);
  line-height: .9;
}

.aligned-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  max-width: var(--measure-body);
}
.aligned-body b, .aligned-body strong { font-weight: 400; } /* body never goes bold */
.aligned-lede { font-family: var(--font-sans); font-size: var(--fs-lede); color: var(--fg-2); max-width: var(--measure-body); }
.aligned-small { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-2); }

/* Eyebrow / caps label — Satoshi 700 UPPERCASE, +170 tracking.
   Lead with the blue slash marker: <span class="aligned-eyebrow">
   <i>/</i> The problem</span> */
.aligned-eyebrow, .aligned-label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-2);
}
.aligned-eyebrow i { font-style: normal; color: var(--accent); }

/* Mono — the system voice. Two sizes only; nothing else. */
.aligned-mono-lg, .aligned-mono {
  font-family: var(--font-mono);
  font-size: var(--mono-lg);
  font-weight: 400;
  letter-spacing: 0;
}
.aligned-mono-sm {
  font-family: var(--font-mono);
  font-size: var(--mono-sm);
  font-weight: 700;
  letter-spacing: var(--mono-caps);
  text-transform: uppercase;
}
code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--mono-lg); letter-spacing: 0; }

/* Button — square corners, caps label */
.aligned-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-label); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-label);
  text-decoration: none; padding: .95rem 1.4rem;
  border: 1px solid currentColor; border-radius: 0;
}
.aligned-btn-primary { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.aligned-btn-line    { color: var(--fg-1); border-color: var(--fg-1); background: transparent; }
.aligned-btn-onblue  { background: var(--resolved); color: var(--resolved-on); border-color: var(--resolved); }
.aligned-btn-ghost   { color: #fff; border-color: var(--rule-light); background: transparent; }

a { color: var(--accent); }
a:hover { color: var(--aligned-deep-blue); }