/* ============================================================
   Portant Design System · colors_and_type.css
   Source of truth: www.portant.co-main/tailwind.config.js
                    www.portant.co-main/css/input.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── Brand "paper" neutrals (warm) ───────────────────────── */
  --portant-white:           #ffffff;
  --portant-canvas:          #f6f5f4;  /* page bg */
  --portant-paper:           #F0EFED;  /* card surface */
  --portant-notebook:        #EBE8E4;  /* inset surface, pills */
  --portant-parchment:       #e2dad2;  /* borders, hairlines */
  --portant-dark-parchment:  #c4b9ae;
  --portant-charred:         #94908a;  /* muted text */
  --portant-toasted:         #777169;  /* body / secondary text */
  --portant-burnt:           #4b4844;
  --portant-ash:             #2a2826;  /* dark bands, CTA bg */
  --portant-ink-black:       #0c0c0c;  /* primary fg */

  /* ─── Brand accents ────────────────────────────────────────── */
  --portant-orange:          #ff4800;  /* primary accent */
  --portant-mid-orange:      #ff8550;
  --portant-light-orange:    #ffe4d8;
  --portant-yellow:          #ffaa00;
  --portant-red:             #e40a13;
  --portant-light-red:       #fee2e2;
  --portant-light-green:     #dcfce7;

  /* ─── Product blues (app UI) ───────────────────────────────── */
  --portant-lightblue:       #91e6fe;
  --portant-teal:            #40dffc;
  --portant-bright-blue:     #0280ff;
  --portant-blue:            #1875fb;  /* Portant product blue */
  --portant-bold-blue:       #0044f1;
  --portant-navy:            #022235;

  /* ─── Social-proof reference palette (testimonials) ────────── */
  --portant-ref-red:         #e63312;
  --portant-ref-red-deep:    #c2410c;
  --portant-ref-yellow-amber: #ffaa00;
  --portant-ref-yellow-highlight: #ffc940;
  --portant-ref-green:       #1b6b4a;

  /* ─── Semantic aliases ─────────────────────────────────────── */
  --fg:             var(--portant-ink-black);
  --fg-muted:       var(--portant-toasted);
  --fg-subtle:      var(--portant-charred);
  --fg-inverse:     var(--portant-white);
  --bg:             var(--portant-canvas);
  --bg-surface:     var(--portant-white);
  --bg-paper:       var(--portant-paper);
  --bg-inset:       var(--portant-notebook);
  --bg-dark:        var(--portant-ash);
  --border-hairline: var(--portant-parchment);
  --border-default: rgba(12, 12, 12, 0.10);
  --border-strong:  rgba(12, 12, 12, 0.20);
  --accent:         var(--portant-orange);
  --accent-soft:    var(--portant-light-orange);
  --link:           var(--portant-orange);

  /* ─── Typography ───────────────────────────────────────────── */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Scale: 12 → 14 → 16 → 20 → 24 → 36 → 48 → 64 → 80 */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.25rem;   /* 20 */
  --fs-lg:   1.5rem;    /* 24 */
  --fs-xl:   2.25rem;   /* 36 */
  --fs-2xl:  3rem;      /* 48 */
  --fs-3xl:  4rem;      /* 64 */
  --fs-4xl:  5rem;      /* 80 */

  /* ─── Radii ────────────────────────────────────────────────── */
  --radius-sm:    0.375rem;
  --radius-md:    0.5rem;   /* card */
  --radius-lg:    0.75rem;  /* buttons, nav links */
  --radius-xl:    1rem;
  --radius-2xl:   1.75rem;  /* card-lg */
  --radius-pill:  9999px;

  /* ─── Shadows ──────────────────────────────────────────────── */
  --shadow-xs:       0 1px 2px rgba(12, 12, 12, 0.04);
  --shadow-card:     0 18px 45px rgba(15, 23, 42, 0.08);
  --shadow-elevated: 0 24px 60px rgba(15, 23, 42, 0.14);
  --shadow-hover:    0 4px 6px -1px rgb(15 23 42 / 0.08),
                     0 12px 24px -4px rgb(15 23 42 / 0.10);
  --shadow-dropdown: 0 4px 6px -1px rgb(15 23 42 / 0.08),
                     0 12px 24px -4px rgb(15 23 42 / 0.12);

  /* ─── Spacing ──────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --max-site: 86rem; /* 1376px */

  /* ─── Motion ───────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.15s;
  --dur-med:  0.22s;
  --dur-slow: 0.3s;

  /* ─── Signature orange→yellow gradient (CTAs, banners) ─────── */
  --gradient-heat:
    linear-gradient(35deg, #E9CEA0 0%, #FFAA00 50%, #FF4800 100%);
  --gradient-banner:
    linear-gradient(90deg, #FF4800 0%, #FFAA00 50%, #FF4800 100%);
}

/* ============================================================
   Typography primitives — used as classes or inherited
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Semantic headings — mirror heading-monumental / hero / display / section / block */
.h-monumental,
.h-hero,
.h-display,
.h-section,
.h-block {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}

.h-monumental { font-size: var(--fs-xl); letter-spacing: -0.05rem; line-height: 1.1; }
.h-hero       { font-size: var(--fs-xl); letter-spacing: -0.05rem; line-height: 1.1; }
.h-display    { font-size: var(--fs-lg); letter-spacing: -0.04rem; line-height: 1.2; font-weight: 500; }
.h-section    { font-size: var(--fs-lg); letter-spacing: -0.03rem; line-height: 1.25; font-weight: 500; }
.h-block      { font-size: var(--fs-lg); letter-spacing: -0.02rem; line-height: 1.33; font-weight: 500; }

@media (min-width: 640px) {
  .h-monumental { font-size: var(--fs-2xl); line-height: 1.08; }
  .h-hero       { font-size: var(--fs-2xl); line-height: 1.08; }
  .h-display    { font-size: var(--fs-xl); line-height: 1.2; }
  .h-section    { font-size: var(--fs-xl); line-height: 1.22; }
}
@media (min-width: 1024px) {
  .h-monumental { font-size: var(--fs-4xl); line-height: 1; }
  .h-hero       { font-size: var(--fs-3xl); line-height: 1; }
  .h-display    { font-size: var(--fs-2xl); line-height: 1.08; }
}

/* Body / lead */
.body     { font: 400 var(--fs-base)/1.25rem var(--font-sans); text-wrap: pretty; }
.body-lg  { font: 400 var(--fs-base)/1.625 var(--font-sans); text-wrap: pretty; }
.body-sm  { font: 400 var(--fs-sm)/1.375rem var(--font-sans); text-wrap: pretty; color: var(--fg-muted); }
@media (min-width: 640px) {
  .body-lg  { font-size: var(--fs-md); line-height: 1.6; }
}

/* UI text roles */
.caption  { font: 500 var(--fs-xs)/1.125rem var(--font-sans); letter-spacing: 0.015rem; }

/* Eyebrow / kicker — IBM Plex Mono, uppercase (single mono role) */
.eyebrow,
.kicker,
.label,
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  line-height: 1;
}

/* Inline "hubspot tag" style — orange text on light-orange pillow */
.hs-tag {
  position: relative;
  isolation: isolate;
  color: var(--portant-orange);
  font-weight: 500;
}
.hs-tag::before {
  content: '';
  position: absolute;
  inset: -1px -2px;
  background: var(--portant-light-orange);
  border-radius: var(--radius-md);
  z-index: -1;
  opacity: 0.6;
}

/* Links */
a { color: inherit; text-decoration: none; }
.link-accent {
  color: var(--accent);
  font-weight: 500;
  transition: color var(--dur-fast) ease;
}
.link-accent:hover {
  color: color-mix(in srgb, var(--accent) 85%, black);
}