/* ================================================================
   SIGMA - Design Tokens
   File 1 of 5: CSS custom properties only.

   PRIMARY mode: LIGHT (Eco-Forest palette) - production UI default.
   Dark mode tetap support (untuk preferensi OS dark / power user).

   Browser detection logic (di base.html):
   - saved=dark         → dark
   - !saved & OS=dark   → dark
   - else               → light (default)
   ================================================================ */

/* ----------------------------------------------------------------
   Root tokens (dark mode default)
   ---------------------------------------------------------------- */
:root {
    /* ── Typography ─────────────────────────────────────────────── */
    --font:      'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-d:    'DM Serif Display', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Fira Code', monospace;

    /* ── Type scale ─────────────────────────────────────────────── */
    --text-xs:   0.6875rem;   /* 11px - badges, labels */
    --text-sm:   0.75rem;     /* 12px - meta, secondary */
    --text-base: 0.875rem;    /* 14px - body default */
    --text-md:   1rem;        /* 16px - slightly larger body */
    --text-lg:   1.125rem;    /* 18px - section titles */
    --text-xl:   1.375rem;    /* 22px - page titles */
    --text-2xl:  1.75rem;     /* 28px - display (DM Serif Display) */
    --text-3xl:  2.25rem;     /* 36px - hero numbers */

    /* ── Spacing scale (4px grid) ───────────────────────────────── */
    --sp-0:  0;
    --sp-1:  0.25rem;   /* 4px */
    --sp-2:  0.5rem;    /* 8px */
    --sp-3:  0.75rem;   /* 12px */
    --sp-4:  1rem;      /* 16px */
    --sp-5:  1.25rem;   /* 20px */
    --sp-6:  1.5rem;    /* 24px */
    --sp-8:  2rem;      /* 32px */
    --sp-10: 2.5rem;    /* 40px */
    --sp-12: 3rem;      /* 48px */
    --sp-16: 4rem;      /* 64px */

    /* ── Border radius ──────────────────────────────────────────── */
    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-full: 9999px;

    /* ── Transitions ────────────────────────────────────────────── */
    --t-fast:   120ms ease;
    --t-base:   200ms ease;
    --t-slow:   300ms ease;
    --t-spring: 350ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Z-index scale ──────────────────────────────────────────── */
    --z-dropdown: 200;
    --z-sticky:   9990;
    --z-modal:    9993;
    --z-toast:    9995;
    --z-tooltip:  9999;

    /* ── App shell dimensions ───────────────────────────────────── */
    --sidebar-w:           235px;
    --sidebar-w-collapsed:  56px;
    --navbar-h:             56px;
    --content-max:          90rem;
    --sidebar-link-h:       2.25rem;

    /* ── Dark mode surface colors (default) ─────────────────────── */
    /* --bg:              #080f10; */
    --bg:              #030b03;
    --bg-1:            #091d1b;
    /* --surface:         rgba(13,22,26,0.82); */
    --surface:         rgba(14, 37, 28, 0.82);
    /* --surface-raised:  rgba(22,34,40,0.88); */
    --surface-raised:  rgba(6, 22, 15, 1);
    --surface-sunken:  rgba(5,10,12,0.85);

    /* ── Surface aliases (bg0–bg3 shorthand) ────────────────────── */
    --bg0: var(--bg);             /* page background */
    --bg1: var(--surface-raised); /* card / panel */
    --bg2: var(--bg-1);           /* hover state */
    --bg3: #0d2a1e;               /* active / selected */

    /* ── Dark mode border ───────────────────────────────────────── */
    --border-subtle:  rgba(255,255,255,0.06);
    --border:         rgba(255,255,255,0.05);
    --border-strong:  rgba(255,255,255,0.15);

    /* ── Dark mode text ─────────────────────────────────────────── */
    --text:       #ddebd4;
    --text-muted: #7fa88e;
    --text-faint: #456655;
    --text-inverse: #080f10;

    /* ── Accent (green) ─────────────────────────────────────────── */
    /* --accent:       #22d97c; */
    /* --accent-hover: #1bbf6b; */
    --accent:       #0f9e58;
    --accent-hover: #1bbf6b;
    --accent-light: rgba(34,217,124,0.11);
    --accent-ring:  rgba(34,217,124,0.28);
    --on-accent:    #031209;

    /* ── Semantic colors ────────────────────────────────────────── */
    --success-text:   #3fb950;
    --success-bg:     rgba(63,185,80,0.13);
    --success-border: rgba(63,185,80,0.28);

    --warning-text:   #e0a422;
    --warning-bg:     rgba(224,164,34,0.13);
    --warning-border: rgba(224,164,34,0.28);

    --danger-text:    rgba(195,49,42,1);
    --danger-bg:      rgba(195,49,42,0.13);
    --danger-border:  rgba(195,49,42,0.28);

    --info-text:      #58a6ff;
    --info-bg:        rgba(88,166,255,0.11);
    --info-border:    rgba(88,166,255,0.26);

    --teal:        #2dd4bf;
    --teal-bg:     rgba(45,212,191,0.11);
    --teal-border: rgba(45,212,191,0.26);

    /* ── Shadow ─────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.45);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.45);
    --shadow:    0 4px 20px rgba(0,0,0,0.55);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.55);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.65);

    /* Navbar + modal overlay */
    --navbar-bg:     rgba(6,12,14,0.80);
    --navbar-border: rgba(255,255,255,0.055);
    --overlay:       rgba(0,0,0,0.72);

    /* Button shadows */
    --shadow-btn:       0 4px 20px rgba(34,217,124,0.30);
    --shadow-btn-hover: 0 6px 28px rgba(34,217,124,0.40);

    /* ── Form radius ────────────────────────────────────────────── */
    --radius-btn:   8px;
    --radius-input: 8px;

    /* ── Aurora blob colors ─────────────────────────────────────── */
    --blob-1: rgba(34,217,124,0.14);
    --blob-2: rgba(45,212,191,0.09);
    --blob-3: rgba(34,217,124,0.055);

    /* modal */
    --modal-bg: #06160f;
    --modal-header-bg: #0c2417;
    --modal-footer-bg: #0c2417;
    --modal-btn-close-bg: ;
}

/* ================================================================
   Light mode - Eco-Forest palette (PRIMARY mode untuk SIGMA v2)
   ----------------------------------------------------------------
   Karakter:
   - Background sedikit sage (hint hijau hutan, bukan putih clinical)
   - Surface solid (white + raised + sunken) - clear hierarchy via shadow
   - Accent deep moss green (KSDAE identity, AA contrast on white)
   - Semantic tinta semua dimoderasi (mute brick, deep amber, forest sky)
   - Shadow warm dengan tinta hijau samar - bukan abu-abu netral
   - Aurora blob & overlay → forest-tinted (bukan pure black)
   ================================================================ */
[data-theme="light"] {
    /* ── Backgrounds - subtle sage off-white ───────────────────── */
    --bg:              #eaf3ec;
    --bg-1:            #f6faf7;

    /* ── Surfaces - solid (untuk konsistensi + clarity) ────────── */
    --surface:         #f8fbf9;
    --surface-raised:  #ffffff;
    --surface-sunken:  #ebf2ed;

    /* ── Surface aliases (bg0–bg3 shorthand) ────────────────────── */
    --bg0: var(--bg);             /* page background */
    --bg1: var(--surface-raised); /* card / panel */
    --bg2: var(--bg-1);           /* hover state */
    --bg3: var(--surface-sunken); /* active / selected */

    /* ── Borders - green-tinted, naik 1 step supaya tabel/divider jelas ─── */
    --border-subtle:  rgba(15, 50, 30, 0.09);
    --border:         rgba(15, 50, 30, 0.14);
    --border-strong:  rgba(15, 50, 30, 0.26);

    /* ── Text - deep forest (AAA contrast on white) ────────────── */
    --text:        #16291e;          /* deep forest near-black */
    --text-muted:  #486050;          /* forest gray, AA */
    --text-faint:  #7c948a;          /* sage muted, gunakan untuk meta */
    --text-inverse: #ffffff;

    /* ── Accent - deep moss green (KSDAE) ──────────────────────── */
    --accent:       #0d7a43;
    --accent-hover: #096835;
    --accent-light: rgba(13, 122, 67, 0.10);
    --accent-ring:  rgba(13, 122, 67, 0.25);
    --on-accent:    #ffffff;

    /* ── Semantic - moderated (harmonis dengan hijau utama) ────── */
    /* Success - slightly brighter than accent supaya bisa dibedakan */
    --success-text:   #1d8f4a;
    --success-bg:     #d8efde;
    --success-border: #b0d8bb;

    /* Warning - deep amber (bukan mustard kusam) */
    --warning-text:   #b4630a;
    --warning-bg:     #fdf1cd;
    --warning-border: #f0d188;

    /* Danger - mute brick (formal, tidak strident) */
    --danger-text:    #a83232;
    --danger-bg:      #fce0de;
    --danger-border:  #f3b3af;

    /* Info - forest sky blue (jelas distinct dari accent green) */
    --info-text:      #2563a8;
    --info-bg:        #dcebf8;
    --info-border:    #b0d0ed;

    /* ── Teal - laut/sungai variant ────────────────────────────── */
    --teal:        #138b80;
    --teal-bg:     rgba(19, 139, 128, 0.10);
    --teal-border: rgba(19, 139, 128, 0.28);

    /* ── Shadows - forest-tinted, soft & layered ───────────────── */
    --shadow-xs: 0 1px 2px rgba(15, 50, 30, 0.05);
    --shadow-sm: 0 2px 6px rgba(15, 50, 30, 0.06), 0 1px 2px rgba(15, 50, 30, 0.04);
    --shadow:    0 4px 12px rgba(15, 50, 30, 0.08), 0 2px 4px rgba(15, 50, 30, 0.04);
    --shadow-md: 0 6px 18px rgba(15, 50, 30, 0.10), 0 2px 6px rgba(15, 50, 30, 0.04);
    --shadow-lg: 0 12px 30px rgba(15, 50, 30, 0.12), 0 4px 8px rgba(15, 50, 30, 0.04);

    /* ── Navbar - opaque dengan tinta sage tipis ───────────────── */
    --navbar-bg:     rgba(248, 251, 249, 0.92);
    --navbar-border: rgba(15, 50, 30, 0.10);

    /* ── Modal overlay - forest-tinted dark (bukan pure black) ── */
    --overlay:       rgba(20, 40, 28, 0.40);

    /* ── Button glow shadows - match accent ────────────────────── */
    --shadow-btn:       0 4px 16px rgba(13, 122, 67, 0.22);
    --shadow-btn-hover: 0 6px 22px rgba(13, 122, 67, 0.32);

    /* ── Aurora blob - sangat samar (decorative bg) ────────────── */
    --blob-1: rgba(13, 122, 67, 0.10);
    --blob-2: rgba(19, 139, 128, 0.07);
    --blob-3: rgba(13, 122, 67, 0.05);

    /* ── Modal - clean white dengan footer sage ─────────────────── */
    --modal-bg:        #ffffff;
    --modal-header-bg: #ffffff;
    --modal-footer-bg: #f4f8f5;
    --modal-btn-close-bg: transparent;
}