/*
Theme Name: 99 Life
Theme URI: https://99life.my
Author: TEAM UG (Mommyhana)
Description: Custom WooCommerce theme for 99 Life — Malaysian daily-nutrition supplement brand. Pixel-ported from the Design Composer source, mobile-first, Malaysia-compliant (health disclaimer + PDPA).
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: nnlife
WC requires at least: 8.0
WC tested up to: 10.0
*/

/* =========================================================================
   DESIGN TOKENS  (extracted from "99 Life.dc.html" — single source of truth)
   ========================================================================= */
:root {
  /* Brand greens */
  --nl-green:        #1E7A45;   /* brand / accent / links / badges */
  --nl-green-dark:   #14532B;   /* hover, dark panels, headings on dark */
  --nl-green-soft:   #8FCBA3;   /* accents on dark */
  --nl-green-line:   #BFDDC8;

  /* Text ramp */
  --nl-ink:          #17251B;   /* primary text / headings */
  --nl-ink-2:        #2C3B30;
  --nl-text:         #3A4A3E;   /* nav / strong body */
  --nl-text-2:       #4A5B4E;
  --nl-muted:        #5A6B5E;   /* body muted */
  --nl-muted-2:      #6B7A6E;
  --nl-hint:         #8A9A8E;   /* hints / meta */
  --nl-hint-2:       #A2A99B;   /* strike-through compare price */
  --nl-footer-text:  #B9C4BB;

  /* Surfaces */
  --nl-cream:        #FBFAF6;   /* page background */
  --nl-white:        #ffffff;
  --nl-beige:        #E7E3D8;   /* card border / hairline */
  --nl-beige-2:      #F2EBDD;   /* beige card fill */
  --nl-beige-3:      #EFEBDF;
  --nl-beige-4:      #DCD7C9;   /* input / button border */
  --nl-beige-5:      #F4EEE3;   /* hero cream bg */
  --nl-beige-6:      #EDE7DA;

  /* Green tints */
  --nl-tint:         #E8F2EA;
  --nl-tint-2:       #EAF3EC;
  --nl-tint-3:       #F1F6F2;
  --nl-tint-strong:  #B9D6C3;
  --nl-tint-chip:    #D5EADC;
  --nl-tint-5:       #3E5043;

  /* Typography */
  --nl-font-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --nl-font-body: 'Figtree', system-ui, sans-serif;

  /* Layout */
  --nl-maxw:        1180px;
  --nl-maxw-wide:   1440px;
  --nl-gutter:      24px;
  --nl-header-h:    88px;

  /* Radius */
  --nl-r-sm:   12px;
  --nl-r-md:   16px;
  --nl-r-lg:   20px;
  --nl-r-xl:   24px;
  --nl-r-2xl:  28px;
  --nl-pill:   999px;

  /* Shadow */
  --nl-shadow-card:  0 16px 40px rgba(23,37,27,0.12);
  --nl-shadow-soft:  0 24px 60px rgba(23,37,27,0.10);
  --nl-shadow-hero:  0 30px 70px rgba(23,37,27,0.10);
  --nl-shadow-cta:   0 12px 26px rgba(30,122,69,0.28);
}