/* =============================================================================
   tokens.css — Signal by Rheinmarx
   Design tokens dari 02_DESIGN_SYSTEM.md — CSS Custom Properties.
   JANGAN improvisasi nilai di luar file ini.
   ref: 02_DESIGN_SYSTEM.md §1–§5
   ============================================================================= */

/* Import Google Fonts — Inter (display/body) + JetBrains Mono (data/harga) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
   §1 Warna (Design Tokens)
   ref: 02_DESIGN_SYSTEM.md §1
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Background hierarchy */
  --color-bg:          #0B0F14;  /* Base page background */
  --color-surface:     #11161D;  /* Card & panel background */
  --color-elevated:    #171D26;  /* Card hover, modal */
  --color-border:      #27303B;  /* Border 1px */

  /* Text */
  --color-text-primary:   #F3F6FA;  /* Judul, angka utama */
  --color-text-secondary: #A7B0BA;  /* Label, deskripsi */
  --color-text-muted:     #5E748C;  /* Disabled, placeholder */

  /* Semantic colors */
  --color-bullish:  #3CB179;   /* Naik, LONG, positif */
  --color-bearish:  #D45C5C;   /* Turun, SHORT, risiko HIGH */
  --color-warning:  #E0A94A;   /* Alert, risiko MEDIUM */
  --color-neutral:  #5E748C;   /* Aksen netral, ikon sekunder */

  /* Severity badge backgrounds (lower opacity untuk badge fill) */
  --color-bullish-bg: rgba(60, 177, 121, 0.15);
  --color-bearish-bg: rgba(212, 92, 92, 0.15);
  --color-warning-bg: rgba(224, 169, 74, 0.15);
  --color-neutral-bg: rgba(94, 116, 140, 0.15);

  /* ─────────────────────────────────────────────────────────────────────────
     §2 Tipografi
     ───────────────────────────────────────────────────────────────────────── */
  --font-display: 'Inter', system-ui, sans-serif;         /* Judul/display */
  --font-body:    'Inter', system-ui, sans-serif;         /* Body/UI label */
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace; /* Data/harga/angka */

  /* Font weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Font sizes */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;

  /* ─────────────────────────────────────────────────────────────────────────
     §3 Spacing Scale (px)
     ref: 02_DESIGN_SYSTEM.md §3 — "4, 8, 12, 16, 24, 32"
     ───────────────────────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;

  /* ─────────────────────────────────────────────────────────────────────────
     §4 Radius
     ref: 02_DESIGN_SYSTEM.md §4 — "10, 14, 18"
     ───────────────────────────────────────────────────────────────────────── */
  --radius-sm:  10px;  /* Badge, button kecil */
  --radius-md:  14px;  /* Card standar */
  --radius-lg:  18px;  /* Container utama, modal */

  /* ─────────────────────────────────────────────────────────────────────────
     §5 Efek Visual
     ref: 02_DESIGN_SYSTEM.md §5
     ───────────────────────────────────────────────────────────────────────── */
  --blur-sm:      blur(8px);
  --blur-md:      blur(12px);
  --blur-lg:      blur(16px);

  --shadow-card:  0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.45);

  --border-card:  1px solid rgba(39, 48, 59, 0.6);  /* border-slate-700/60 */
  --border-focus: 1px solid var(--color-neutral);

  /* ─────────────────────────────────────────────────────────────────────────
     §12 Motion / Animasi
     ref: 02_DESIGN_SYSTEM.md §12
     ───────────────────────────────────────────────────────────────────────── */
  --transition-hover:    120ms ease-out;
  --transition-press:    80ms ease-in;
  --transition-drawer:   220ms ease-out;
  --transition-fade:     350ms ease;    /* Price flash */
  --transition-shimmer:  1.5s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reset & Base
   ─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 13px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family:       var(--font-body);
  font-weight:       var(--fw-regular);
  background-color:  var(--color-bg);
  color:             var(--color-text-primary);
  line-height:       1.5;
  min-height:        100vh;
  overflow-x:        hidden;
  /* Antialiasing */
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tabular numerals untuk semua font mono (harga, angka data)
   ref: 02_DESIGN_SYSTEM.md §2
   ─────────────────────────────────────────────────────────────────────────── */
.font-mono, .price, .data-value, .ticker-price, [data-mono] {
  font-family:        var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing:     -0.02em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Card base
   ref: 02_DESIGN_SYSTEM.md §10 "Cards: rounded-2xl border border-slate-700/60 bg-slate-900/70 backdrop-blur"
   ─────────────────────────────────────────────────────────────────────────── */
.card {
  background:     var(--color-surface);
  border:         var(--border-card);
  border-radius:  var(--radius-md);
  box-shadow:     var(--shadow-card);
  padding:        var(--space-4);
  position:       relative;
  overflow:       hidden;
  transition:     background var(--transition-hover), border-color var(--transition-hover),
                  transform var(--transition-hover), box-shadow var(--transition-hover);
}

/* Glass card variant */
.card-glass {
  background:     rgba(17, 22, 29, 0.7);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
}

/* Hover — elevasi ringan + border brighten */
.card:hover {
  background:    var(--color-elevated);
  border-color:  rgba(94, 116, 140, 0.5);
  transform:     translateY(-1px);
  box-shadow:    var(--shadow-elevated);
}

/* Press — inset shadow */
.card:active {
  transform:  translateY(0);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Badge / Pill
   ─────────────────────────────────────────────────────────────────────────── */
.badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  padding:         2px var(--space-2);
  border-radius:   var(--radius-sm);
  font-size:       var(--fs-xs);
  font-weight:     var(--fw-semibold);
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  white-space:     nowrap;
}

.badge-bullish { background: var(--color-bullish-bg); color: var(--color-bullish); }
.badge-bearish { background: var(--color-bearish-bg); color: var(--color-bearish); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-neutral { background: var(--color-neutral-bg); color: var(--color-neutral); }

.badge-HIGH    { background: var(--color-bearish-bg); color: var(--color-bearish); }
.badge-MEDIUM  { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-LOW     { background: var(--color-neutral-bg); color: var(--color-neutral); }

/* Grade badges (A+/A/B) */
.badge-grade-aplus { background: rgba(60,177,121,0.2); color: #3CB179; border: 1px solid rgba(60,177,121,0.4); }
.badge-grade-a     { background: rgba(60,177,121,0.12); color: #5EC98D; border: 1px solid rgba(60,177,121,0.25); }
.badge-grade-b     { background: rgba(224,169,74,0.12); color: #E0A94A; border: 1px solid rgba(224,169,74,0.25); }
.badge-grade-c     { background: rgba(94,116,140,0.12); color: #A7B0BA; border: 1px solid rgba(94,116,140,0.25); }

/* ─────────────────────────────────────────────────────────────────────────────
   Warna teks semantic
   ─────────────────────────────────────────────────────────────────────────── */
.text-bullish { color: var(--color-bullish); }
.text-bearish { color: var(--color-bearish); }
.text-warning { color: var(--color-warning); }
.text-neutral { color: var(--color-neutral); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted   { color: var(--color-text-muted); }

/* ─────────────────────────────────────────────────────────────────────────────
   §8 Micro-Interactions — Price Flash
   ref: 02_DESIGN_SYSTEM.md §8 "flash hijau/merah, fade 350ms kembali netral"
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes priceFlashUp {
  0%   { background: rgba(60, 177, 121, 0.35); color: #3CB179; }
  70%  { background: rgba(60, 177, 121, 0.15); }
  100% { background: transparent; color: inherit; }
}
@keyframes priceFlashDown {
  0%   { background: rgba(212, 92, 92, 0.35); color: #D45C5C; }
  70%  { background: rgba(212, 92, 92, 0.15); }
  100% { background: transparent; color: inherit; }
}
.price-flash-up   { animation: priceFlashUp   var(--transition-fade) ease forwards; }
.price-flash-down { animation: priceFlashDown var(--transition-fade) ease forwards; }

/* New Alert pulse — amber ring */
@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(224,169,74,0); }
  50%       { box-shadow: 0 0 0 4px rgba(224,169,74,0.5); }
}
.alert-pulse { animation: alertPulse 1.5s ease infinite; }

/* ─────────────────────────────────────────────────────────────────────────────
   Loading Skeleton Shimmer
   ref: 02_DESIGN_SYSTEM.md §8 "skeleton shimmer, bukan spinner"
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface)    25%,
    var(--color-elevated)   50%,
    var(--color-surface)    75%
  );
  background-size:    800px 100%;
  animation:          shimmer var(--transition-shimmer);
  border-radius:      var(--radius-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Progress bar (Bandarmology Score Widget)
   ref: 02_DESIGN_SYSTEM.md §6G
   ─────────────────────────────────────────────────────────────────────────── */
.progress-bar {
  width:         100%;
  height:        6px;
  background:    var(--color-border);
  border-radius: 3px;
  overflow:      hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 600ms ease, background 400ms ease;
}
.progress-bar-fill[data-score] {
  background: linear-gradient(90deg, var(--color-bearish), var(--color-warning) 50%, var(--color-bullish));
}

/* ─────────────────────────────────────────────────────────────────────────────
   Divider
   ─────────────────────────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-3) 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Scrollbar styling (minimal, dark)
   ─────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-neutral); }

/* ─────────────────────────────────────────────────────────────────────────────
   Utility classes
   ─────────────────────────────────────────────────────────────────────────── */
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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; }
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1       { gap: var(--space-1); }
.gap-2       { gap: var(--space-2); }
.gap-3       { gap: var(--space-3); }
.gap-4       { gap: var(--space-4); }
.w-full      { width: 100%; }
.mt-2        { margin-top: var(--space-2); }
.mt-3        { margin-top: var(--space-3); }
.mt-4        { margin-top: var(--space-4); }

/* ─────────────────────────────────────────────────────────────────────────────
   Breakpoint: tidak ada style layout di sini — layout di index.html via Tailwind
   Tokens ini murni design variables, bukan layout rules.
   ref: 02_DESIGN_SYSTEM.md §10 "Tailwind reference snippets"
   ─────────────────────────────────────────────────────────────────────────── */