/* ============================================================================
   Unlimit Group — Colors & Type
   Source brand colors (provided): #255234, #82b632, #2d3630, white, black.
   Type: Quicksand (display, closest Google Font to the rounded "unlimit"
   wordmark) + Inter (UI/body workhorse). Flagged as substitution; awaiting
   official font files.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand palette ------------------------------------------------ */
  --ug-forest:        #255234; /* primary brand green — confidence, retail-grade */
  --ug-leaf:          #82b632; /* secondary, energetic lime — innovation accent */
  --ug-charcoal:      #2d3630; /* warm near-black, used as primary surface dark */
  --ug-black:         #0b0e0c; /* pure-ish black for max contrast */
  --ug-white:         #ffffff;

  /* ---------- Forest scale (derived) -------------------------------------- */
  --ug-forest-950:    #0f2418;
  --ug-forest-900:    #163320;
  --ug-forest-800:    #1c4128;
  --ug-forest-700:    #255234; /* = --ug-forest */
  --ug-forest-600:    #2f6841;
  --ug-forest-500:    #3d8454;
  --ug-forest-400:    #6aa67e;
  --ug-forest-300:    #9cc4ad;
  --ug-forest-200:    #cbe0d4;
  --ug-forest-100:    #e7f0ea;
  --ug-forest-50:     #f3f7f4;

  /* ---------- Leaf scale -------------------------------------------------- */
  --ug-leaf-700:      #5a8021;
  --ug-leaf-600:      #6e9c29;
  --ug-leaf-500:      #82b632; /* = --ug-leaf */
  --ug-leaf-400:      #9cc752;
  --ug-leaf-300:      #bcd982;
  --ug-leaf-200:      #d8e9b2;
  --ug-leaf-100:      #ecf3d8;

  /* ---------- Neutral scale (warm, biased toward charcoal) ---------------- */
  --ug-ink-950:       #0b0e0c;
  --ug-ink-900:       #16191a;
  --ug-ink-800:       #2d3630; /* = --ug-charcoal */
  --ug-ink-700:       #3c4641;
  --ug-ink-600:       #555c57;
  --ug-ink-500:       #767c78;
  --ug-ink-400:       #9aa09c;
  --ug-ink-300:       #bdc1be;
  --ug-ink-200:       #dadcd9;
  --ug-ink-100:       #ececea;
  --ug-ink-50:        #f6f6f4;
  --ug-paper:         #fafaf7; /* slight warmth; "paper" surface */

  /* ---------- Semantic — light surface (default) -------------------------- */
  --bg:               var(--ug-paper);
  --bg-elevated:      var(--ug-white);
  --bg-muted:         var(--ug-ink-50);
  --bg-inverse:       var(--ug-charcoal);

  --fg:               var(--ug-charcoal);
  --fg-muted:         var(--ug-ink-600);
  --fg-subtle:        var(--ug-ink-500);
  --fg-inverse:       var(--ug-white);
  --fg-on-brand:      var(--ug-white);

  --brand:            var(--ug-forest);
  --brand-hover:      var(--ug-forest-800);
  --brand-pressed:    var(--ug-forest-900);
  --accent:           var(--ug-leaf);
  --accent-hover:     var(--ug-leaf-600);

  --border:           var(--ug-ink-200);
  --border-strong:    var(--ug-ink-300);
  --divider:          var(--ug-ink-100);
  --focus-ring:       color-mix(in oklab, var(--ug-leaf) 60%, transparent);

  /* ---------- Status ------------------------------------------------------ */
  --success:          var(--ug-leaf-600);
  --success-bg:       var(--ug-leaf-100);
  --warning:          #c98a1c;
  --warning-bg:       #fbeed3;
  --danger:           #b3261e;
  --danger-bg:        #fbe6e4;
  --info:             #1d6fb8;
  --info-bg:          #dbecf9;

  /* ---------- Typography -------------------------------------------------- */
  --font-display:     'Quicksand', ui-rounded, system-ui, sans-serif;
  --font-body:        'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-12:            0.75rem;
  --fs-13:            0.8125rem;
  --fs-14:            0.875rem;
  --fs-16:            1rem;
  --fs-18:            1.125rem;
  --fs-20:            1.25rem;
  --fs-24:            1.5rem;
  --fs-32:            2rem;
  --fs-40:            2.5rem;
  --fs-56:            3.5rem;
  --fs-72:            4.5rem;

  --lh-tight:         1.1;
  --lh-snug:          1.25;
  --lh-normal:        1.5;
  --lh-relaxed:       1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.14em; /* GROUP-style wordmark caps */

  /* ---------- Spacing scale (4pt base) ------------------------------------ */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- Radii ------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- Elevation (warm, low-contrast; never harsh) ----------------- */
  --shadow-1: 0 1px 2px rgba(15, 36, 24, 0.06), 0 1px 1px rgba(15, 36, 24, 0.04);
  --shadow-2: 0 4px 10px -2px rgba(15, 36, 24, 0.08), 0 2px 4px rgba(15, 36, 24, 0.05);
  --shadow-3: 0 12px 28px -8px rgba(15, 36, 24, 0.18), 0 4px 10px rgba(15, 36, 24, 0.06);
  --shadow-inset: inset 0 0 0 1px rgba(15, 36, 24, 0.06);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---------- Motion ------------------------------------------------------ */
  --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:         120ms;
  --dur-base:         220ms;
  --dur-slow:         420ms;
}

/* ---------- Dark surface theme (charcoal-first) --------------------------- */
[data-theme="dark"] {
  --bg:               var(--ug-charcoal);
  --bg-elevated:      #353e38;
  --bg-muted:         #242b27;
  --bg-inverse:       var(--ug-white);
  --fg:               var(--ug-white);
  --fg-muted:         #c4cac6;
  --fg-subtle:        #97a09b;
  --fg-inverse:       var(--ug-charcoal);
  --border:           #424c46;
  --border-strong:    #5a655f;
  --divider:          #3a4540;
}

/* ---------- Type primitives ---------------------------------------------- */
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ug-display, h1.ug, h2.ug, h3.ug {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg);
}

.ug-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-56); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-40); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-24); line-height: var(--lh-snug); }
h4 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-18); line-height: var(--lh-snug); }
p  { font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg); text-wrap: pretty; }
small, .ug-caption { font-size: var(--fs-13); color: var(--fg-muted); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }