/*
  Venom design tokens. Every colour a component uses comes from here, so the three
  theme states (no attribute = follow the OS, data-theme="light", data-theme="dark")
  can never disagree: light is the bare :root, dark is redefined twice below.

  Neutrals lean slightly toward the jade accent so greys read as chosen, not default.
  Status colours are separate from the accent: "paid" must never look like a button.
*/

:root {
  color-scheme: light;

  /* ground and surfaces */
  --bg: #f3f5f4;
  --surface: #ffffff;
  --surface-2: #f7f9f8;
  --surface-sunken: #eaeeec;
  --overlay: rgba(12, 20, 18, 0.44);

  /* lines */
  --border: #dde3e0;
  --border-strong: #c3ccc8;
  --divider: #e8ecea;

  /* text; --text-3 still clears 4.5:1 on --bg so hints stay readable */
  --text: #121a18;
  --text-2: #43504c;
  --text-3: #5f6b67;
  --text-inverse: #ffffff;

  /* accent: deep jade. Used for actions and focus only */
  --accent: #0b6b5b;
  --accent-hover: #09594c;
  --accent-press: #074a3f;
  --accent-soft: #e2f1ed;
  --accent-soft-2: #cbe6df;
  --accent-text: #08594b;
  --on-accent: #ffffff;
  --focus: #2f7ce0;

  /* status tones: text on soft fill, plus a solid for dots and bars */
  --ok: #1d7a45;
  --ok-soft: #e3f3e9;
  --ok-solid: #22a05a;
  --warn: #8a5300;
  --warn-soft: #fbf0d9;
  --warn-solid: #e3a008;
  --bad: #b3261e;
  --bad-soft: #fce8e6;
  --bad-solid: #dc3a2f;
  --info: #1d5aa6;
  --info-soft: #e5eefa;
  --info-solid: #3b82d6;
  --wait: #5b3fb8;
  --wait-soft: #eee9fb;
  --wait-solid: #7c5ce0;
  --muted: #56615d;
  --muted-soft: #edf0ef;
  --muted-solid: #9aa5a1;

  /* networks and assets: recognisable hues, muted so they label rather than shout */
  --net-tron: #c4112f;
  --net-tron-soft: #fbe6e9;
  --net-eth: #4a5cc2;
  --net-eth-soft: #e8ebfa;
  --net-venom: #0f8a6c;
  --net-venom-soft: #e0f3ee;
  --asset-usdt: #1f8f6c;
  --asset-usdc: #2468b5;
  --asset-venom: #0b6b5b;

  /* chart series (backoffice) */
  /* checked with the dataviz palette validator (lightness band, chroma, CVD) on --surface */
  --series-1: #00846a;
  --series-2: #4a5cc2;
  --series-3: #c77d12;
  --series-grid: #e3e8e6;

  /* type: system faces so screens make zero external requests */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-38: 2.375rem;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* spacing: 4 px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  /* radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* elevation: low and cool, so cards separate without looking like floating ads */
  --e-1: 0 1px 2px rgba(16, 32, 28, 0.06), 0 0 0 1px rgba(16, 32, 28, 0.04);
  --e-2: 0 2px 6px rgba(16, 32, 28, 0.07), 0 8px 24px rgba(16, 32, 28, 0.06);
  --e-3: 0 12px 40px rgba(16, 32, 28, 0.18), 0 2px 8px rgba(16, 32, 28, 0.08);

  /* layout */
  --content-max: 1200px;
  --chat-max: 720px;
  --sidebar-w: 248px;
  --tabbar-h: 64px;
  --topbar-h: 56px;

  /* Every rule reads the insets through these rather than env() directly, because an
     iframe never receives the device's insets: design/devices.html and the #24 check set
     them per frame (?safe=top,right,bottom,left), and ui.js zeroes the bottom one while
     the keyboard covers the home indicator. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Apple's minimum hit area; controls may look smaller, their tappable box may not */
  --hit: 44px;

  --t-fast: 120ms;
  --t-med: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1211;
    --surface: #151b1a;
    --surface-2: #1a2120;
    --surface-sunken: #0a0e0d;
    --overlay: rgba(0, 0, 0, 0.6);
    --border: #273130;
    --border-strong: #37443f;
    --divider: #202927;
    --text: #e9eeec;
    --text-2: #b4c0bc;
    --text-3: #8d9a96;
    --text-inverse: #0d1211;
    --accent: #3dbf9f;
    --accent-hover: #55cdaf;
    --accent-press: #2ea88a;
    --accent-soft: #15302a;
    --accent-soft-2: #1c4038;
    --accent-text: #6fd6bb;
    --on-accent: #062019;
    --focus: #6aa8ff;
    --ok: #6fd49a;
    --ok-soft: #143023;
    --ok-solid: #34b46b;
    --warn: #f0c060;
    --warn-soft: #33270f;
    --warn-solid: #e3a008;
    --bad: #ff8f86;
    --bad-soft: #3a1714;
    --bad-solid: #e5534b;
    --info: #8ab8f5;
    --info-soft: #152843;
    --info-solid: #4c90e0;
    --wait: #b9a5ff;
    --wait-soft: #251d45;
    --wait-solid: #8f74ea;
    --muted: #a4b0ac;
    --muted-soft: #1f2826;
    --muted-solid: #5f6b67;
    --net-tron: #ff7185;
    --net-tron-soft: #3a1820;
    --net-eth: #9aa8ff;
    --net-eth-soft: #1e2345;
    --net-venom: #4fd1ad;
    --net-venom-soft: #123029;
    --asset-usdt: #4fc79f;
    --asset-usdc: #6aa6ea;
    --asset-venom: #3dbf9f;
    --series-1: #23a383;
    --series-2: #6f7fe6;
    --series-3: #bb7f2e;
    --series-grid: #25302d;
    --e-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --e-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --e-3: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1211;
  --surface: #151b1a;
  --surface-2: #1a2120;
  --surface-sunken: #0a0e0d;
  --overlay: rgba(0, 0, 0, 0.6);
  --border: #273130;
  --border-strong: #37443f;
  --divider: #202927;
  --text: #e9eeec;
  --text-2: #b4c0bc;
  --text-3: #8d9a96;
  --text-inverse: #0d1211;
  --accent: #3dbf9f;
  --accent-hover: #55cdaf;
  --accent-press: #2ea88a;
  --accent-soft: #15302a;
  --accent-soft-2: #1c4038;
  --accent-text: #6fd6bb;
  --on-accent: #062019;
  --focus: #6aa8ff;
  --ok: #6fd49a;
  --ok-soft: #143023;
  --ok-solid: #34b46b;
  --warn: #f0c060;
  --warn-soft: #33270f;
  --warn-solid: #e3a008;
  --bad: #ff8f86;
  --bad-soft: #3a1714;
  --bad-solid: #e5534b;
  --info: #8ab8f5;
  --info-soft: #152843;
  --info-solid: #4c90e0;
  --wait: #b9a5ff;
  --wait-soft: #251d45;
  --wait-solid: #8f74ea;
  --muted: #a4b0ac;
  --muted-soft: #1f2826;
  --muted-solid: #5f6b67;
  --net-tron: #ff7185;
  --net-tron-soft: #3a1820;
  --net-eth: #9aa8ff;
  --net-eth-soft: #1e2345;
  --net-venom: #4fd1ad;
  --net-venom-soft: #123029;
  --asset-usdt: #4fc79f;
  --asset-usdc: #6aa6ea;
  --asset-venom: #3dbf9f;
  --series-1: #23a383;
  --series-2: #6f7fe6;
  --series-3: #bb7f2e;
  --series-grid: #25302d;
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --e-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --e-3: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}