/* =========================================================
   Ichigo Ramen POS — Design tokens & dasar
   Tema: Japanese Yatai — hitam arang, merah matte, cahaya lampion
   ========================================================= */

:root {
  /* Warna inti */
  --bg:          #1A1A1A;
  --surface:     #212121;
  --surface-2:   #2A2A2A;
  --surface-3:   #333333;

  --red:         #8B1E1E;
  --red-bright:  #A62727;
  --red-deep:    #6B1616;

  --gold:        #E8B04B;
  --gold-dim:    #C4923A;
  --gold-soft:   rgba(232, 176, 75, 0.14);

  --text:        #F5F0E8;
  --text-mid:    #C9C0B4;
  --text-dim:    #8A8178;

  --line:        rgba(232, 176, 75, 0.16);
  --line-strong: rgba(232, 176, 75, 0.34);

  --ok:          #4CAF6A;
  --warn:        #E8B04B;
  --danger:      #D9534F;

  /* Ukuran */
  --tap:        56px;   /* target sentuh minimum — tangan basah tetap kena */
  --radius:     14px;
  --radius-sm:  10px;
  --topbar-h:   62px;
  --tabbar-h:   66px;

  --shadow:     0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-sm:  0 4px 14px rgba(0, 0, 0, 0.4);

  /* Cahaya tipis di tepi atas permukaan — kesan logam yang dibubut halus.
     Detail sekecil ini yang membedakan "gelap" dari "mewah". */
  --kilau: inset 0 1px 0 rgba(255, 255, 255, 0.045);

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "Roboto Mono", ui-monospace, "Consolas", monospace;

  /* Satu kurva untuk seluruh aplikasi: berangkat tegas, mendarat pelan.
     Gerak yang konsisten terbaca sebagai ketenangan, bukan kelambatan. */
  --gerak: cubic-bezier(0.22, 1, 0.36, 1);
  --cepat: 0.16s var(--gerak);
  --sedang: 0.26s var(--gerak);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Latar bertekstur halus — kesan kanvas tenda yatai, tidak mengganggu keterbacaan */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -10%, rgba(232, 176, 75, 0.07), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(139, 30, 30, 0.10), transparent 50%);
  z-index: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3E3E3E; }

/* Cincin fokus emas — penting begitu aplikasi dipakai di laptop dengan keyboard.
   Hanya muncul saat navigasi papan ketik, tidak mengganggu sentuhan. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--gold-soft); color: var(--text); }

/* Hormati pengguna yang mematikan animasi di pengaturan perangkatnya. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}