/* /ui/theme/app-tokens.css */

:root {
  color-scheme: dark;

  --accent-default:#FECA34;
  --accent:#FECA34;

  --accent-default-tint-4:color-mix(in oklab, var(--accent-default) 4%, transparent);
  --accent-default-tint-6:color-mix(in oklab, var(--accent-default) 6%, transparent);
  --accent-default-tint-20:color-mix(in oklab, var(--accent-default) 20%, transparent);
  --accent-default-tint-40:color-mix(in oklab, var(--accent-default) 40%, transparent);
  --accent-default-tint-50:color-mix(in oklab, var(--accent-default) 50%, transparent);

  --accent-tint-4:color-mix(in oklab, var(--accent) 4%, transparent);
  --accent-tint-6:color-mix(in oklab, var(--accent) 6%, transparent);
  --accent-tint-20:color-mix(in oklab, var(--accent) 20%, transparent);
  --accent-tint-40:color-mix(in oklab, var(--accent) 40%, transparent);
  --accent-tint-50:color-mix(in oklab, var(--accent) 50%, transparent);

  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bot:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);

  --card-radius:30px;

  --app-bg:#000;
  --app-fg:#e9edf7;
  --app-fg-muted:rgba(233,237,247,.75);

  --text-1:rgba(233,237,247,.96);
  --text-2:rgba(233,237,247,.86);
  --text-3:rgba(233,237,247,.68);
  --text-4:rgba(233,237,247,.42);

  --surface-divider:rgba(255,255,255,.11);
  --surface-soft:rgba(255,255,255,.045);

  --card-border:rgba(255,255,255,.08);

  --card-box-shadow:
    0 22px 46px rgba(0,0,0,.46),
    0 8px 18px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -14px 26px rgba(0,0,0,.16);

  --card-bg:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.035) 42%,
      rgba(0,0,0,.16) 100%
    ),
    rgb(18,18,20);

  --scrollbar-size:6px;
  --scrollbar-track:transparent;
  --scrollbar-thumb:rgba(148,163,184,.42);
  --scrollbar-thumb-hover:rgba(148,163,184,.62);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --app-bg:#F5F7FA;
    --app-fg:#0f172a;
    --app-fg-muted:rgba(15,23,42,.72);

    --text-1:rgba(15,23,42,.94);
    --text-2:rgba(15,23,42,.82);
    --text-3:rgba(15,23,42,.62);
    --text-4:rgba(15,23,42,.40);

    --surface-divider:rgba(15,23,42,.14);
    --surface-soft:rgba(15,23,42,.045);

    --card-box-shadow:
      0 24px 48px rgba(15,23,42,.20),
      0 8px 18px rgba(15,23,42,.12),
      0 1px 0 rgba(255,255,255,.75);

    --card-border:rgba(255,255,255,.7);

    --card-bg:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--accent) 7%, white) 0%,
        color-mix(in oklab, var(--accent) 3%, white) 42%,
        rgba(255,255,255,.98) 100%
      ),
      rgba(255,255,255,.96);

    --scrollbar-thumb:rgba(100,116,139,.34);
    --scrollbar-thumb-hover:rgba(100,116,139,.52);
  }
}


html {
  box-sizing: border-box;
  background: var(--app-bg);
}

*,
*::before,
*::after{
  font:inherit;
  color:inherit;
  box-sizing:inherit;
  -webkit-user-drag:none;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--text-1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

body::before{
  content:"";
  position:fixed;
  inset:0 0 auto 0;
  height:var(--safe-top);
  background:var(--statusbar-bg, var(--app-bg));
  z-index:2147483647;
  pointer-events:none;
}

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

button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
}

img,
svg {
  max-inline-size: 100%;
  block-size: auto;
}

img {
  display: inline-block;
  vertical-align: middle;
}

/* =========================================================
   GLOBAL SCROLLBARS
   ========================================================= */


/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar{
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track{
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: var(--scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:hover{
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner{
  background: transparent;
}