/**
 * tokens.css — Design tokens untuk Lemukutan v2 rebuild.
 *
 * Filosofi: monochrome elegant, minimal warna, generous whitespace.
 * Brand color (teal) dipakai sparingly untuk accent + interactive states.
 * Status colors muted, tidak vibrant.
 */

:root {
  /* ─── BRAND ─────────────────────────────────────────────────────── */
  --brand:           #0e8a7a;      /* primary teal — interactive, links, CTAs */
  --brand-dark:      #0a3d52;      /* hover state */
  --brand-soft:      #e6f4f1;      /* subtle background tint */

  /* ─── NEUTRAL SCALE ─────────────────────────────────────────────── */
  --n-50:            #fafafa;      /* page background */
  --n-100:           #f4f4f5;      /* subtle surface */
  --n-200:           #e4e4e7;      /* border */
  --n-300:           #d4d4d8;      /* stronger border */
  --n-400:           #a1a1aa;      /* muted text */
  --n-500:           #71717a;      /* secondary text */
  --n-600:           #52525b;      /* primary text */
  --n-700:           #3f3f46;      /* heading */
  --n-800:           #27272a;      /* strong heading */
  --n-900:           #18181b;      /* near-black */
  --white:           #ffffff;

  /* ─── STATUS (muted, no vibrant red/green) ──────────────────────── */
  --ok:              #15803d;      /* dark forest green */
  --ok-soft:         #f0fdf4;
  --warn:            #b45309;      /* amber dark */
  --warn-soft:       #fffbeb;
  --err:             #991b1b;      /* deep red */
  --err-soft:        #fef2f2;
  --info:            #1e40af;      /* deep blue */
  --info-soft:       #eff6ff;

  /* ─── TYPOGRAPHY ────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --fs-xs:           11px;
  --fs-sm:           12px;
  --fs-base:         14px;
  --fs-md:           15px;
  --fs-lg:           17px;
  --fs-xl:           20px;
  --fs-2xl:          24px;
  --fs-3xl:          30px;

  --lh-tight:        1.25;
  --lh-snug:         1.4;
  --lh-normal:       1.6;

  --fw-normal:       400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;

  /* ─── SPACING (4px rhythm) ─────────────────────────────────────── */
  --sp-0:            0;
  --sp-1:            4px;
  --sp-2:            8px;
  --sp-3:            12px;
  --sp-4:            16px;
  --sp-5:            20px;
  --sp-6:            24px;
  --sp-8:            32px;
  --sp-10:           40px;
  --sp-12:           48px;
  --sp-16:           64px;
  --sp-20:           80px;

  /* ─── RADIUS ────────────────────────────────────────────────────── */
  --r-sm:            4px;
  --r-md:            8px;
  --r-lg:            12px;
  --r-xl:            16px;
  --r-full:          9999px;

  /* ─── SHADOW (minimal, mostly use borders) ─────────────────────── */
  --shadow-sm:       0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow:          0 1px 3px rgba(24, 24, 27, 0.05), 0 1px 2px rgba(24, 24, 27, 0.03);
  --shadow-md:       0 4px 6px -1px rgba(24, 24, 27, 0.06), 0 2px 4px -2px rgba(24, 24, 27, 0.04);
  --shadow-lg:       0 10px 15px -3px rgba(24, 24, 27, 0.08), 0 4px 6px -4px rgba(24, 24, 27, 0.04);

  /* ─── LAYOUT ────────────────────────────────────────────────────── */
  --container-max:   1200px;
  --app-mobile-max:  480px;          /* mobile shell width */
  --header-h:        56px;
  --bnav-h:          64px;

  /* ─── ICON SIZE ─────────────────────────────────────────────────── */
  --icon-xs:         14px;
  --icon-sm:         16px;
  --icon-md:         20px;
  --icon-lg:         24px;
  --icon-xl:         32px;

  /* ─── TRANSITION ───────────────────────────────────────────────── */
  --transition-fast:  120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:       180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode reserved (Phase 4) — placeholder */
@media (prefers-color-scheme: dark) {
  /* :root { ... } */
}