/*
 * hub-theme.css: Hub's brand layer on top of apple-tokens.css.
 * One tint (Apple system orange), warm-tinted backgrounds instead of pure white,
 * and a web approximation of Liquid Glass for the navigation layer.
 *
 * Contrast (checked): --tint-text on --bg 4.6:1 and on --card 4.8:1; white on --tint-strong 4.9:1.
 * Plain --tint (Apple orange) is 2.2:1 on light surfaces: fills and icons only, never small text.
 */

:root {
  --tint: rgb(255 141 40);
  --tint-strong: rgb(190 78 0);
  --tint-text: rgb(190 78 0);
  --on-tint: #fff;
  --link: var(--tint-text);
  --tint-soft: rgb(255 141 40 / 0.14);

  /* Very slightly warm, never pure white. */
  --bg: rgb(250 246 241);
  --bg-grouped: rgb(250 246 241);
  --bg-secondary: rgb(244 238 231);
  --card: rgb(255 252 248 / 0.86);
  --card-solid: rgb(255 252 248);
  --card-edge: rgb(255 255 255 / 0.9);
  --card-shadow: 0 1px 2px rgb(120 60 0 / 0.05), 0 6px 24px rgb(120 60 0 / 0.06);
  --bg-grouped-secondary: var(--card-solid);

  --label-secondary: rgb(74 62 52 / 0.78);
  --label-tertiary: rgb(74 62 52 / 0.4);
  --separator: rgb(110 80 50 / 0.18);
  --fill: rgb(120 90 60 / 0.18);
  --fill-secondary: rgb(120 90 60 / 0.14);
  --fill-tertiary: rgb(120 90 60 / 0.1);
  --fill-quaternary: rgb(120 90 60 / 0.06);

  /* Ambient light behind the glass: soft, warm, barely there. */
  --ambient-1: rgb(255 170 90 / 0.22);
  --ambient-2: rgb(255 214 170 / 0.3);
  --ambient-3: rgb(255 140 60 / 0.1);

  /* Liquid Glass */
  --lg-fill: linear-gradient(180deg, rgb(255 255 255 / 0.62), rgb(255 250 244 / 0.42));
  --lg-fill-thick: linear-gradient(180deg, rgb(255 253 250 / 0.9), rgb(255 249 242 / 0.82));
  --lg-rim: rgb(255 255 255 / 0.85);
  --lg-rim-low: rgb(255 255 255 / 0.25);
  --lg-edge: rgb(120 60 0 / 0.1);
  --lg-shadow: 0 10px 40px rgb(120 60 0 / 0.12), 0 2px 6px rgb(120 60 0 / 0.06);
  --lg-blur: 18px;
  --lg-saturate: 190%;
  --lg-specular: rgb(255 255 255 / 0.55);
  --lg-lens: linear-gradient(180deg, rgb(255 180 110 / 0.34), rgb(255 141 40 / 0.2));
  --lg-lens-rim: rgb(255 255 255 / 0.9);

  --focus-ring: 0 0 0 3px rgb(255 141 40 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint: rgb(255 159 64);
    --tint-strong: rgb(214 96 10);
    --tint-text: rgb(255 170 90);
    --tint-soft: rgb(255 159 64 / 0.16);
    --bg: rgb(17 14 12);
    --bg-grouped: rgb(17 14 12);
    --bg-secondary: rgb(28 24 21);
    --card: rgb(34 30 26 / 0.86);
    --card-solid: rgb(34 30 26);
    --card-edge: rgb(255 240 225 / 0.07);
    --card-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 28px rgb(0 0 0 / 0.3);
    --label-secondary: rgb(240 225 210 / 0.64);
    --label-tertiary: rgb(240 225 210 / 0.32);
    --separator: rgb(255 230 205 / 0.12);
    --fill: rgb(200 170 140 / 0.24);
    --fill-secondary: rgb(200 170 140 / 0.2);
    --fill-tertiary: rgb(200 170 140 / 0.14);
    --fill-quaternary: rgb(200 170 140 / 0.09);
    --ambient-1: rgb(255 130 30 / 0.16);
    --ambient-2: rgb(180 80 10 / 0.14);
    --ambient-3: rgb(255 170 90 / 0.06);
    --lg-fill: linear-gradient(180deg, rgb(70 58 48 / 0.5), rgb(40 33 27 / 0.42));
    --lg-fill-thick: linear-gradient(180deg, rgb(46 40 34 / 0.92), rgb(34 29 25 / 0.9));
    --lg-rim: rgb(255 240 225 / 0.22);
    --lg-rim-low: rgb(255 240 225 / 0.05);
    --lg-edge: rgb(0 0 0 / 0.5);
    --lg-shadow: 0 12px 44px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
    --lg-specular: rgb(255 240 225 / 0.16);
    --lg-lens: linear-gradient(180deg, rgb(255 159 64 / 0.3), rgb(255 120 20 / 0.18));
    --lg-lens-rim: rgb(255 210 170 / 0.35);
    --focus-ring: 0 0 0 3px rgb(255 159 64 / 0.5);
  }
}

body { background: var(--bg); color: var(--label); }
[hidden] { display: none !important; }

/* Warm ambient light behind everything, so glass has something to bend. */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg); }
.ambient::before, .ambient::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); }
.ambient::before { width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle, var(--ambient-1), transparent 70%); }
.ambient::after { width: 55vmax; height: 55vmax; right: -20vmax; bottom: -24vmax; background: radial-gradient(circle, var(--ambient-2), transparent 70%); }
.ambient i { position: absolute; width: 40vmax; height: 40vmax; left: 45%; top: 30%; border-radius: 50%; filter: blur(90px); background: radial-gradient(circle, var(--ambient-3), transparent 70%); }

/*
 * Liquid Glass. Layers, bottom to top:
 *   backdrop blur + saturation (the lens), a translucent fill, a bright specular rim on the
 *   top edge fading down the sides, a soft moving highlight that follows the pointer
 *   (--mx/--my, set from JS), and a large soft shadow that lifts it off the content.
 */
.glass {
  position: relative; isolation: isolate;
  background: var(--lg-fill);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow: var(--lg-shadow), inset 0 0 0 0.5px var(--lg-edge);
}
.glass.thick { background: var(--lg-fill-thick); }
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  padding: 1px;
  background: linear-gradient(180deg, var(--lg-rim), var(--lg-rim-low) 38%, var(--lg-rim-low) 70%, color-mix(in srgb, var(--lg-rim) 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(260px circle at var(--mx, 30%) var(--my, -40%), var(--lg-specular), transparent 60%);
  opacity: .9;
}
.glass > * { position: relative; z-index: 2; }

/* A lens: the tinted glass drop that marks the current selection. */
.lens {
  background: var(--lg-lens);
  box-shadow: inset 0 1px 0 var(--lg-lens-rim), inset 0 0 0 0.5px rgb(255 141 40 / 0.35), 0 4px 14px rgb(255 120 20 / 0.18);
}

/* Glass button: capsule, for toolbars and floating controls. */
.gbtn {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; grid-auto-flow: column; gap: 6px;
  height: 36px; min-width: 36px; padding: 0 12px; border-radius: 9999px;
  color: var(--label); font-size: var(--text-subhead); font-weight: var(--weight-semibold);
}
.gbtn:focus-visible { box-shadow: var(--focus-ring); }
.gbtn svg { color: var(--tint-text); }

/* App-icon style badge: a small squircle with a gradient and gloss. */
.appico {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--tint)) 78%, #fff), var(--c, var(--tint)) 60%, color-mix(in srgb, var(--c, var(--tint)) 88%, #000));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.12);
}
.appico::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgb(255 255 255 / 0.28), transparent); }
.appico svg { width: 18px; height: 18px; position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.15)); }

@media (prefers-reduced-transparency: reduce) {
  .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-solid); }
  .glass::after { display: none; }
}
@media (prefers-contrast: more) {
  :root { --tint-text: rgb(160 60 0); --label-secondary: rgb(60 45 35 / 0.9); }
}