/* ════════════════════════════════════════════════════════════════════════
   MJP DESIGN TOKENS v2 (R15 P3.2) — Mewah Mobile-Native PWA
   Brand REAL: #0a3d2e forest + #d4a437 gold (BUKAN emerald asumsi lama).
   Based on: Material 3 Expressive + Tailwind v4 @theme + shadcn/Vaul + Sonner.
   Loaded BEFORE erp.css. Backward-compat --brand-*/--gray-*/--emerald-* retained.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ──── COLOR PRIMITIVE ──── */

  /* Forest (brand primary) — OKLCH for perceptual accuracy */
  --color-forest-50:  oklch(0.97 0.02 165);
  --color-forest-100: oklch(0.93 0.04 165);
  --color-forest-200: oklch(0.86 0.07 165);
  --color-forest-300: oklch(0.74 0.10 165);
  --color-forest-400: oklch(0.60 0.13 165);
  --color-forest-500: oklch(0.46 0.13 163);
  --color-forest-600: oklch(0.36 0.10 163);
  --color-forest-700: #0a3d2e; /* BRAND PRIMARY */
  --color-forest-800: oklch(0.20 0.05 163);
  --color-forest-900: oklch(0.15 0.04 163);

  /* Gold (brand accent) */
  --color-gold-50:  oklch(0.98 0.03 87);
  --color-gold-100: oklch(0.94 0.06 87);
  --color-gold-200: oklch(0.88 0.10 87);
  --color-gold-300: oklch(0.82 0.13 87);
  --color-gold-400: #d4a437; /* BRAND ACCENT */
  --color-gold-500: oklch(0.70 0.14 80);
  --color-gold-600: oklch(0.60 0.12 75);
  --color-gold-700: oklch(0.48 0.10 70);

  /* Neutrals */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafaf7;
  --color-neutral-100: #f5f5f1;
  --color-neutral-200: #eeeae2;
  --color-neutral-300: #d8d3c8;
  --color-neutral-400: #9b9b9b;
  --color-neutral-500: #6b6b6b;
  --color-neutral-700: #3a3a3a;
  --color-neutral-900: #1a1a1a;

  /* ──── COLOR SEMANTIC ──── */
  --color-background: var(--color-neutral-50);
  --color-foreground: var(--color-neutral-900);
  --color-muted: var(--color-neutral-100);
  --color-muted-foreground: var(--color-neutral-500);
  --color-border: var(--color-neutral-200);
  --color-ring: var(--color-forest-500);

  --color-surface-1: var(--color-neutral-0);
  --color-surface-2: var(--color-neutral-50);
  --color-surface-3: var(--color-neutral-100);

  --color-primary: var(--color-forest-700);
  --color-primary-foreground: var(--color-neutral-0);
  --color-primary-hover: var(--color-forest-600);
  --color-primary-active: var(--color-forest-800);

  --color-accent: var(--color-gold-400);
  --color-accent-foreground: var(--color-neutral-900);
  --color-accent-hover: var(--color-gold-500);

  --color-success: oklch(0.55 0.16 145);
  --color-success-bg: oklch(0.95 0.05 145);
  --color-warning: oklch(0.70 0.16 75);
  --color-warning-bg: oklch(0.96 0.06 80);
  --color-danger: oklch(0.55 0.20 25);
  --color-danger-bg: oklch(0.96 0.05 20);
  --color-info: oklch(0.60 0.15 240);
  --color-info-bg: oklch(0.96 0.04 240);

  /* ──── SPACING (Tailwind v4 base 0.25rem) ──── */
  --spacing-0: 0;
  --spacing-0_5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  --content-tight: var(--spacing-2);
  --content-default: var(--spacing-4);
  --content-relaxed: var(--spacing-6);
  --section-gap: var(--spacing-12);
  --page-padding-mobile: var(--spacing-4);
  --page-padding-desktop: var(--spacing-8);

  /* ──── RADIUS ──── */
  --radius-none: 0;
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* ──── SHADOW (5-tier elevation) ──── */
  --shadow-none: 0 0 #0000;
  --shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.04);
  --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.18);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  --shadow-card-resting: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-modal: var(--shadow-xl);
  --shadow-bottom-sheet: var(--shadow-2xl);
  --shadow-popover: var(--shadow-lg);
  --shadow-dropdown: var(--shadow-md);

  /* ──── MOTION (Tailwind v4 + M3 Expressive) ──── */
  --duration-instant: 50ms;
  --duration-fast: 100ms;
  --duration-default: 200ms;
  --duration-moderate: 300ms;
  --duration-slow: 500ms;
  --duration-longer: 700ms;

  --ease-linear: linear;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --motion-button-press: transform var(--duration-fast) var(--ease-snappy);
  --motion-modal-enter: opacity var(--duration-moderate) var(--ease-fluid), transform var(--duration-moderate) var(--ease-spring-soft);
  --motion-page-fade: opacity var(--duration-default) var(--ease-fluid);

  /* ──── TYPOGRAPHY ──── */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display-2xl: 60px;
  --text-display-xl: 48px;
  --text-display-lg: 36px;
  --text-display-md: 30px;
  --text-display-sm: 24px;
  --text-h1: 30px;
  --text-h2: 24px;
  --text-h3: 20px;
  --text-h4: 18px;
  --text-h5: 16px;
  --text-h6: 14px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-overline: 11px;

  /* ──── Z-INDEX layers ──── */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-banner: 1200;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-tooltip: 1600;
  --z-toast: 1700;
  --z-max: 9999;

  /* ──── PWA SAFE AREA helpers ──── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ════════════════════════════════════════════════════════════════════════
     LEGACY BACKWARD-COMPAT — alias --brand-*/--gray-*/--emerald-*
     erp.css (R7.3) reference these. New code: pakai --color-forest-*/etc.
     ════════════════════════════════════════════════════════════════════════ */

  --brand-50:  #e8f1ee;
  --brand-100: #c5dcd2;
  --brand-200: #9bc1b1;
  --brand-300: #71a690;
  --brand-400: #4a8a72;
  --brand-500: #2e6a55;
  --brand-600: #1a5640;
  --brand-700: #0a3d2e;
  --brand-800: #08322a;
  --brand-900: #062722;

  --gray-50:  #fafaf7;
  --gray-100: #f5f5f1;
  --gray-200: #eeeae2;
  --gray-300: #d8d3c8;
  --gray-400: #9b9b9b;
  --gray-500: #6b6b6b;
  --gray-600: #4b4b4b;
  --gray-700: #3a3a3a;
  --gray-800: #1f1f1f;
  --gray-900: #111111;

  --emerald-50:  var(--brand-50);
  --emerald-100: var(--brand-100);
  --emerald-500: var(--brand-500);
  --emerald-600: var(--brand-600);
  --emerald-700: var(--brand-700);
  --emerald-800: var(--brand-800);

  --gold-400: var(--color-gold-400);
  --gold-500: var(--color-gold-500);
}

/* ──── PWA NATIVE FEEL — global body rules ──── */
html, body {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-sans);
}

input, textarea, select, [contenteditable], .selectable {
  user-select: text;
  -webkit-user-select: text;
}

/* prevent zoom on focus iOS — input must be ≥16px font */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px; }
}