/* ============================================================
   SIKASIR LEARNING CONSOLE — Design Tokens
   Konsep visual: "IDE + Mesin Kasir" — editor gelap ala kode
   dipadu dengan elemen struk kertas kasir sebagai signature.
   ============================================================ */

:root {
  /* ---- Warna dasar (editor / console) ---- */
  --bg: #0E1416;
  --bg-elevated: #141C1F;
  --panel: #182225;
  --panel-2: #1E2A2E;
  --border: #2A383D;
  --border-soft: #223034;

  /* ---- Teks ---- */
  --text: #E8F1EF;
  --text-muted: #90A6AA;
  --text-faint: #5C6E72;

  /* ---- Aksen ---- */
  --mint: #4FE3BE;
  --mint-dim: #2E8C77;
  --amber: #EFA23F;
  --amber-dim: #B9791F;
  --red: #FF6B6A;
  --red-dim: #C24847;
  --blue: #6FB6FF;

  /* ---- Struk kertas kasir (signature element) ---- */
  --paper: #F4EEDD;
  --paper-shadow: #D8CFB4;
  --paper-ink: #2B2620;
  --paper-ink-soft: #6B5F45;

  /* ---- Tipografi ---- */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* ---- Skala ukuran ---- */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.85rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.2rem;

  /* ---- Spasi ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* ---- Radius & bayangan ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-panel: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-glow-mint: 0 0 0 1px rgba(79, 227, 190, 0.35), 0 0 24px -4px rgba(79, 227, 190, 0.35);

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --topbar-h: 56px;
  --content-max: 980px;

  /* ---- Transisi ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-med: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}