/* humi · colors_and_type.css
   Tokens for colors + typography. Import once at the top of any page.
   Font substitutes via Google Fonts — see README.md "Font substitutions". */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand colors (given) ---------- */
  --humi-petrol-900: #0F2A30;
  --humi-petrol-800: #1E3F47;  /* primary brand */
  --humi-petrol-700: #2C5862;
  --humi-petrol-400: #7BA9AE;
  --humi-cream:      #E8ECEA;

  /* ---------- Derived tonal scale ---------- */
  --humi-petrol-950: #081A1E;
  --humi-petrol-600: #3E6B75;
  --humi-petrol-500: #568089;
  --humi-petrol-300: #9FC3C6;
  --humi-petrol-200: #C3DADB;
  --humi-petrol-100: #DCE9E9;
  --humi-sand:       #F3EFE6;  /* warm cream — speech bubbles on teal */
  --humi-sand-dark:  #D9D1BF;

  /* Sparing accent — muted Nordeste terracotta, used for revenue-up / pos highlights */
  --humi-terracotta: #C67B5C;
  --humi-terracotta-soft: #E9C6B5;

  /* Cool teal-tinted neutrals */
  --humi-ink:        #0F2A30;
  --humi-ink-2:      #2B3F44;
  --humi-ink-3:      #4B5E63;
  --humi-ink-4:      #6C7E82;
  --humi-line:       rgba(30, 63, 71, 0.14);
  --humi-line-strong:rgba(30, 63, 71, 0.24);
  --humi-line-dark:  rgba(232, 236, 234, 0.14);

  /* ---------- Semantic surfaces ---------- */
  --surface-primary:    var(--humi-petrol-800);   /* hero / dark surfaces */
  --surface-deepest:    var(--humi-petrol-900);
  --surface-secondary:  var(--humi-petrol-700);
  --surface-paper:      var(--humi-cream);        /* default light surface */
  --surface-paper-warm: var(--humi-sand);
  --surface-card:       #FFFFFF;

  --fg-on-dark:         var(--humi-cream);
  --fg-on-dark-muted:   rgba(232, 236, 234, 0.72);
  --fg-on-dark-faint:   rgba(232, 236, 234, 0.48);
  --fg-on-light:        var(--humi-petrol-900);
  --fg-on-light-muted:  var(--humi-ink-3);
  --fg-on-light-faint:  var(--humi-ink-4);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--surface-paper), 0 0 0 4px var(--humi-petrol-400);

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-none:  none;
  --shadow-hover: 0 8px 24px -12px rgba(15, 42, 48, 0.18);
  --shadow-pop:   0 18px 48px -18px rgba(15, 42, 48, 0.28);

  /* ---------- 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;

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 0.6, 1);
  --dur-micro: 160ms;
  --dur-base:  240ms;
  --dur-large: 400ms;

  /* ---------- Type families ---------- */
  --humi-serif-display: 'DM Serif Display', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --humi-sans:          'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --humi-mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-88: 88px;
  --fs-128: 128px;

  /* Semantic type tokens */
  --t-display-xl-size: clamp(72px, 10vw, 160px);
  --t-display-xl-lh:   0.95;
  --t-display-xl-ls:   -0.03em;

  --t-display-size:    clamp(48px, 6vw, 88px);
  --t-display-lh:      1.00;
  --t-display-ls:      -0.02em;

  --t-h1-size:         clamp(36px, 4vw, 56px);
  --t-h1-lh:           1.05;
  --t-h1-ls:           -0.02em;

  --t-h2-size:         32px;
  --t-h2-lh:           1.15;
  --t-h2-ls:           -0.015em;

  --t-h3-size:         22px;
  --t-h3-lh:           1.25;
  --t-h3-ls:           -0.01em;

  --t-body-size:       16px;
  --t-body-lh:         1.55;

  --t-small-size:      14px;
  --t-small-lh:        1.5;

  --t-micro-size:      12px;
  --t-micro-lh:        1.4;
  --t-micro-ls:        0.04em;
}

/* ---------- Semantic element styles ---------- */

.humi-body, body.humi {
  font-family: var(--humi-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-on-light);
  background: var(--surface-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.humi-display-xl {
  font-family: var(--humi-serif-display);
  font-weight: 400;
  font-size: var(--t-display-xl-size);
  line-height: var(--t-display-xl-lh);
  letter-spacing: var(--t-display-xl-ls);
  text-transform: lowercase;
}

.humi-display {
  font-family: var(--humi-serif-display);
  font-weight: 400;
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-ls);
  text-transform: lowercase;
}

.humi-h1 {
  font-family: var(--humi-serif-display);
  font-weight: 400;
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-ls);
  text-transform: lowercase;
}

.humi-h2 {
  font-family: var(--humi-sans);
  font-weight: 600;
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-ls);
}

.humi-h3 {
  font-family: var(--humi-sans);
  font-weight: 600;
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-ls);
}

.humi-lede {
  font-family: var(--humi-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-on-light-muted);
}

.humi-p {
  font-family: var(--humi-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
}

.humi-small {
  font-family: var(--humi-sans);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--fg-on-light-muted);
}

.humi-micro {
  font-family: var(--humi-sans);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  letter-spacing: var(--t-micro-ls);
  text-transform: uppercase;
  color: var(--fg-on-light-faint);
  font-weight: 600;
}

.humi-mono, .humi-num {
  font-family: var(--humi-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.humi-em {
  font-family: var(--humi-serif-display);
  font-style: italic;
  font-weight: 400;
}

/* Meta separator — the middle dot */
.humi-meta-sep::before { content: ' · '; color: currentColor; opacity: 0.5; }

/* Poster / speech-bubble display — short ALL CAPS allowed here only */
.humi-poster {
  font-family: var(--humi-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}