/* ============================================================
   CryptoConvert — Shared design system (public pages)
   One source of truth for: design tokens (light + dark), base
   reset, accessibility, nav bar, theme toggle, and shared buttons.
   Page-specific styling stays in each page's own <style> block,
   loaded AFTER this file so it can extend/override.
   ============================================================ */

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

/* ── Design tokens (light) ──────────────────────────────── */
:root{
  /* Refined forest greens */
  --g50:#edf7ef;--g100:#d4ecd9;--g200:#a8d8b3;--g300:#6db987;
  --g400:#3a9962;--g500:#1d7a48;--g600:#155e38;--g700:#0d4225;--g800:#082b17;
  /* Warm-biased slate */
  --s50:#faf9f6;--s100:#f3f1eb;--s200:#e6e2d8;--s300:#c9c3b3;
  --s400:#9a9485;--s500:#6c6859;--s600:#4a473d;--s700:#2e2c25;
  --s800:#1c1b16;--s900:#0e0d0a;
  --white:#fff;
  --surface:#fff;
  /* Accent families (used by individual pages) */
  --amber50:#fdf6e3;--amber100:#fae8b8;--amber500:#c08a2a;--amber600:#8a6418;
  --violet50:#f1ecf8;--violet100:#dccdf0;--violet600:#5d3b8e;
  --red50:#fdf2f2;--red500:#b13030;--red600:#8a2424;
  /* Radii */
  --r8:6px;--r12:10px;--r16:14px;--r20:18px;--r28:24px;
  /* Shadows */
  --sh-xs:0 1px 2px rgba(28,27,22,.04),0 1px 3px rgba(28,27,22,.06);
  --sh-sm:0 2px 6px rgba(28,27,22,.06),0 1px 3px rgba(28,27,22,.04);
  --sh-md:0 4px 18px rgba(28,27,22,.08),0 2px 6px rgba(28,27,22,.05);
  --sh-lg:0 12px 44px rgba(13,66,37,.14),0 4px 12px rgba(28,27,22,.06);
  --sh-g:0 4px 24px rgba(29,122,72,.22);
  /* Motion */
  --ease:.22s cubic-bezier(.4,0,.2,1);
  --ease-out:.42s cubic-bezier(.16,.84,.30,1);
  /* Type */
  --ff-display:'Geist',ui-sans-serif,-apple-system,system-ui,sans-serif;
  --ff-body:'Geist',ui-sans-serif,-apple-system,system-ui,sans-serif;
  --ff-mono:'Geist Mono',ui-monospace,'SF Mono','JetBrains Mono',monospace;
}

/* ── Design tokens (dark) — soft charcoal-green, off-white text ── */
[data-theme="dark"]{
  --g50:#15271d;--g100:#1d3829;
  --s50:#101413;--s100:#161b18;--s200:#222825;--s300:#333b36;
  --s400:#79837c;--s500:#98a29b;--s600:#b9c1bb;--s700:#d2d9d3;
  --s800:#e6ebe6;--s900:#eef2ed;
  --surface:#181f1b;
  --amber50:#2a2410;--amber100:#3a3216;--amber600:#e0a93c;
  --red50:#2a1414;--red500:#f0a3a3;--red600:#f0a3a3;
  --sh-xs:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
  --sh-sm:0 2px 6px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.5);
  --sh-md:0 4px 18px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.45);
  --sh-lg:0 12px 44px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.5);
  --sh-g:0 4px 24px rgba(29,122,72,.4);
  color-scheme:dark;
}

/* ── Base ───────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);background:var(--s50);color:var(--s900);min-height:100vh;min-height:100dvh;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","ss02"}
/* Subtle grain overlay — adds analogue depth */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.02}

/* ── Accessibility foundations ── */
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--g500);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
.skip-link{position:fixed;top:10px;left:10px;z-index:1000;background:var(--g700);color:#fff;
  padding:11px 18px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;
  transform:translateY(-150%);transition:transform var(--ease);box-shadow:var(--sh-lg)}
.skip-link:focus{transform:translateY(0)}
.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}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── Editorial helpers ── */
.num{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ed{font-weight:800}
.smallcaps{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}

/* ── Nav bar ────────────────────────────────────────────── */
.cc-nav{position:sticky;top:0;z-index:1000;
  /* grow by the top safe-area inset so the bar never sits under the notch/status bar
     (needs viewport-fit=cover in the meta viewport; 0 on desktop where there's no inset) */
  height:calc(68px + env(safe-area-inset-top, 0px));
  padding:env(safe-area-inset-top, 0px) max(24px,calc((100vw - 1160px)/2)) 0;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.82);backdrop-filter:blur(22px) saturate(1.9);
  -webkit-backdrop-filter:blur(22px) saturate(1.9);
  border-bottom:1px solid rgba(34,197,94,.10);
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 2px 20px rgba(0,0,0,.04);
  transition:background var(--ease),box-shadow var(--ease)}
.cc-nav.scrolled{background:rgba(255,255,255,.97);box-shadow:0 2px 28px rgba(0,0,0,.08)}
.cc-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-svg{width:38px;height:38px;flex-shrink:0}
/* Wordmark matches the brand logo: one bold weight, single color (no green accent) */
.logo-wordmark{font-size:18px;font-weight:700;color:var(--s900);letter-spacing:-.02em;font-feature-settings:"ss01"}
.logo-wordmark em{font-style:normal;font-weight:700;color:inherit;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{position:relative;font-size:14px;font-weight:500;color:var(--s600);
  padding:8px 4px;margin:0 12px;text-decoration:none;transition:color var(--ease)}
.nav-links a::after{content:'';position:absolute;left:4px;right:4px;bottom:4px;height:1px;
  background:var(--g600);transform:scaleX(0);transform-origin:left;transition:transform var(--ease-out)}
.nav-links a:hover{color:var(--g700)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:9px}
.btn-ghost-nav{font-size:13px;font-weight:600;color:var(--s700);padding:8px 16px;
  border-radius:var(--r8);border:1.5px solid var(--s200);background:transparent;
  text-decoration:none;transition:all var(--ease);cursor:pointer}
.btn-ghost-nav:hover{border-color:var(--g400);color:var(--g600);background:var(--g50)}
.btn-green-nav{font-size:13px;font-weight:700;color:var(--white);padding:9px 20px;
  border-radius:var(--r8);border:none;white-space:nowrap;
  background:linear-gradient(135deg,var(--g500),var(--g700));
  box-shadow:0 2px 10px rgba(34,197,94,.32);text-decoration:none;
  transition:all var(--ease);cursor:pointer;display:inline-block}
.btn-green-nav:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(34,197,94,.42);color:var(--white)}
.btn-green-nav .bgn-short{display:none}
.btn-back{font-size:13px;font-weight:500;color:var(--s600);padding:8px 16px;
  border-radius:var(--r8);border:1.5px solid var(--s200);background:transparent;
  text-decoration:none;transition:all var(--ease);white-space:nowrap}
.btn-back:hover{border-color:var(--g400);color:var(--g700)}

/* ── Theme toggle (supports both .ic-* and .icon-* icon naming) ── */
.theme-toggle{width:38px;height:38px;flex-shrink:0;border-radius:var(--r8);
  border:1.5px solid var(--s200);background:var(--surface);color:var(--s600);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all var(--ease);padding:0}
.theme-toggle:hover{border-color:var(--g400);color:var(--g600);background:var(--g50)}
.theme-toggle svg{width:18px;height:18px}
/* .ic-* convention (index, order, bayar): light shows moon, dark shows sun */
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
[data-theme="dark"] .theme-toggle .ic-sun{display:block}
[data-theme="dark"] .theme-toggle .ic-moon{display:none}
/* .icon-* convention (bukti, cek-transaksi): light shows sun, dark shows moon */
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* ── Shared dark overrides for chrome ── */
[data-theme="dark"] .cc-nav{background:rgba(16,20,18,.85);border-bottom-color:rgba(58,153,98,.20);
  box-shadow:0 1px 0 rgba(0,0,0,.3),0 2px 18px rgba(0,0,0,.4)}
[data-theme="dark"] .cc-nav.scrolled{background:rgba(16,20,18,.97);box-shadow:0 2px 28px rgba(0,0,0,.55)}
[data-theme="dark"] .logo-wordmark em{color:inherit}
[data-theme="dark"] .btn-back:hover,
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .btn-ghost-nav:hover{color:var(--g300);border-color:var(--g400)}

/* ── Mobile performance guard ───────────────────────────────
   The grain overlay (mix-blend-mode) and the nav's backdrop-filter:blur are
   very expensive to RE-COMPOSITE on throttled mobile CPUs — they were the main
   cause of high main-thread/paint time (Lighthouse). Drop them on small screens
   (the grain is imperceptible at this opacity anyway) and use a solid-ish nav. */
@media (max-width: 768px){
  body::after{display:none !important}
  .cc-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)}
  [data-theme="dark"] .cc-nav{background:rgba(16,20,18,.97)}
}