/* =============================================
   MPLUS BANANA - Green White Premium Theme
   Single-theme Soft Glass Material System
============================================= */

:root {
  color-scheme: light;

  /* Brand identity */
  --brand-green: #2F6B4F;
  --brand-green-700: #214E3A;
  --brand-green-500: #4F8A67;
  --brand-mint: #A8D5BA;
  --brand-sage: #DCEBE1;
  --brand-cream: #F7F8F3;
  --brand-paper: #FFFFFF;
  --brand-ink: #17231D;
  --brand-muted: #5D6F63;
  --brand-white: #FFFFFF;

  /* Backward-compatible semantic colors */
  --accent: var(--brand-green);
  --accent-secondary: #6DAF8C;
  --accent-soft: rgba(47, 107, 79, 0.10);
  --accent-dim: rgba(47, 107, 79, 0.12);
  --accent-glow: rgba(47, 107, 79, 0.16);
  --brand-dim: rgba(47, 107, 79, 0.12);
  --text-on-brand: #FFFFFF;
  --text-on-accent: #FFFFFF;

  /* Foundations */
  --bg-base: #F7F8F3;
  --bg-surface: rgba(255, 255, 255, 0.72);
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-hover: rgba(232, 244, 237, 0.76);
  --bg-sidebar: rgba(255, 255, 255, 0.78);
  --input-bg: rgba(255, 255, 255, 0.82);

  --app-background: #F7F8F3;
  --ambient-grid:
    linear-gradient(rgba(47, 107, 79, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 107, 79, 0.045) 1px, transparent 1px);
  --ambient-grid-size: 54px 54px, 54px 54px;
  --ambient-opacity: 0.58;
  --ambient-sheen:
    radial-gradient(circle at 18% 8%, rgba(168, 213, 186, 0.34), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.72), transparent 30%),
    radial-gradient(circle at 8% 82%, rgba(220, 235, 225, 0.46), transparent 32%),
    linear-gradient(135deg, rgba(47, 107, 79, 0.08), transparent 42%);

  /* Soft glass */
  --glass-blur: 24px;
  --glass-saturate: 150%;
  --glass-surface: rgba(255, 255, 255, 0.78);
  --glass-card: rgba(255, 255, 255, 0.86);
  --glass-card-strong: rgba(255, 255, 255, 0.94);
  --surface-highlight:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.92),
      rgba(232, 244, 237, 0.70));

  /* Borders and text */
  --border: rgba(47, 107, 79, 0.12);
  --border-soft: rgba(47, 107, 79, 0.16);
  --border-strong: rgba(47, 107, 79, 0.28);
  --focus-ring: rgba(47, 107, 79, 0.38);

  --text-primary: var(--brand-ink);
  --text-secondary: #5D6F63;
  --text-muted: #7E8C82;
  --text-faint: #A6B2AA;

  /* Status */
  --online: #22C55E;
  --offline: #A8B0AA;
  --danger: #DC2626;
  --success: #16A34A;
  --warning: #D97706;
  --info: var(--brand-green-500);

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(35, 75, 54, 0.08);
  --shadow-md: 0 8px 24px rgba(35, 75, 54, 0.10);
  --shadow-lg: 0 20px 56px rgba(35, 75, 54, 0.14);
  --shadow-soft: 0 18px 42px rgba(35, 75, 54, 0.12);
  --shadow-glass:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 2px 8px rgba(35, 75, 54, 0.06),
    0 18px 42px -18px rgba(35, 75, 54, 0.20);
  --shadow-glass-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 6px 18px rgba(35, 75, 54, 0.09),
    0 28px 64px -22px rgba(35, 75, 54, 0.24);

  /* Shape and shell */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --sidebar-w: 240px;
  --topbar-h: 64px;
  --mobile-bottom-nav-height: 62px;
  --mobile-bottom-nav-offset: 12px;
  --mobile-bottom-nav-space: calc(86px + env(safe-area-inset-bottom, 0px));
  --mobile-drawer-bg: #FFFFFF;
  --mobile-drawer-scrim: rgba(23, 35, 29, 0.28);
  --mobile-drawer-shadow: 14px 0 34px rgba(35, 75, 54, 0.18), 1px 0 0 var(--border-strong);

  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  :root {
    --glass-blur: 16px;
    --glass-card: rgba(255, 255, 255, 0.91);
    --glass-card-strong: rgba(255, 255, 255, 0.97);
    --ambient-opacity: 0.44;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-blur: 0px;
    --glass-surface: #FFFFFF;
    --glass-card: #FFFFFF;
    --glass-card-strong: #FFFFFF;
  }
}