/* Hallmark · tokens · genre: modern-minimal · theme: custom (vibe: "meja kerja trader, tenang, presisi")
 * paper oklch(98.2% 0.004 85) batu hangat · aksen = tinta (netral) · Geist + Geist Mono untuk angka
 * axes: light / geometric-sans + mono / neutral
 * Warna profit/rugi & seri grafik sudah lolos validator dataviz (CVD ΔE ≥ 8) di kedua mode.
 */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --color-paper:       oklch(98.2% 0.004 85);
  --color-paper-2:     oklch(96.2% 0.005 85);
  --color-surface:     oklch(99.5% 0.002 85);
  --color-rule:        oklch(91.2% 0.006 85);
  --color-rule-strong: oklch(83% 0.008 85);
  --color-neutral:     oklch(62% 0.010 80);
  --color-muted:       oklch(46% 0.010 80);
  --color-ink:         oklch(21% 0.010 80);
  --color-ink-inverse: oklch(98% 0.004 85);
  --color-accent:      oklch(21% 0.010 80);   /* aksen = tinta; hijau/merah sudah membawa makna */
  --color-accent-ink:  oklch(98% 0.004 85);
  --color-focus:       oklch(52% 0.17 255);
  --color-link:        oklch(46% 0.15 255);

  /* Profit / rugi — isian grafik (mark) dan versi teks (kontras ≥ 4.5:1) */
  --color-gain:        #12a37f;
  --color-loss:        #d8433f;
  --color-gain-text:   oklch(43% 0.10 170);
  --color-loss-text:   oklch(49% 0.17 27);
  --color-gain-soft:   oklch(95.5% 0.030 170);
  --color-loss-soft:   oklch(95.5% 0.025 27);
  --color-gain-mid:    oklch(89% 0.060 170);
  --color-loss-mid:    oklch(89% 0.055 27);

  --color-series:      #2a78d6;
  --color-series-wash: oklch(58% 0.15 255 / 0.10);
  --color-warn-text:   oklch(47% 0.11 70);
  --color-warn-soft:   oklch(95.5% 0.04 85);
  --color-star:        oklch(74% 0.15 78);
  --color-warn:        oklch(72% 0.14 75);
  --color-meter:       oklch(46% 0.010 80);
  --color-meter-track: oklch(91.2% 0.006 85);
  --color-shadow:      oklch(21% 0.010 80 / 0.16);
  --color-scrim:       oklch(21% 0.010 80 / 0.45);

  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-md:  0.875rem;
  --text-lg:  1rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5625rem;
  --text-3xl: 2.125rem;
  --text-hero: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  --radius-input: 6px;
  --radius-card:  10px;
  --radius-pill:  999px;

  --control-h: 2.25rem;
  --sidebar-w: 14rem;
  --tabbar-h:  3.75rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 140ms;
  --dur-med: 220ms;

  --z-raised: 10;
  --z-sticky: 200;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* Mode gelap: ikut perangkat, kecuali dipilih sendiri (data-theme diisi theme.js).
   Blok ini ada DUA — ubah keduanya. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper:       oklch(15.5% 0.006 80);
    --color-paper-2:     oklch(18.5% 0.007 80);
    --color-surface:     oklch(20% 0.007 80);
    --color-rule:        oklch(27% 0.008 80);
    --color-rule-strong: oklch(36% 0.010 80);
    --color-neutral:     oklch(58% 0.010 80);
    --color-muted:       oklch(72% 0.008 80);
    --color-ink:         oklch(94% 0.005 85);
    --color-ink-inverse: oklch(17% 0.006 80);
    --color-accent:      oklch(94% 0.005 85);
    --color-accent-ink:  oklch(17% 0.006 80);
    --color-focus:       oklch(70% 0.14 255);
    --color-link:        oklch(76% 0.11 255);
    --color-gain:        #10a58f;
    --color-loss:        #df4f4a;
    --color-gain-text:   oklch(76% 0.12 175);
    --color-loss-text:   oklch(73% 0.15 25);
    --color-gain-soft:   oklch(25% 0.035 175);
    --color-loss-soft:   oklch(25% 0.045 25);
    --color-gain-mid:    oklch(33% 0.060 175);
    --color-loss-mid:    oklch(33% 0.075 25);
    --color-series:      #3987e5;
    --color-series-wash: oklch(66% 0.15 255 / 0.12);
    --color-warn-text:   oklch(80% 0.11 80);
    --color-warn-soft:   oklch(27% 0.04 80);
    --color-star:        oklch(78% 0.14 80);
    --color-warn:        oklch(76% 0.13 78);
    --color-meter:       oklch(72% 0.008 80);
    --color-meter-track: oklch(27% 0.008 80);
    --color-shadow:      oklch(5% 0.005 80 / 0.5);
    --color-scrim:       oklch(5% 0.005 80 / 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper:       oklch(15.5% 0.006 80);
  --color-paper-2:     oklch(18.5% 0.007 80);
  --color-surface:     oklch(20% 0.007 80);
  --color-rule:        oklch(27% 0.008 80);
  --color-rule-strong: oklch(36% 0.010 80);
  --color-neutral:     oklch(58% 0.010 80);
  --color-muted:       oklch(72% 0.008 80);
  --color-ink:         oklch(94% 0.005 85);
  --color-ink-inverse: oklch(17% 0.006 80);
  --color-accent:      oklch(94% 0.005 85);
  --color-accent-ink:  oklch(17% 0.006 80);
  --color-focus:       oklch(70% 0.14 255);
  --color-link:        oklch(76% 0.11 255);
  --color-gain:        #10a58f;
  --color-loss:        #df4f4a;
  --color-gain-text:   oklch(76% 0.12 175);
  --color-loss-text:   oklch(73% 0.15 25);
  --color-gain-soft:   oklch(25% 0.035 175);
  --color-loss-soft:   oklch(25% 0.045 25);
  --color-gain-mid:    oklch(33% 0.060 175);
  --color-loss-mid:    oklch(33% 0.075 25);
  --color-series:      #3987e5;
  --color-series-wash: oklch(66% 0.15 255 / 0.12);
  --color-warn-text:   oklch(80% 0.11 80);
  --color-warn-soft:   oklch(27% 0.04 80);
  --color-star:        oklch(78% 0.14 80);
  --color-warn:        oklch(76% 0.13 78);
  --color-meter:       oklch(72% 0.008 80);
  --color-meter-track: oklch(27% 0.008 80);
  --color-shadow:      oklch(5% 0.005 80 / 0.5);
  --color-scrim:       oklch(5% 0.005 80 / 0.6);
}