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

:root {
  --accent-default: #6a1b9a;
  --accent: #6a1b9a;

  --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);


  --surface-divider: rgba(255,255,255,.08);
  --surface-soft: rgba(255,255,255,.04);

  --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-border:rgba(255,255,255,.08);

  --card-radius:30px;

  --card-bg:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.02) 45%,
      rgba(0,0,0,.10) 100%
    ),
    rgb(24,24,26);
}

html[data-theme="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);

}

html[data-theme="dark"] {
  --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-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-border:rgba(255,255,255,.08);

  --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);
}

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
   ========================================================= */

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

html[data-theme="light"]{
  --scrollbar-thumb: rgba(100,116,139,.34);
  --scrollbar-thumb-hover: rgba(100,116,139,.52);
}

html[data-theme="dark"]{
  --scrollbar-thumb: rgba(148,163,184,.42);
  --scrollbar-thumb-hover: rgba(148,163,184,.62);
}

/* 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;
}