/* =========================================================================
   Noisy Design System — Colors & Typography
   Clay-inspired warm, playful, craft-oriented foundations
   ========================================================================= */

/* --------------------------------------------------------------------------
   Fonts
   NOTE: Roobert is a commercial font (Displaay / Pangram Pangram). We fall back
   to Google Fonts "Geist" as the closest free geometric substitute with similar
   proportions and letterforms. If you have the real Roobert files, drop them
   into fonts/ and adjust this @font-face declaration.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --font-sans: 'Geist', 'Roobert', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* OpenType stylistic sets. Geist does not support Roobert's ss01-ss12,
     but we preserve the feature-setting declarations so that when Roobert is
     installed locally, all 5 stylistic sets activate automatically. */
  --otf-heading: "ss01", "ss03", "ss10", "ss11", "ss12";
  --otf-body:    "ss03", "ss10", "ss11", "ss12";

  /* ======================================================================
     COLOR — Core
     ====================================================================== */
  --clay-black:      #000000;
  --pure-white:      #ffffff;
  --warm-cream:      #faf9f7;  /* page canvas */
  --warm-cream-2:    #f4f1ea;  /* slightly deeper cream */

  /* Neutral scale — soft, warm-leaning grays (no heavy charcoals) */
  --gray-50:         #f7f6f3;
  --gray-100:        #eceae4;
  --gray-200:        #dad4c8;  /* oat / primary border */
  --gray-300:        #c4bfb4;
  --gray-400:        #9f9b93;  /* muted text */
  --gray-500:        #807c74;  /* secondary text */
  --gray-600:        #605d57;  /* tertiary text — softer than charcoal */
  --gray-700:        #403e3a;  /* body-on-light where deeper is needed */
  --gray-800:        #1f1e1c;  /* near-black, warm */

  /* Legacy name aliases — retained but remapped to the softer scale above. */
  --warm-silver:     var(--gray-400);
  --warm-charcoal:   var(--gray-500);
  --dark-charcoal:   var(--gray-700);

  /* Borders */
  --oat-border:      #dad4c8;  /* primary oat border */
  --oat-light:       #eee9df;  /* secondary lighter oat */
  --cool-border:     #e6e8ec;  /* cool-toned */
  --dark-border:     #525a69;  /* on dark surfaces */
  --light-frost:     #eff1f3;

  /* ======================================================================
     COLOR — Noisy blue scale (the one brand color)
     The system is intentionally monochromatic: Noisy blue + warm neutrals.
     ====================================================================== */
  --noisy-blue-50:   #eef4ff;
  --noisy-blue-100:  #dbe7ff;
  --noisy-blue-200:  #b6cfff;
  --noisy-blue-300:  #7ca6ff;
  --noisy-blue-400:  #3d82fb;
  --noisy-blue:      #146ef5;  /* primary */
  --noisy-blue-600:  #0a56cc;
  --noisy-blue-700:  #0a4fc1;
  --noisy-blue-800:  #083c93;
  --noisy-blue-900:  #062766;

  /* Legacy aliases (retained so older cards/kits still resolve).
     Prefer the neutral + blue tokens above in new work. */
  --noisy-blue-dark: var(--noisy-blue-700);
  --noisy-blue-soft: var(--noisy-blue-50);

  /* Badges */
  --badge-blue-bg:   #f0f8ff;
  --badge-blue-text: #3859f9;

  /* ======================================================================
     SEMANTIC TOKENS
     ====================================================================== */
  --bg-canvas:       var(--warm-cream);
  --bg-surface:      var(--pure-white);
  --bg-sunken:       var(--warm-cream-2);

  --fg-1:            var(--gray-800);     /* primary text (warm near-black) */
  --fg-2:            var(--gray-500);     /* secondary */
  --fg-3:            var(--gray-400);     /* muted */
  --fg-link:         var(--noisy-blue);

  --border-1:        var(--oat-border);
  --border-2:        var(--oat-light);
  --border-cool:     var(--cool-border);

  --accent:          var(--noisy-blue);
  --accent-on:       var(--pure-white);

  /* ======================================================================
     ELEVATION — Clay's signature multi-layer shadow
     ====================================================================== */
  --shadow-clay:
    rgba(0,0,0,0.10) 0px 1px 1px,
    rgba(0,0,0,0.04) 0px -1px 1px inset,
    rgba(0,0,0,0.05) 0px -0.5px 1px;

  --shadow-hover-hard: rgb(0,0,0) -7px 7px;       /* playful hover */
  --shadow-hover-hard-accent: var(--noisy-blue) -7px 7px;
  --focus-ring:       rgb(20, 110, 245) solid 2px;

  /* ======================================================================
     RADIUS
     ====================================================================== */
  --r-sharp:   4px;    /* inputs, ghost buttons */
  --r-std:     8px;    /* small cards, images */
  --r-badge:   11px;   /* tag badges */
  --r-card:   12px;    /* standard cards, buttons */
  --r-feature:24px;    /* feature cards */
  --r-section:40px;    /* large sections, footer */
  --r-pill: 1584px;    /* CTA pills */

  /* ======================================================================
     SPACING — 8px baseline with Clay's exact scale
     ====================================================================== */
  --sp-px: 1px;
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-1-5: 6.4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-3-5: 12.8px;
  --sp-4: 16px;
  --sp-4-5: 18px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ======================================================================
     TYPE SCALE (raw tokens)
     ====================================================================== */
  --t-display-1:   80px;
  --t-display-2:   60px;
  --t-section:     44px;
  --t-card-head:   32px;
  --t-feature:     20px;
  --t-body-lg:     20px;
  --t-body:        18px;
  --t-body-std:    16px;
  --t-button:      16px;
  --t-button-lg:   24px;
  --t-button-sm:   12.8px;
  --t-nav:         15px;
  --t-caption:     14px;
  --t-small:       12px;
  --t-badge:       9.6px;

  --tracking-display-1: -3.2px;
  --tracking-display-2: -2.4px;
  --tracking-section:   -1.32px;
  --tracking-card-head: -0.64px;
  --tracking-feature:   -0.4px;
  --tracking-sub:       -0.16px;
  --tracking-body:      -0.36px;
  --tracking-button:    -0.16px;
  --tracking-label:     1.08px;
}

/* =========================================================================
   BASE TYPE RESET
   ========================================================================= */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
   SEMANTIC TYPE CLASSES
   Use these everywhere — they bake in Roobert's OpenType character.
   ========================================================================= */
.t-display-1,
h1.display {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-heading);
  font-size: var(--t-display-1);
  font-weight: 600;
  line-height: 1.00;
  letter-spacing: var(--tracking-display-1);
}

.t-display-2 {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-heading);
  font-size: var(--t-display-2);
  font-weight: 600;
  line-height: 1.00;
  letter-spacing: var(--tracking-display-2);
}

.t-section,
h2 {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-heading);
  font-size: var(--t-section);
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: var(--tracking-section);
}

.t-card-head,
h3 {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-heading);
  font-size: var(--t-card-head);
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: var(--tracking-card-head);
}

.t-feature,
h4 {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-heading);
  font-size: var(--t-feature);
  font-weight: 600;
  line-height: 1.40;
  letter-spacing: var(--tracking-feature);
}

.t-sub {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: var(--t-feature);
  font-weight: 500;
  line-height: 1.50;
  letter-spacing: var(--tracking-sub);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: var(--t-body-lg);
  font-weight: 400;
  line-height: 1.40;
}

.t-body,
p {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.60;
  letter-spacing: var(--tracking-body);
}

.t-body-std {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: var(--t-body-std);
  font-weight: 400;
  line-height: 1.50;
}

.t-nav {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: var(--t-nav);
  font-weight: 500;
  line-height: 1.60;
}

.t-button {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: var(--t-button);
  font-weight: 500;
  line-height: 1.50;
  letter-spacing: var(--tracking-button);
}

.t-button-sm {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: var(--t-button-sm);
  font-weight: 500;
  line-height: 1.50;
  letter-spacing: -0.128px;
}

.t-caption {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: var(--t-caption);
  font-weight: 400;
  line-height: 1.50;
  letter-spacing: -0.14px;
  color: var(--fg-2);
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.50;
}

.t-label {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

code, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 14px;
}

/* =========================================================================
   UTILITY — swatch section backgrounds
   ========================================================================= */
.bg-cream     { background: var(--warm-cream); color: var(--clay-black); }
.bg-matcha    { background: var(--matcha-800); color: var(--pure-white); }
.bg-matcha-lt { background: var(--matcha-300); color: var(--clay-black); }
.bg-slushie   { background: var(--slushie-500); color: var(--clay-black); }
.bg-slushie-dk{ background: var(--slushie-800); color: var(--pure-white); }
.bg-lemon     { background: var(--lemon-500); color: var(--clay-black); }
.bg-ube       { background: var(--ube-800); color: var(--pure-white); }
.bg-ube-lt    { background: var(--ube-300); color: var(--clay-black); }
.bg-pomegr    { background: var(--pomegranate-400); color: var(--clay-black); }
.bg-blueberry { background: var(--blueberry-800); color: var(--pure-white); }
.bg-noisy     { background: var(--noisy-blue); color: var(--pure-white); }

/* =========================================================================
   RESPONSIVE — mobile overrides
   The site is built with inline JSX styles so we override them via attribute
   selectors + !important. Targets phones (<= 768px). Tablets keep desktop.
   ========================================================================= */
@media (max-width: 768px) {
  /* Reduce base body padding; sections & inner cards lose desktop pixel padding */
  body section,
  body footer {
    padding: 32px 16px !important;
  }
  body section > div,
  body footer > div {
    padding: 28px 20px !important;
    border-radius: 24px !important;
  }
  body section > div > div,
  body footer > div > div {
    padding: 0 !important;
    border-radius: 0 !important;
  }
  body section > div > div[style*="border-radius"],
  body section > div[style*="border-radius"] > div[style*="background"] {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  /* Navigation — wrap and shrink */
  body nav {
    padding: 10px 14px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  body nav > div {
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-left: 0 !important;
  }
  body nav a {
    font-size: 13px !important;
    padding: 5px 9px !important;
  }

  /* Headlines — scale down dramatically */
  body h1 {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
  }
  body h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.6px !important;
  }
  body h3 {
    font-size: 20px !important;
    letter-spacing: -0.3px !important;
  }
  body p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Inline-styled headings (since most are <h1 style="fontSize:NN">) */
  body [style*="font-size: 92"],
  body [style*="font-size: 80"],
  body [style*="font-size: 76"],
  body [style*="font-size: 60"] {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
  }
  body [style*="font-size: 56"],
  body [style*="font-size: 52"],
  body [style*="font-size: 48"],
  body [style*="font-size: 44"],
  body [style*="font-size: 40"] {
    font-size: clamp(24px, 6.5vw, 36px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.7px !important;
  }
  body [style*="font-size: 36"],
  body [style*="font-size: 32"],
  body [style*="font-size: 30"],
  body [style*="font-size: 28"] {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.15 !important;
  }

  /* Collapse all multi-column grids to single column by default */
  body [style*="grid-template-columns"],
  body [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Re-enable 2-column for dense KPI / 4-tile rows so numbers stay readable */
  body [style*="repeat(4, 1fr)"],
  body [style*="repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Flex rows — wrap so buttons/items don't overflow */
  body [style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  /* Force ml:auto items back into flow on mobile */
  body [style*="margin-left: auto"],
  body [style*="marginLeft: auto"] {
    margin-left: 0 !important;
  }

  /* Strip absurd max-widths and min-heights */
  body [style*="max-width"] {
    max-width: 100% !important;
  }
  body [style*="min-height"] {
    min-height: auto !important;
  }

  /* Buttons — full-width and stacked when in a CTA pair */
  body section [style*="display: flex"][style*="gap"] > a,
  body section [style*="display: flex"][style*="gap"] > button {
    flex: 1 1 100% !important;
  }

  /* Pricing comparison table — let it scroll horizontally so columns stay readable */
  body section [style*="overflow: hidden"][style*="border-radius"][style*="background: rgb(255"] {
    overflow-x: auto !important;
  }

  /* Reduce extreme inline padding values to mobile-friendly scale */
  body [style*="padding: 72px"],
  body [style*="padding: 64px"],
  body [style*="padding: 56px"] {
    padding: 32px 20px !important;
  }
  body [style*="padding: '64px 56px'"],
  body [style*="padding: 56px 64px"] {
    padding: 36px 24px !important;
  }

  /* Carousel — keep horizontal (override the global flex-wrap), shrink gap */
  .crm-track {
    flex-wrap: nowrap !important;
    gap: 28px !important;
  }
}

/* Extra-narrow phones (≤ 380px) — tighter spacing still */
@media (max-width: 380px) {
  body section,
  body footer {
    padding: 28px 12px !important;
  }
  body h1 {
    font-size: 32px !important;
  }
}