/* ============================================================
   Hattie — Colors & Type
   ------------------------------------------------------------
   Hattie is an AI assistant for landlords + small property
   managers, living inside WhatsApp (primary) and Slack
   (secondary). The product surface IS the chat thread.

   CENTRAL RULE: Chromatic energy lives ONLY inside product
   mockups. Brand chrome — nav, CTAs, cards, pricing, banner,
   footer — is channel-neutral (warm cream + warm charcoal).
   There is NO accent colour outside mockups. The "accent" IS
   warm charcoal.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ============================================================
     BRAND CHROME — channel-neutral. Use everywhere OUTSIDE
     product mockups (nav, hero, features, pricing, FAQ, footer).
     ============================================================ */

  /* Canvas — cream. NEVER pure white as page background. */
  --canvas:           #F7F4ED;
  --surface-1:        #FFFFFF;   /* cards only */
  --surface-2:        #F1ECDE;   /* subtle raised surface, badges */

  /* Ink — warm charcoals, no cool greys */
  --ink:              #1F1F1F;   /* primary text + the "accent" */
  --ink-muted:        #6B6660;
  --ink-subtle:       #8A8580;
  --ink-tertiary:     #A9A39C;

  /* Inverse — featured pricing tier + closing CTA banner */
  --inverse-canvas:   #1F1F1F;
  --inverse-surface-1:#2E2A26;   /* CTA pressed state */
  --on-primary:       #FFFFFF;

  /* Lines */
  --hairline:         #E8E3D9;
  --hairline-soft:    #EFEAE0;

  /* Semantic — for product UI signalling only, never decoration */
  --semantic-error:   #E53935;
  --semantic-warning: #FFA000;
  --semantic-success: #10B981;
  --semantic-info:    #3B82F6;

  /* ============================================================
     WHATSAPP — authentic colours. ONLY inside a WhatsApp mockup.
     ============================================================ */
  --wa-wallpaper:        #ECE5DD;
  --wa-header:           #075E54;
  --wa-header-ink:       #FFFFFF;
  --wa-sent-bubble:      #DCF8C6;
  --wa-received-bubble:  #FFFFFF;
  --wa-tick:             #53BDEB;
  --wa-action:           #25D366;
  --wa-meta:             #667781;

  /* ============================================================
     SLACK — authentic colours. ONLY inside the ONE Slack mockup.
     ============================================================ */
  --sl-sidebar:          #3F0E40;
  --sl-sidebar-hover:    #350D36;
  --sl-sidebar-ink:      #FFFFFF;
  --sl-sidebar-ink-muted:#BCABBC;
  --sl-active-channel:   #1164A3;
  --sl-unread-badge:     #CD2553;
  --sl-message-surface:  #FFFFFF;

  /* ============================================================
     TYPOGRAPHY — Inter Variable everywhere, JBM Variable only
     for code inside mockups. Weights cap at 500; we don't go
     heavier — restraint reads premium.
     ============================================================ */
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display + headings */
  --t-display-xl-size: 72px;  --t-display-xl-lh: 1.05; --t-display-xl-tr: -2.0px; --t-display-xl-fw: 500;
  --t-display-lg-size: 56px;  --t-display-lg-lh: 1.10; --t-display-lg-tr: -1.4px; --t-display-lg-fw: 500;
  --t-display-md-size: 40px;  --t-display-md-lh: 1.15; --t-display-md-tr: -0.8px; --t-display-md-fw: 500;
  --t-headline-size:   28px;  --t-headline-lh:   1.20; --t-headline-tr:   -0.5px; --t-headline-fw:   500;
  --t-card-title-size: 22px;  --t-card-title-lh: 1.25; --t-card-title-tr: -0.3px; --t-card-title-fw: 500;
  --t-subhead-size:    20px;  --t-subhead-lh:    1.40; --t-subhead-tr:    -0.2px; --t-subhead-fw:    400;

  /* Body */
  --t-body-lg-size: 18px;  --t-body-lg-lh: 1.55; --t-body-lg-tr: -0.1px; --t-body-lg-fw: 400;
  --t-body-size:    16px;  --t-body-lh:    1.55; --t-body-tr:    0;      --t-body-fw:    400;
  --t-body-sm-size: 14px;  --t-body-sm-lh: 1.50; --t-body-sm-tr: 0;      --t-body-sm-fw: 400;
  --t-caption-size: 12px;  --t-caption-lh: 1.40; --t-caption-tr: 0;      --t-caption-fw: 400;

  /* UI */
  --t-button-size:  15px;  --t-button-lh:  1.20; --t-button-tr:  0;      --t-button-fw:  500;
  --t-eyebrow-size: 13px;  --t-eyebrow-lh: 1.30; --t-eyebrow-tr: 0.2px;  --t-eyebrow-fw: 500;

  /* Inside mockups */
  --t-chat-message-size: 15px; --t-chat-message-lh: 1.40; --t-chat-message-fw: 400;
  --t-chat-meta-size:    11px; --t-chat-meta-lh:    1.30; --t-chat-meta-fw:    400;
  --t-mono-size:         13px; --t-mono-lh:         1.50; --t-mono-fw:         400;

  /* ============================================================
     SPACING — 4 / 8 / 12 / 16 / 24 / 32 / 48 / 96
     ============================================================ */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-96: 96px;

  /* Section rhythm: 96px between sections; the Slack section
     gets MORE — minimum 96px cream above AND below. */
  --section-y: 96px;

  /* ============================================================
     RADII — pill for buttons/tabs/badges; everything else is
     squarer than you'd expect.
     ============================================================ */
  --r-sm:     8px;   /* Slack active-channel row */
  --r-bubble: 12px;  /* chat bubbles (one tail-corner reduced to 4px) */
  --r-lg:     14px;  /* FAQ rows */
  --r-xl:     20px;  /* feature + testimonial cards */
  --r-xxl:    28px;  /* mockup cards + CTA banner + pricing-card */
  --r-pill:   9999px;/* ALL buttons, tabs, badges */

  /* ============================================================
     SHADOWS — soft, never coloured, never large.
     ============================================================ */
  --shadow-xs:   0 1px 0 rgba(31, 31, 31, 0.04);
  --shadow-sm:   0 1px 2px rgba(31, 31, 31, 0.06), 0 1px 1px rgba(31, 31, 31, 0.04);
  --shadow-md:   0 4px 12px rgba(31, 31, 31, 0.06), 0 1px 2px rgba(31, 31, 31, 0.04);
  --shadow-lift: 0 12px 28px rgba(31, 31, 31, 0.08), 0 2px 6px rgba(31, 31, 31, 0.04);
  --focus-ring:  0 0 0 2px var(--ink);   /* charcoal, never coloured */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.6, 0, 0.78, 0);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container:        1200px;  /* default content width */
  --container-narrow: 840px;   /* the Slack section + FAQ */
  --nav-h:            64px;
}

/* ============================================================
   Page defaults
   ============================================================ */

html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic type classes — compose tokens.
   Use these instead of writing raw font-size/line-height.
   ============================================================ */

.t-display-xl { font: var(--t-display-xl-fw) var(--t-display-xl-size)/var(--t-display-xl-lh) var(--font-sans); letter-spacing: var(--t-display-xl-tr); color: var(--ink); text-wrap: balance; }
.t-display-lg { font: var(--t-display-lg-fw) var(--t-display-lg-size)/var(--t-display-lg-lh) var(--font-sans); letter-spacing: var(--t-display-lg-tr); color: var(--ink); text-wrap: balance; }
.t-display-md { font: var(--t-display-md-fw) var(--t-display-md-size)/var(--t-display-md-lh) var(--font-sans); letter-spacing: var(--t-display-md-tr); color: var(--ink); text-wrap: balance; }
.t-headline   { font: var(--t-headline-fw)   var(--t-headline-size)/var(--t-headline-lh)     var(--font-sans); letter-spacing: var(--t-headline-tr);   color: var(--ink); }
.t-card-title { font: var(--t-card-title-fw) var(--t-card-title-size)/var(--t-card-title-lh) var(--font-sans); letter-spacing: var(--t-card-title-tr); color: var(--ink); }
.t-subhead    { font: var(--t-subhead-fw)    var(--t-subhead-size)/var(--t-subhead-lh)       var(--font-sans); letter-spacing: var(--t-subhead-tr);    color: var(--ink-muted); }
.t-body-lg    { font: var(--t-body-lg-fw)    var(--t-body-lg-size)/var(--t-body-lg-lh)       var(--font-sans); letter-spacing: var(--t-body-lg-tr);    color: var(--ink-muted); }
.t-body       { font: var(--t-body-fw)       var(--t-body-size)/var(--t-body-lh)             var(--font-sans); color: var(--ink-muted); }
.t-body-sm    { font: var(--t-body-sm-fw)    var(--t-body-sm-size)/var(--t-body-sm-lh)       var(--font-sans); color: var(--ink-muted); }
.t-caption    { font: var(--t-caption-fw)    var(--t-caption-size)/var(--t-caption-lh)       var(--font-sans); color: var(--ink-subtle); }
.t-eyebrow    { font: var(--t-eyebrow-fw)    var(--t-eyebrow-size)/var(--t-eyebrow-lh)       var(--font-sans); letter-spacing: var(--t-eyebrow-tr);    color: var(--ink-muted); text-transform: none; /* sentence case, never all-caps */ }
.t-button     { font: var(--t-button-fw)     var(--t-button-size)/var(--t-button-lh)         var(--font-sans); }
.t-chat-message { font: var(--t-chat-message-fw) var(--t-chat-message-size)/var(--t-chat-message-lh) var(--font-sans); color: var(--ink); }
.t-chat-meta    { font: var(--t-chat-meta-fw)    var(--t-chat-meta-size)/var(--t-chat-meta-lh)       var(--font-sans); color: var(--wa-meta); }
.t-mono         { font: var(--t-mono-fw)         var(--t-mono-size)/var(--t-mono-lh)                 var(--font-mono); }

/* ============================================================
   Links — channel-neutral underline, no accent colour.
   ============================================================ */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hairline-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--ink); }