/* =============================================================
   FELDA Rebrand — Design Tokens
   Reference: design-reference.jpeg / rebrand-design.md
   ============================================================= */

:root {
  /* ── Brand Colours ─────────────────────────────────────────── */
  --felda-forest-dark:    #0d2b1a;
  --felda-forest:         #1a5c38;
  --felda-forest-mid:     #1e7846;
  --felda-teal:           #14b8a6;
  --felda-teal-light:     #a7f3d0;
  --felda-teal-pale:      #e6f7f5;
  --felda-gold:           #c9a227;

  /* ── Hero Gradient ──────────────────────────────────────────── */
  --hero-gradient: linear-gradient(
    135deg,
    #0d2b1a 0%,
    #1a5c38 45%,
    #165c42 75%,
    #0f766e 100%
  );

  /* ── Sidebar Gradient ───────────────────────────────────────── */
  --sidebar-gradient: linear-gradient(
    180deg,
    #0d2b1a 0%,
    #1a5c38 60%,
    #0f766e 100%
  );

  /* ── Surfaces ───────────────────────────────────────────────── */
  --surface-page:          #f0f2f5;
  --surface-card:          #ffffff;
  --surface-card-border:   rgba(0, 0, 0, 0.06);
  --surface-glass:         rgba(255, 255, 255, 0.12);
  --surface-glass-border:  rgba(255, 255, 255, 0.22);
  --surface-glass-hover:   rgba(255, 255, 255, 0.18);

  /* ── Text ───────────────────────────────────────────────────── */
  --text-primary:          #111827;
  --text-secondary:        #374151;
  --text-muted:            #6b7280;
  --text-subtle:           #9ca3af;
  --text-on-dark:          #ffffff;
  --text-on-dark-muted:    rgba(255, 255, 255, 0.75);
  --text-on-dark-subtle:   rgba(255, 255, 255, 0.55);

  /* ── Status / Accent ────────────────────────────────────────── */
  --status-green:          #16a34a;
  --status-green-bg:       rgba(22, 163, 74, 0.10);
  --status-green-text:     #16a34a;
  --badge-new-bg:          #1a5c38;
  --badge-new-text:        #ffffff;
  --badge-community-bg:    rgba(124, 58, 237, 0.88);
  --badge-community-text:  #ffffff;
  --badge-count-bg:        #14b8a6;
  --badge-count-text:      #ffffff;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.07);
  --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.12);
  --shadow-hero:  0 8px 32px rgba(0, 0, 0, 0.30);

  /* ── Border Radius ──────────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-card:  14px;
  --radius-pill:  999px;

  /* ── Spacing ────────────────────────────────────────────────── */
  --gap-xs:  0.375rem;
  --gap-sm:  0.625rem;
  --gap-md:  1rem;
  --gap-lg:  1.5rem;
  --gap-xl:  2rem;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-body:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:    0.625rem;   /* 10px */
  --font-size-sm:    0.75rem;    /* 12px */
  --font-size-base:  0.875rem;   /* 14px */
  --font-size-md:    1rem;       /* 16px */
  --font-size-lg:    1.25rem;    /* 20px */
  --font-size-xl:    1.5rem;     /* 24px */
  --font-size-hero:  2rem;       /* 32px */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-heavy:   800;
  --fw-black:   900;

  /* ── Icon sizes ─────────────────────────────────────────────── */
  --icon-sm:   16px;
  --icon-md:   20px;
  --icon-lg:   24px;
  --icon-quick-access: 22px;

  /* ── Transitions ────────────────────────────────────────────── */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Dark mode overrides */
.dark-style {
  --surface-page:        #1e2035;
  --surface-card:        #2b2d42;
  --surface-card-border: rgba(255, 255, 255, 0.07);
  --text-primary:        #e5e7eb;
  --text-secondary:      #d1d5db;
  --text-muted:          #9ca3af;
}