/* @ios27_design_system/tokens 1.0.2 — MIT License, (c) Dcode Labs — https://github.com/seunghan91/ios27-design-system */
/* iOS 27 Design Tokens — Materials (Liquid Glass) */
/* Generated from tokens/materials.json — measured from Apple's iOS 27 UI Kit 27.0.2 */

/* iOS 27 transparency slider — 0 = fully tinted, 1 = ultra clear */
:root {
  --ios27-glass-transparency: 0.5;
}

.ios27-glass-fully-tinted { --ios27-glass-transparency: 0; }
.ios27-glass-tinted { --ios27-glass-transparency: 0.25; }
.ios27-glass-default { --ios27-glass-transparency: 0.5; }
.ios27-glass-clear { --ios27-glass-transparency: 0.75; }
.ios27-glass-ultra-clear { --ios27-glass-transparency: 1; }

@media (prefers-reduced-transparency: reduce) {
  :root,
  .ios27-glass-fully-tinted,
  .ios27-glass-tinted,
  .ios27-glass-default,
  .ios27-glass-clear,
  .ios27-glass-ultra-clear {
    --ios27-glass-transparency: 0;
  }
}

:root {
  --ios27-glass-rim: rgba(219, 219, 219, 1);
  --ios27-glass-rim-sm: rgba(235, 235, 235, 1);
  --ios27-glass-rim-spread: 0.5px;
  --ios27-glass-inner: rgba(40, 40, 40, 1);
  --ios27-glass-la-rgb: 255, 255, 255;
  --ios27-glass-la-alpha: 0.7;
  --ios27-glass-la-overlay: rgba(191, 191, 191, 0.1);
  --ios27-glass-la-shadow: 0 8px 48px rgba(0, 0, 0, 0.25);
  --ios27-glass-me-rgb: 255, 255, 255;
  --ios27-glass-me-alpha: 0.7;
  --ios27-glass-me-overlay: rgba(191, 191, 191, 0.1);
  --ios27-glass-me-shadow: 0 8px 48px rgba(0, 0, 0, 0.25);
  --ios27-glass-sm-rgb: 116, 116, 128;
  --ios27-glass-sm-alpha: 0.08;
  --ios27-glass-sm-overlay: transparent;
  --ios27-glass-sm-shadow: 0 8px 15px rgba(0, 0, 0, 0.02);
  --ios27-glass-clear-base: rgba(16, 16, 16, 1);
  --ios27-glass-clear-overlay: rgba(255, 255, 255, 0.04);
  --ios27-toolbar-rgb: 255, 255, 255;
  --ios27-toolbar-alpha: 0.85;
  --ios27-toolbar-edge: rgba(0, 0, 0, 0.05);
  --ios27-sidebar-rgb: 247, 247, 247;
  --ios27-sidebar-alpha: 0.8;
  --ios27-material-chrome-rgb: 255, 255, 255;
  --ios27-material-chrome-alpha: 0.75;
  --ios27-material-thick-rgb: 255, 255, 255;
  --ios27-material-thick-alpha: 0.84;
  --ios27-material-thick-overlay: rgba(255, 255, 255, 0.34);
  --ios27-material-regular-rgb: 255, 255, 255;
  --ios27-material-regular-alpha: 0.6;
  --ios27-material-regular-overlay: rgba(255, 255, 255, 0.25);
  --ios27-material-thin-rgb: 255, 255, 255;
  --ios27-material-thin-alpha: 0.4;
  --ios27-material-thin-overlay: rgba(255, 255, 255, 0.05);
  --ios27-material-ultrathin-rgb: 255, 255, 255;
  --ios27-material-ultrathin-alpha: 0.07;
  --ios27-material-ultrathin-overlay: rgba(255, 255, 255, 0.03);
  --ios27-scroll-hard-rgb: 255, 255, 255;
  --ios27-scroll-hard-alpha: 0.85;
  --ios27-scroll-hard-border: rgba(0, 0, 0, 0.05);
}

:root[data-theme="dark"] {
  --ios27-glass-rim: rgba(166, 166, 166, 1);
  --ios27-glass-rim-sm: rgba(230, 230, 230, 1);
  --ios27-glass-inner: rgba(26, 26, 26, 1);
  --ios27-glass-la-rgb: 26, 26, 26;
  --ios27-glass-la-alpha: 0.7;
  --ios27-glass-la-overlay: transparent;
  --ios27-glass-la-shadow: 0 8px 48px rgba(0, 0, 0, 0.45);
  --ios27-glass-me-rgb: 26, 26, 26;
  --ios27-glass-me-alpha: 0.7;
  --ios27-glass-me-overlay: transparent;
  --ios27-glass-me-shadow: 0 8px 48px rgba(0, 0, 0, 0.45);
  --ios27-glass-sm-rgb: 118, 118, 128;
  --ios27-glass-sm-alpha: 0.12;
  --ios27-glass-sm-overlay: transparent;
  --ios27-glass-sm-shadow: 0 8px 15px rgba(0, 0, 0, 0.04);
  --ios27-toolbar-rgb: 0, 0, 0;
  --ios27-toolbar-alpha: 0.55;
  --ios27-toolbar-edge: rgba(0, 0, 0, 0.1);
  --ios27-sidebar-rgb: 0, 0, 0;
  --ios27-sidebar-alpha: 0.8;
  --ios27-material-chrome-rgb: 28, 28, 28;
  --ios27-material-chrome-alpha: 0.9;
  --ios27-material-thick-rgb: 0, 0, 0;
  --ios27-material-thick-alpha: 0.6;
  --ios27-material-thick-overlay: transparent;
  --ios27-material-regular-rgb: 0, 0, 0;
  --ios27-material-regular-alpha: 0.41;
  --ios27-material-regular-overlay: transparent;
  --ios27-material-thin-rgb: 0, 0, 0;
  --ios27-material-thin-alpha: 0.26;
  --ios27-material-thin-overlay: transparent;
  --ios27-material-ultrathin-rgb: 0, 0, 0;
  --ios27-material-ultrathin-alpha: 0.02;
  --ios27-material-ultrathin-overlay: transparent;
  --ios27-scroll-hard-rgb: 0, 0, 0;
  --ios27-scroll-hard-alpha: 0.55;
  --ios27-scroll-hard-border: rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ios27-glass-rim: rgba(166, 166, 166, 1);
    --ios27-glass-rim-sm: rgba(230, 230, 230, 1);
    --ios27-glass-inner: rgba(26, 26, 26, 1);
    --ios27-glass-la-rgb: 26, 26, 26;
    --ios27-glass-la-alpha: 0.7;
    --ios27-glass-la-overlay: transparent;
    --ios27-glass-la-shadow: 0 8px 48px rgba(0, 0, 0, 0.45);
    --ios27-glass-me-rgb: 26, 26, 26;
    --ios27-glass-me-alpha: 0.7;
    --ios27-glass-me-overlay: transparent;
    --ios27-glass-me-shadow: 0 8px 48px rgba(0, 0, 0, 0.45);
    --ios27-glass-sm-rgb: 118, 118, 128;
    --ios27-glass-sm-alpha: 0.12;
    --ios27-glass-sm-overlay: transparent;
    --ios27-glass-sm-shadow: 0 8px 15px rgba(0, 0, 0, 0.04);
    --ios27-toolbar-rgb: 0, 0, 0;
    --ios27-toolbar-alpha: 0.55;
    --ios27-toolbar-edge: rgba(0, 0, 0, 0.1);
    --ios27-sidebar-rgb: 0, 0, 0;
    --ios27-sidebar-alpha: 0.8;
    --ios27-material-chrome-rgb: 28, 28, 28;
    --ios27-material-chrome-alpha: 0.9;
    --ios27-material-thick-rgb: 0, 0, 0;
    --ios27-material-thick-alpha: 0.6;
    --ios27-material-thick-overlay: transparent;
    --ios27-material-regular-rgb: 0, 0, 0;
    --ios27-material-regular-alpha: 0.41;
    --ios27-material-regular-overlay: transparent;
    --ios27-material-thin-rgb: 0, 0, 0;
    --ios27-material-thin-alpha: 0.26;
    --ios27-material-thin-overlay: transparent;
    --ios27-material-ultrathin-rgb: 0, 0, 0;
    --ios27-material-ultrathin-alpha: 0.02;
    --ios27-material-ultrathin-overlay: transparent;
    --ios27-scroll-hard-rgb: 0, 0, 0;
    --ios27-scroll-hard-alpha: 0.55;
    --ios27-scroll-hard-border: rgba(0, 0, 0, 0.1);
  }
}

.ios27-liquid-glass-la {
  backdrop-filter: blur(calc(6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5)))) saturate(1.8);
  -webkit-backdrop-filter: blur(calc(6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5)))) saturate(1.8);
  background-color: rgba(var(--ios27-glass-la-rgb), calc(var(--ios27-glass-la-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
  background-image: linear-gradient(var(--ios27-glass-la-overlay), var(--ios27-glass-la-overlay));
  border-radius: 34px;
  box-shadow:
    var(--ios27-glass-la-shadow),
    0 0 0 var(--ios27-glass-rim-spread, 0.5px) var(--ios27-glass-rim),
    inset 0 40px 10px -40px var(--ios27-glass-inner),
    inset 0 -40px 10px -40px var(--ios27-glass-inner);
}

.ios27-liquid-glass-me {
  backdrop-filter: blur(calc(6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5)))) saturate(1.8);
  -webkit-backdrop-filter: blur(calc(6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5)))) saturate(1.8);
  background-color: rgba(var(--ios27-glass-me-rgb), calc(var(--ios27-glass-me-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
  background-image: linear-gradient(var(--ios27-glass-me-overlay), var(--ios27-glass-me-overlay));
  border-radius: 34px;
  box-shadow:
    var(--ios27-glass-me-shadow),
    0 0 0 var(--ios27-glass-rim-spread, 0.5px) var(--ios27-glass-rim),
    inset 0 40px 10px -40px var(--ios27-glass-inner),
    inset 0 -40px 10px -40px var(--ios27-glass-inner);
}

.ios27-liquid-glass-sm {
  backdrop-filter: blur(calc(3.6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5)))) saturate(1.8);
  -webkit-backdrop-filter: blur(calc(3.6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5)))) saturate(1.8);
  background-color: rgba(var(--ios27-glass-sm-rgb), calc(var(--ios27-glass-sm-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
  background-image: linear-gradient(var(--ios27-glass-sm-overlay), var(--ios27-glass-sm-overlay));
  border-radius: 100px;
  box-shadow:
    var(--ios27-glass-sm-shadow),
    0 0 0 var(--ios27-glass-rim-spread, 0.5px) var(--ios27-glass-rim-sm),
    inset 0 40px 10px -40px var(--ios27-glass-inner),
    inset 0 -40px 10px -40px var(--ios27-glass-inner);
}

/* Active + Prominent small glass — white backing plus a LINEAR_BURN tint */
.ios27-liquid-glass-sm.ios27-glass-prominent {
  border-radius: 1000px;
  background-color: rgba(255, 255, 255, 0.94);
  background-image: linear-gradient(rgba(0, 136, 255, 1), rgba(0, 136, 255, 1));
  background-blend-mode: color-burn;
  --_kitBlendMode: LINEAR_BURN;
}

.ios27-liquid-glass-clear {
  backdrop-filter: blur(calc(1.6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5)))) saturate(1.8);
  -webkit-backdrop-filter: blur(calc(1.6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5)))) saturate(1.8);
  background-color: var(--ios27-glass-clear-overlay);
  border-radius: 23px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.02);
}

.ios27-material-chrome {
  backdrop-filter: blur(calc(50px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-backdrop-filter: blur(calc(50px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  background-color: rgba(var(--ios27-material-chrome-rgb), calc(var(--ios27-material-chrome-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
}

.ios27-material-thick {
  backdrop-filter: blur(calc(100px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-backdrop-filter: blur(calc(100px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  background-color: rgba(var(--ios27-material-thick-rgb), calc(var(--ios27-material-thick-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
  background-image: linear-gradient(var(--ios27-material-thick-overlay), var(--ios27-material-thick-overlay));
}

.ios27-material-regular {
  backdrop-filter: blur(calc(100px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-backdrop-filter: blur(calc(100px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  background-color: rgba(var(--ios27-material-regular-rgb), calc(var(--ios27-material-regular-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
  background-image: linear-gradient(var(--ios27-material-regular-overlay), var(--ios27-material-regular-overlay));
}

.ios27-material-thin {
  backdrop-filter: blur(calc(100px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-backdrop-filter: blur(calc(100px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  background-color: rgba(var(--ios27-material-thin-rgb), calc(var(--ios27-material-thin-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
  background-image: linear-gradient(var(--ios27-material-thin-overlay), var(--ios27-material-thin-overlay));
}

.ios27-material-ultrathin {
  backdrop-filter: blur(calc(100px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-backdrop-filter: blur(calc(100px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  background-color: rgba(var(--ios27-material-ultrathin-rgb), calc(var(--ios27-material-ultrathin-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
  background-image: linear-gradient(var(--ios27-material-ultrathin-overlay), var(--ios27-material-ultrathin-overlay));
}

/* Scroll edge effects — measured from the kit */
.ios27-scroll-edge-soft {
  backdrop-filter: blur(calc(10px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-backdrop-filter: blur(calc(10px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
}

.ios27-scroll-edge-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  backdrop-filter: blur(calc(100px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-backdrop-filter: blur(calc(100px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

.ios27-scroll-edge-hard {
  backdrop-filter: blur(calc(6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-backdrop-filter: blur(calc(6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  background: rgba(var(--ios27-scroll-hard-rgb), calc(var(--ios27-scroll-hard-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
  border-bottom: 1px solid var(--ios27-scroll-hard-border);
}

/* iOS 27 uniform toolbar — applied once content scrolls under the top bar */
.ios27-toolbar-uniform {
  backdrop-filter: blur(calc(6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-backdrop-filter: blur(calc(6px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  background: rgba(var(--ios27-toolbar-rgb), calc(var(--ios27-toolbar-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
  border-bottom: 1px solid var(--ios27-toolbar-edge);
  transition: background 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
              backdrop-filter 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

/* iOS 27 sidebar — edge to edge, tinted symbols */
.ios27-sidebar {
  backdrop-filter: blur(calc(40px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  -webkit-backdrop-filter: blur(calc(40px * calc(0.5 + 0.8 * var(--ios27-glass-transparency, 0.5))));
  background: rgba(var(--ios27-sidebar-rgb), calc(var(--ios27-sidebar-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency, 0.5))));
  padding-inline: 0;
  border-radius: 0;
}