/* ============================================================
   UNIGREEN — Core Design Tokens : Color + Type
   Brand: Unigreen Power (Green Energy Solution), est. 2022
   Source: Claude Design — "Unigreen Design System"
   Font: Noto Sans Thai (loaded via Google Fonts in index.html)
   ============================================================ */

:root {
  /* ---------- BRAND PALETTE (source of truth: Brand Identity guide) ---------- */
  --mint:        #62EDAA;   /* Mint Green  — primary accent, "green" in logo   */
  --cyan:        #08C9FC;   /* Sky Blue    — secondary accent, lower-left leaf  */
  --purple:      #AC65FF;   /* Purple      — tertiary accent, top leaf petal    */
  --gray:        #4D4D4D;   /* Dark Gray   — "Uni" wordmark, body on light      */
  --navy:        #1C1B45;   /* Navy/Indigo — primary dark, surfaces, headlines  */
  --white:       #FFFFFF;

  /* ---------- TINTS & SHADES ---------- */
  --mint-600:    #2fcf86;
  --mint-200:    #b7f6d6;
  --mint-050:    #e8fcf2;
  --cyan-600:    #0596bd;
  --purple-600:  #8f3df0;
  --navy-800:    #15143a;
  --navy-700:    #232158;
  --navy-600:    #34316f;

  /* ---------- SEMANTIC : LIGHT THEME (default) ---------- */
  --bg:          #ffffff;
  --bg-subtle:   #f6f8f7;
  --surface:     #ffffff;
  --surface-2:   #f1f4f3;
  --fg:          #1C1B45;
  --fg-2:        #4D4D4D;
  --fg-3:        #7b7b86;
  --fg-on-accent:#0c1f16;
  --fg-on-navy:  #eef1f7;
  --border:      #e4e8e9;
  --border-strong:#cfd5d6;
  --accent:      var(--mint);
  --accent-ink:  var(--mint-600);
  --ring:        rgba(98,237,170,0.45);

  /* ---------- SEMANTIC STATUS ---------- */
  --ok:          #2fcf86;
  --info:        #08C9FC;
  --warn:        #f4b740;
  --danger:      #ef5a6b;

  /* ---------- TYPE FAMILY ---------- */
  --font-sans: 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- TYPE SCALE ---------- */
  --t-display:  clamp(2.6rem, 1.8rem + 3.4vw, 3.75rem);
  --t-h1:       2.25rem;
  --t-h2:       1.75rem;
  --t-h3:       1.375rem;
  --t-h4:       1.125rem;
  --t-body:     1rem;
  --t-sm:       0.875rem;
  --t-xs:       0.75rem;
  --t-eyebrow:  0.6875rem;

  /* ---------- WEIGHTS ---------- */
  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600;
  --w-bold: 700; --w-extra: 800; --w-black: 900;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.6; --lh-relaxed: 1.75;

  /* ---------- RADII ---------- */
  --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* ---------- SPACING (4pt base) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ---------- ELEVATION ---------- */
  --sh-1: 0 1px 2px rgba(28,27,69,0.06), 0 1px 3px rgba(28,27,69,0.05);
  --sh-2: 0 2px 6px rgba(28,27,69,0.07), 0 6px 16px rgba(28,27,69,0.06);
  --sh-3: 0 10px 30px rgba(28,27,69,0.10), 0 4px 10px rgba(28,27,69,0.06);
  --sh-ring: 0 0 0 4px var(--ring);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms;

  /* ---------- BRAND GRADIENT (leaf spectrum — use sparingly) ---------- */
  --grad-leaf: linear-gradient(100deg, var(--cyan) 0%, var(--mint) 55%, var(--purple) 130%);
  --grad-navy: linear-gradient(150deg, #232158 0%, #1C1B45 60%, #15143a 100%);
}

/* ============================================================
   DARK THEME — Navy canvas (logo's "dark version" context)
   ============================================================ */
[data-theme="dark"], .theme-dark {
  --bg:          #1C1B45;
  --bg-subtle:   #15143a;
  --surface:     #232158;
  --surface-2:   #2b2964;
  --fg:          #eef1f7;
  --fg-2:        #b9bbd6;
  --fg-3:        #8587ad;
  --fg-on-accent:#0c1f16;
  --border:      rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --accent:      var(--mint);
  --accent-ink:  var(--mint);
  --ring:        rgba(98,237,170,0.40);
  --sh-1: 0 1px 2px rgba(0,0,0,0.30);
  --sh-2: 0 4px 14px rgba(0,0,0,0.35);
  --sh-3: 0 16px 40px rgba(0,0,0,0.45);
}

/* Wordmark helper: Uni (gray/white) + green (mint) */
.ug-wordmark { font-weight: var(--w-extra); letter-spacing: -0.01em; }
.ug-wordmark .uni  { color: var(--fg); }
.ug-wordmark .green{ color: var(--mint-600); }
[data-theme="dark"] .ug-wordmark .uni { color: #fff; }
[data-theme="dark"] .ug-wordmark .green { color: var(--mint); }