/* =========================================================================
   Ty Myers Media — Colors & Type
   Import FIRST. Defines all design tokens + base type + utilities.

   LAYERED SOURCING
   ----------------
   LAYER 1 (PRIMARY): Grovia Webflow template  — https://grovia-template.webflow.io/
                      See scraps/grovia-reference.md. Every Grovia-sourced token is
                      tagged with a "Grovia §<section>" comment inline.
   LAYER 2 (OVERLAY): Ty Myers Media additions — the yellow→amber accent gradient,
                      card-wrap pattern, noise overlay, and the MonTracker dark
                      palette. Each is tagged "Ty overlay".

   If Grovia and Ty disagree, Ty wins ONLY where explicitly marked. Otherwise
   follow Grovia. This file is the bible — surfaces should match this, not the
   other way around.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600&family=Geist:wght@400;500;600&display=swap');

:root {
  /* =====================================================================
     COLOR — GROVIA PALETTE (Grovia §2)
     ===================================================================== */

  /* Core surfaces (Grovia §2.1) */
  --bg-01:           #F4F2EE;   /* primary page bg, warm cream */
  --bg-02:           #F0ECE6;   /* secondary section bg */
  --bg-03:           #EDE9E6;   /* tertiary / card bg */
  --bg-white:        #FFFFFF;

  /* Text & anchors (Grovia §2.1) */
  --text-primary:    #000000;
  --text-secondary:  #6D6D6D;   /* neutral-10 */
  --text-inverse:    #FFFFFF;

  /* Neutral scale (Grovia §2.2) */
  --neutral-01:      #FAFAFA;
  --neutral-02:      #F4F4F4;
  --neutral-03:      #EEEEEE;
  --neutral-04:      #E6E6E6;   /* default border */
  --neutral-05:      #DADADA;
  --neutral-06:      #CCCCCC;
  --neutral-07:      #BDBDBD;
  --neutral-08:      #AEAEAE;
  --neutral-09:      #999999;
  --neutral-10:      #6D6D6D;
  --neutral-11:      #212121;

  --border-default:  var(--neutral-04);   /* Grovia §6.2 cards */
  --border-subtle:   var(--neutral-03);

  /* Grovia accent — pastel yellow, used SURGICALLY (Grovia §2.1, §2.4) */
  --grovia-yellow:   #FEF7AF;

  /* ---------------------------------------------------------------------
     Ty overlay — accent gradient (yellow→amber)
     Grovia uses a flat pastel yellow; Ty Myers Media layers a 135°
     yellow→amber gradient on top for checkmarks, the "Most popular"
     pricing card, and brand-mark framing. Keep it SURGICAL — same rule
     as Grovia's yellow: 1–2 elements per viewport max.
     --------------------------------------------------------------------- */
  --accent-a:        #F7C948;   /* Ty overlay — yellow */
  --accent-b:        #E8961E;   /* Ty overlay — amber */
  --accent-solid:    #E8961E;   /* Ty overlay — solid amber fallback */
  --accent-gradient: linear-gradient(135deg, #F7C948 0%, #E8961E 100%); /* Ty overlay */

  /* Semantic (Ty overlay — CRM health pills, not in Grovia) */
  --ok:              #2f9e44;
  --ok-bg:           rgba(47,158,68,0.12);
  --warn:            #d4a017;
  --warn-bg:         rgba(212,160,23,0.14);
  --err:             #c0392b;
  --err-bg:          rgba(192,57,43,0.12);
  --info:            #5b8def;

  /* ---------------------------------------------------------------------
     Ty overlay — MonTracker dark palette
     Grovia has NO dark mode. This is a documented extension used ONLY
     by the MonTracker product, inspired by Pluggo. Same accent gradient,
     inverted neutrals.
     --------------------------------------------------------------------- */
  --dk-bg:           #090909;
  --dk-surface:      #1a1a1a;
  --dk-surface-2:    #242424;
  --dk-border:       rgba(255,255,255,0.05);
  --dk-border-strong:rgba(255,255,255,0.12);
  --dk-fg-1:         #f5f5f5;
  --dk-fg-2:         #a8a8a8;
  --dk-fg-3:         #6b6b6b;


  /* =====================================================================
     TYPOGRAPHY (Grovia §3)
     ===================================================================== */

  /* Families
     Grovia §3.1: Albert Sans for headings, Geist for body.
     That is the entire type system. No serif accents, no numeric font. */
  --font-heading:    "Albert Sans", system-ui, sans-serif;  /* Grovia §3.1 */
  --font-body:       "Geist", system-ui, sans-serif;         /* Grovia §3.1 */

  /* Desktop type scale (Grovia §3.2) */
  --h1: 3.5rem;       /* 56px — hero only */
  --h2: 2.5rem;       /* 40px — section titles */
  --h3: 2.25rem;      /* 36px — sub-section, card headlines */
  --h4: 1.88rem;      /* 30px — feature card titles */
  --h5: 1.63rem;      /* 26px — testimonial names, FAQ questions */
  --h6: 1.25rem;      /* 20px — small labels, pricing tier names */
  --body-l: 1.125rem; /* 18px */
  --body:   1rem;     /* 16px */
  --body-s: 0.875rem; /* 14px */

  /* Line-height & tracking (Grovia §3.4) */
  --leading-heading: 1.10;
  --leading-body:    1.35;
  --tracking-heading:-0.04em;
  --tracking-body:    normal;


  /* =====================================================================
     SPACING (Grovia §4)
     ===================================================================== */
  --space-4xs: 0.25rem;  /* 4px  — icon-to-label */
  --space-3xs: 0.5rem;   /* 8px  — chip padding */
  --space-2xs: 0.75rem;  /* 12px — tight card padding */
  --space-xs:  1rem;     /* 16px */
  --space-s:   1.25rem;  /* 20px — button padding Y */
  --space-m:   1.5rem;   /* 24px — card gutter */
  --space-l:   2rem;     /* 32px — card inner padding */
  --space-xl:  2.5rem;   /* 40px — grid gutter */
  --space-2xl: 3rem;     /* 48px — section inner */
  --space-3xl: 4rem;     /* 64px — section pad (mobile) */
  --space-4xl: 5rem;     /* 80px — section pad (desktop) */
  --space-5xl: 6rem;     /* 96px — hero vertical pad */

  /* Container (Grovia §4.2) */
  --container-max:         1200px;
  --container-pad-desktop: 4rem;
  --container-pad-mobile:  1.5rem;
  --section-pad-desktop:   5rem;
  --section-pad-mobile:    2.75rem;


  /* =====================================================================
     RADII (Grovia §6)
     ===================================================================== */
  --radius-sm:   0.75rem;   /* 12px — form inputs (Grovia §6.4) */
  --radius-md:   1rem;      /* 16px — screenshots, tiles */
  --radius-lg:   1.5rem;    /* 24px — cards (Grovia §6.2 low end) */
  --radius-xl:   2rem;      /* 32px — cards (Grovia §6.2 high end), pricing */
  --radius-pill: 5rem;      /* buttons, nav, chips (Grovia §6.1) */
  --radius-full: 9999px;

  /* Ty overlay — card-wrap pattern. Grovia uses bordered cards;
     Ty's signature is an outer 24px radius wrap (bg-03) containing
     a 20px radius inner (white). Used for tiles, testimonials, FAQ. */
  --r-wrap:  24px;           /* Ty overlay */
  --r-card:  20px;           /* Ty overlay */


  /* =====================================================================
     SHADOWS
     Grovia §2.3/§6.2: "No gradients. No drop shadows beyond the faintest."
     Card resting state has NO shadow. Hover may add a very faint lift.
     Ty overlay: a warm-tinted shadow palette for the card-wrap pattern.
     ===================================================================== */
  --shadow-none:        none;
  --shadow-card:        0 1px 20px rgba(224,215,198,0.15);   /* Ty overlay, warm */
  --shadow-card-hover:  0 8px 30px rgba(224,215,198,0.30);   /* Ty overlay */
  --shadow-wrap-hover:  5px 8px 15px rgba(0,0,0,0.10);        /* Ty overlay */
  --shadow-nav:         0 1px 20px rgba(224,215,198,0.50);    /* Ty overlay */
  --shadow-btn:         0 5px 16px rgba(0,0,0,0.20);          /* Ty overlay — black CTAs */
  --shadow-dark-card:   0 4px 24px rgba(0,0,0,0.40);          /* Ty overlay — MonTracker */


  /* =====================================================================
     MOTION (Grovia §8)
     Grovia keeps motion restrained: marquees + hover lifts only.
     One easing curve, staggered reveals.
     ===================================================================== */
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ease-out */
  --dur-fast:  0.30s;
  --dur:       0.50s;
  --dur-slow:  0.70s;
  --stagger:   60ms;
}


/* =========================================================================
   BASE TYPE (Grovia §3)
   ========================================================================= */

html { font-family: var(--font-body); }

body {
  margin: 0;
  background: var(--bg-01);
  color: var(--text-primary);
  font: 400 var(--body) / var(--leading-body) var(--font-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  margin: 0 0 0.5em;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

/* Weights (Grovia §3.5): 500–600 for headings, rarely bold */
h1 { font-size: var(--h1); font-weight: 600; }
h2 { font-size: var(--h2); font-weight: 600; }
h3 { font-size: var(--h3); font-weight: 500; }
h4 { font-size: var(--h4); font-weight: 500; }
h5 { font-size: var(--h5); font-weight: 500; }
h6 { font-size: var(--h6); font-weight: 500; }

/* Grovia §3: <strong> inside a heading simply becomes heavier Albert Sans.
   Headings already set their own weight via h1–h6 rules above. */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-weight: 700;
}

p { margin: 0 0 1em; color: var(--text-primary); text-wrap: pretty; }
p.muted, .muted { color: var(--text-secondary); }

small, .small { font-size: var(--body-s); color: var(--text-secondary); }

/* Eyebrow / uppercase label */
.eyebrow, .label-caps {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

a { color: inherit; text-decoration: none; transition: opacity var(--dur-fast) var(--ease); }
a:hover { opacity: 0.7; }

code, pre, .mono {
  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: var(--body-s);
}


/* =========================================================================
   UTILITIES
   ========================================================================= */

/* Ty overlay — Noise overlay. Subtle fractal noise, cream paper feel.
   Add <div class="noise-overlay"></div> once per page. */
.noise-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Grovia card (Grovia §6.2) — bg white, 1px neutral-04, 24–32px radius,
   32px padding, no resting shadow. */
.card {
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
  transition: transform var(--dur-fast) var(--ease);
}
.card:hover { transform: translateY(-2px); }  /* Grovia §8 */

/* Ty overlay — signature card-wrap. Outer bg-03 wrap, inner white card.
   Used for testimonials, FAQ, tiles where Ty wants a warmer frame than
   Grovia's 1px border. */
.card-wrap {
  background: var(--bg-03);
  padding: 8px;
  border-radius: var(--r-wrap);
  transition: box-shadow var(--dur) var(--ease);
}
.card-wrap:hover { box-shadow: var(--shadow-wrap-hover); }
.card-wrap > .card-inner,
.card-wrap > .inner {
  background: var(--bg-white);
  border-radius: var(--r-card);
  padding: var(--space-m);
}

/* Buttons (Grovia §6.1) — pill, black fill or black outline only.
   Ty overlay: .btn-accent uses the yellow→amber gradient. */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  font: 500 var(--body) / 1 var(--font-body);
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--text-primary); color: var(--text-inverse);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { background: var(--neutral-11); opacity: 1; } /* Grovia §6.1 */
.btn-ghost {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--neutral-05);
}
.btn-ghost:hover { background: var(--bg-white); opacity: 1; }
.btn-accent {                                      /* Ty overlay */
  background: var(--accent-gradient);
  color: var(--text-primary);
  border: none;
}

/* Tags / chips (Grovia §6.3) */
.tag-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  font: 600 var(--body-s) / 1 var(--font-heading);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  background: var(--bg-white); color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.tag-pill.accent {                                 /* Ty overlay */
  background: var(--accent-gradient);
  border-color: transparent;
}
.tag-pill.grovia-yellow {                          /* Grovia §2.4 */
  background: var(--grovia-yellow);
  border-color: transparent;
}

/* Ty overlay — gradient checkmark badge */
.check-badge {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-gradient);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.check-badge::before {
  content: ""; width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* Form inputs (Grovia §6.4) */
.input {
  width: 100%;
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font: 400 var(--body) / 1.4 var(--font-body);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease);
}
.input:focus { outline: none; border-color: var(--text-primary); }
.input-label {
  display: block;
  font: 500 var(--body-s) / 1.4 var(--font-body);
  margin-bottom: 0.4rem;
  color: var(--text-primary);
}

/* Floating pill navbar (Ty overlay — Grovia nav is static, Ty's floats) */
.nav-pill {
  position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-nav);
  z-index: 100;
}

/* Scroll-reveal (Grovia §8 — subtle) */
.reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Ty overlay — Dark wrapper (used inside cream surfaces for feature panels
   and the contact form). MonTracker uses the same palette at page level. */
.dark-wrapper {
  background: var(--text-primary); color: var(--text-inverse);
  border-radius: 32px; padding: 3.75rem;
  position: relative; overflow: hidden;
}
.dark-wrapper::before,
.dark-wrapper::after {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  filter: blur(80px); opacity: 0.25; pointer-events: none;
}
.dark-wrapper::before { background: var(--accent-solid); top: -120px; left: -120px; }
.dark-wrapper::after  { background: #2b7a78; bottom: -140px; right: -80px; }