/* =========================================================
   Dry Powder — Foundations
   colors_and_type.css
   Single source of truth for color + typography tokens.
   ========================================================= */

/* ---------- Fonts ----------------------------------------
   Archivo Black  — display & wordmark match. Heavy grotesk, all-caps usage.
   Geist          — body & UI grotesk. Crisp, generous x-height.
   JetBrains Mono — tabular numerics, code, ticker readouts.
   ⚠ Brand probably wants a licensed display face long-term (Druk Wide or
     similar). Archivo Black is the closest free match to the existing
     wordmark. See README.
--------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Palette: Inks ------------------------------ */
  --ink-1000: #0B0B0A;
  --ink-900:  #141413;
  --ink-800:  #1F1E1C;
  --ink-700:  #2A2826;
  --ink-600:  #45413C;
  --ink-500:  #6A6459;
  --ink-400:  #8E887B;
  --ink-300:  #B5AE9D;
  --ink-200:  #D6D0BF;
  --ink-100:  #E8E2D2;
  --ink-50:   #F0EBDD;
  --ink-0:    #F6F2E7;

  /* ---------- Palette: Powder (the brand red-orange) ------ */
  /* Anchored on #FF3301 from the existing wordmark. */
  --powder-900: #8A1C00;
  --powder-700: #C92500;
  --powder-600: #E62D00;
  --powder-500: #FF3301;   /* PRIMARY — wordmark, mark, CTA */
  --powder-400: #FF6B41;
  --powder-300: #FF9576;
  --powder-200: #FFC2AF;
  --powder-100: #FFDCCD;
  --powder-50:  #FFEDE4;

  /* ---------- Palette: Vault (positive money, dashboards) - */
  --vault-700:  #145138;
  --vault-600:  #1A6745;
  --vault-500:  #1F6E4A;
  --vault-100:  #C9E0D2;
  --vault-50:   #E2EEDE;

  /* ---------- Palette: Loss (negative money) -------------- */
  --loss-700:   #7B2014;
  --loss-600:   #9A2A1B;
  --loss-500:   #B23A2B;
  --loss-100:   #EFC9C0;

  /* ---------- Semantic surface + text -------------------- */
  /* Pearl-base: barely-warm white. Takes the chill off pure #FFF without
     pushing into cream/paper territory. */
  --bg:           #FAF8F4;
  --bg-elevated:  #FFFFFF;
  --bg-sunk:      #F1EFE9;
  --bg-inverse:   var(--ink-1000);
  /* Re-point ink-50 (used as section alt-bg in Thesis/Process/Pricing/FAQ) */
  --ink-50:       #F1EFE9;
  --ink-0:        #FAF8F4;

  --fg:           var(--ink-1000);
  --fg-muted:     var(--ink-600);
  --fg-subtle:    var(--ink-500);
  --fg-faint:     var(--ink-400);
  --fg-inverse:   var(--ink-0);
  --fg-on-powder: var(--ink-0);

  --border:        rgba(11, 11, 10, 0.12);
  --border-strong: rgba(11, 11, 10, 0.32);
  --border-faint:  rgba(11, 11, 10, 0.06);

  --accent:         var(--powder-500);
  --accent-hover:   var(--powder-600);
  --accent-pressed: var(--powder-700);

  --positive: var(--vault-500);
  --negative: var(--loss-500);

  /* ---------- Type families ----------------------------- */
  --font-display: "Archivo Black", "Druk Wide", "Inter Display", Impact, sans-serif;
  --font-sans:    "Geist", "Söhne", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (rem; 1rem = 16px) ------------- */
  --fs-display-2xl: 5.5rem;   /* 88 */
  --fs-display-xl:  4.25rem;  /* 68 */
  --fs-display-l:   3.25rem;  /* 52 */
  --fs-display-m:   2.5rem;   /* 40 */
  --fs-h1:          2.0rem;   /* 32 */
  --fs-h2:          1.5rem;   /* 24 */
  --fs-h3:          1.25rem;  /* 20 */
  --fs-h4:          1.0625rem;/* 17 */
  --fs-body:        1.0rem;   /* 16 */
  --fs-small:       0.875rem; /* 14 */
  --fs-micro:       0.75rem;  /* 12 */
  --fs-overline:    0.6875rem;/* 11 */

  /* ---------- Line-heights ------------------------------ */
  --lh-tight:    0.92;   /* display all-caps — tight stack */
  --lh-snug:     1.05;
  --lh-normal:   1.5;
  --lh-relaxed:  1.6;

  /* ---------- Tracking ---------------------------------- */
  --tr-display:    -0.015em;
  --tr-tight:      -0.02em;
  --tr-snug:       -0.01em;
  --tr-normal:     0;
  --tr-loose:       0.04em;
  --tr-overline:    0.14em;

  /* ---------- Spacing scale (4px base) ------------------ */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* ---------- Radii ------------------------------------- */
  --r-0:    0px;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ---------- Shadows ---------------------------------- */
  --shadow-xs: 0 1px 0 rgba(11,11,10,0.04);
  --shadow-sm: 0 1px 2px rgba(11,11,10,0.06), 0 1px 0 rgba(11,11,10,0.04);
  --shadow-md: 0 6px 14px -8px rgba(11,11,10,0.18), 0 2px 4px -2px rgba(11,11,10,0.06);
  --shadow-lg: 0 18px 40px -18px rgba(11,11,10,0.28), 0 6px 12px -6px rgba(11,11,10,0.08);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---------- Motion ------------------------------------ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;

  /* ---------- Layout grid ------------------------------- */
  --container-max: 1280px;
  --container-pad: 32px;
  --rule: 1px;
}

/* =========================================================
   Semantic element styles
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* Display headings — heavy all-caps grotesk, like the wordmark. */
h1, h2, h3, .dp-display {
  font-family: var(--font-display);
  font-weight: 400;        /* Archivo Black is single-weight */
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  color: var(--fg);
  text-wrap: balance;
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

.dp-display-2xl { font-family: var(--font-display); font-size: var(--fs-display-2xl); line-height: var(--lh-tight); letter-spacing: -0.02em; text-transform: uppercase; }
.dp-display-xl  { font-family: var(--font-display); font-size: var(--fs-display-xl);  line-height: var(--lh-tight); letter-spacing: -0.018em; text-transform: uppercase; }
.dp-display-l   { font-family: var(--font-display); font-size: var(--fs-display-l);   line-height: var(--lh-tight); letter-spacing: -0.015em; text-transform: uppercase; }
.dp-display-m   { font-family: var(--font-display); font-size: var(--fs-display-m);   line-height: var(--lh-snug);  letter-spacing: -0.012em; text-transform: uppercase; }

p, .dp-body { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg); }
.dp-body-muted { color: var(--fg-muted); }
.dp-small { font-size: var(--fs-small); line-height: var(--lh-normal); }
.dp-micro { font-size: var(--fs-micro); line-height: var(--lh-normal); }

.dp-overline {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

.dp-num, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.dp-rule { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: text-decoration-color var(--dur-fast) var(--ease-out); }
a:hover { text-decoration-color: var(--powder-500); }

::selection { background: var(--powder-500); color: var(--ink-0); }