/* ============================================================
   ALIGNED — Colors & Typography
   Source of truth for the Aligned brand foundations.
   Updated to the six-color earthy palette (linen / ink / stone /
   olive / ember / honey). See README.md for naming and intent.
   ============================================================ */

/* ---- Webfonts -------------------------------------------------
   Hero / display:  Elms Sans   (licensed variable font, served
                    locally from fonts/)
   Body / mono:     system font stacks to avoid render-blocking
                    third-party font CSS.
   ------------------------------------------------------------- */

/* Elms Sans — licensed variable font, local */
@font-face {
  font-family: "Elms Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/ElmsSans-VariableFont_wght.woff2") format("woff2");
}
@font-face {
  font-family: "Elms Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/ElmsSans-Italic-VariableFont_wght.woff2") format("woff2");
}

:root {
  /* =====================================================
     CORE PALETTE — six role-based brand colors
     Names chosen for spiritual / material warmth and to
     map onto the brand's root → path → fruit grammar.
     ===================================================== */

  --aligned-linen:      #FFFBF4;  /* warm cream — page background, body text on dark */
  --aligned-ink:        #273043;  /* deep blue-black — primary surface, headlines on linen */
  --aligned-stone:      #9197AE;  /* cool slate — captions, dividers, supporting UI */
  --aligned-olive:      #393A10;  /* deep olive-earth — alt dark surface, quotes, branch motifs */
  --aligned-ember:      #C84630;  /* terra-cotta — CTAs, conviction beats, hover lift */
  --aligned-honey:      #EAB464;  /* warm amber — tag accents, callouts, founders pricing, oil/light */

  /* ---- Backward-compatible aliases (do not retire — landing
     page and skill consumers reference these names directly) */
  --aligned-primary:    var(--aligned-ink);
  --aligned-accent:     var(--aligned-stone);
  --aligned-background: var(--aligned-linen);
  --aligned-emphasis:   var(--aligned-ember);
  --aligned-accent2:    #DD5C42;  /* brightened ember for hover (lifted, not punchier) */

  /* ---- Derived tints / shades for surfaces and states ---- */
  --aligned-ink-90:     #3a4256;  /* lighter ink for headings on subtle bg, hero gradient stop */
  --aligned-ink-75:     #545b6c;
  --aligned-ink-soft:   #5a6075;  /* body text on linen, softer than ink */
  --aligned-ink-deep:   #1c2334;  /* deeper ink for hero gradient floor, footer */

  --aligned-bg-warm:    #FBF5E4;  /* card on linen — barely cooler */
  --aligned-bg-cream:   #F4ECCC;  /* divider/section inset */
  --aligned-linen-soft: rgba(255, 251, 244, 0.72);  /* body on dark */

  --aligned-olive-90:   #4a4b1d;  /* hover for olive surfaces */
  --aligned-olive-soft: rgba(57, 58, 16, 0.78);

  --aligned-ember-90:   #B83A26;  /* press-down ember */
  --aligned-honey-90:   #D8A14E;  /* press-down honey */
  --aligned-honey-soft: #F3CE91;  /* honey tint, soft callout bg */

  /* =====================================================
     SEMANTIC COLOR ROLES — prefer these in product code
     ===================================================== */
  --fg-1:          var(--aligned-ink);          /* headlines */
  --fg-2:          var(--aligned-ink-soft);     /* body */
  --fg-3:          var(--aligned-stone);        /* meta, dividers, captions */
  --fg-on-dark:    var(--aligned-linen);        /* body text on dark surface */
  --fg-on-dark-2:  var(--aligned-linen-soft);

  --bg-1:          var(--aligned-linen);        /* page background */
  --bg-2:          var(--aligned-bg-warm);      /* cards, raised surfaces */
  --bg-3:          var(--aligned-bg-cream);     /* subtle inset, divider band */
  --bg-dark:       var(--aligned-ink);          /* dark hero / footer */
  --bg-dark-alt:   var(--aligned-olive);        /* alt dark surface — branch / quote / earthy section */

  --border-1:      rgba(39, 48, 67, 0.12);      /* hairlines on linen */
  --border-2:      rgba(39, 48, 67, 0.20);
  --border-on-dark:rgba(255, 251, 244, 0.16);
  --border-on-olive:rgba(255, 251, 244, 0.18);

  --accent-cta:        var(--aligned-ember);
  --accent-cta-hover:  var(--aligned-accent2);
  --accent-cta-press:  var(--aligned-ember-90);
  --accent-tag:        var(--aligned-honey);    /* warm tag / badge — founders pricing, blessing beats */
  --accent-tag-soft:   var(--aligned-honey-soft);

  /* =====================================================
     TYPOGRAPHY — families
     ===================================================== */
  --font-hero:  "Elms Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Type scale (1.250 — major third, slightly compressed) */
  --t-display:  clamp(3.5rem, 6vw + 1rem, 6.5rem);   /* @kind spacing */
  --t-h1:       clamp(2.5rem, 3.2vw + 1rem, 4rem);   /* @kind spacing */
  --t-h2:       clamp(2rem, 2vw + 1rem, 2.75rem);    /* @kind spacing */
  --t-h3:       1.625rem;
  --t-h4:       1.25rem;
  --t-lead:     1.25rem;   /* hero sub, section lead */
  --t-body:     1.0625rem; /* 17px base for serif body */
  --t-small:    0.9375rem;
  --t-micro:    0.75rem;   /* mono micro-labels */

  --lh-tight:   1.04;   /* @kind font */
  --lh-snug:    1.18;   /* @kind font */
  --lh-body:    1.55;   /* @kind font */
  --lh-loose:   1.7;    /* @kind font */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-micro:  0.14em;  /* mono micro-labels are spaced */

  /* =====================================================
     SPACING / SHAPE / SHADOW (low-level)
     ===================================================== */
  --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;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;   /* cards */
  --radius-xl:  24px;   /* hero panels */
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(39,48,67,0.04), 0 1px 1px rgba(39,48,67,0.03);
  --shadow-2: 0 6px 18px -8px rgba(39,48,67,0.12), 0 2px 6px rgba(39,48,67,0.04);
  --shadow-emphasis: 0 8px 24px -10px rgba(200, 70, 48, 0.38);   /* ember-tinted CTA glow */
  --shadow-honey:    0 8px 24px -10px rgba(234, 180, 100, 0.38); /* honey-tinted accent glow */

  --max-w-prose: 62ch;
  --max-w-page:  1180px;
}

/* =====================================================
   BASE ELEMENT STYLES — defaults so plain HTML inherits brand
   ===================================================== */

html {
  background: var(--bg-1);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-2);
}

h1, h2, h3, h4, .display {
  font-family: var(--font-hero);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 0.5em;
}

.display { font-size: var(--t-display); font-weight: 500; line-height: var(--lh-tight); }
h1       { font-size: var(--t-h1); font-weight: 500; }
h2       { font-size: var(--t-h2); font-weight: 500; line-height: var(--lh-snug); }
h3       { font-size: var(--t-h3); font-weight: 600; line-height: var(--lh-snug); }
h4       { font-size: var(--t-h4); font-weight: 600; line-height: var(--lh-snug); }

p, .body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0 0 1em;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.eyebrow, .micro {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-2);
  transition: text-decoration-color 160ms ease, color 160ms ease;
}
a:hover { text-decoration-color: var(--accent-cta); color: var(--accent-cta); }

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-7) 0;
}

::selection { background: var(--aligned-ember); color: var(--aligned-linen); }