:root {
  --brand-grad-from: rgb(0, 162, 219);
  --brand-grad-to: rgb(54, 85, 213);
  --brand-gradient: linear-gradient(90deg, var(--brand-grad-from) 1%, var(--brand-grad-to) 99%);

  --brand-h: 210;
  --brand-s: 90%;
  --brand-l: 46%;

  --brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --brand-soft: hsl(var(--brand-h) var(--brand-s) 78%);
  --brand-deep: hsl(var(--brand-h) var(--brand-s) 38%);
  --brand-ink: hsl(var(--brand-h) var(--brand-s) 40%);
  --brand-glow: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / .45);
  --brand-tint: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / .10);
  --brand-ripple: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / .30);
  --brand-wash: hsl(var(--brand-h) 70% 97%);
  --brand-head: hsl(var(--brand-h) 100% 95%);
  --brand-pale: hsl(var(--brand-h) 100% 93%);

  --brand-fg: #ffffff;
  --brand-surface: var(--brand-grad-from);
  --brand-surface-deep: var(--brand-grad-to);
  --brand-sunk: hsl(228 70% 18% / .6);

  --basic-color-primary: var(--brand);
  --bg-color-second: var(--brand-deep);
  --linear-primary-start: var(--brand-grad-from);
  --linear-primary-end: var(--brand-grad-to);
  --linear-primary-tr: var(--brand-gradient);

  --heroui-primary: var(--brand-h) var(--brand-s) var(--brand-l);
  --heroui-primary-400: var(--brand-h) var(--brand-s) 68%;
  --heroui-primary-500: var(--brand-h) var(--brand-s) var(--brand-l);
  --heroui-primary-600: var(--brand-h) var(--brand-s) 40%;
  --heroui-focus: var(--brand-h) var(--brand-s) var(--brand-l);
}

:root.dark {
  --brand-l: 60%;

  --brand-ink: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --brand-wash: hsl(var(--brand-h) 30% 12%);
  --brand-head: hsl(var(--brand-h) 12% 27%);

  --brand-fg: #ffffff;
  --brand-surface: var(--brand-grad-from);
  --brand-surface-deep: var(--brand-grad-to);

  --basic-color-primary: var(--brand);
  --bg-color-second: var(--brand-soft);
  --linear-primary-start: var(--brand-grad-from);
  --linear-primary-end: var(--brand-grad-to);
  --linear-primary-tr: var(--brand-gradient);

  --heroui-primary: var(--brand-h) var(--brand-s) var(--brand-l);
  --heroui-primary-400: var(--brand-h) var(--brand-s) 74%;
  --heroui-primary-500: var(--brand-h) var(--brand-s) var(--brand-l);
  --heroui-primary-600: var(--brand-h) var(--brand-s) 50%;
  --heroui-focus: var(--brand-h) var(--brand-s) var(--brand-l);
}

.brand-gradient {
  background: var(--brand-gradient);
  color: var(--brand-fg);
}

.brand-strip {
  background-image: var(--brand-gradient);
}

.bg-primary { background-color: var(--brand-surface); }

.bg-primary,
.bg-linear-primary-tb,
.bg-linear-primary-tr { color: var(--brand-fg); }

.bg-primary.text-black,
.bg-linear-primary-tb.text-black,
.bg-linear-primary-tr.text-black,
.bg-primary .text-black,
.bg-linear-primary-tb .text-black,
.bg-linear-primary-tr .text-black { color: var(--brand-fg) !important; }

.brand-marquee {
  color: var(--brand-fg);
  background-image:
    radial-gradient(120% 180% at 6% 50%, hsl(0 0% 100% / .14), transparent 42%),
    linear-gradient(180deg, hsl(0 0% 100% / .15), hsl(0 0% 100% / 0) 58%),
    var(--brand-gradient);
}

.brand-checkin {
  background-image: radial-gradient(
    90% 80% at 90% 65%,
    hsl(var(--brand-h) var(--brand-s) 55%) 10%,
    hsl(var(--brand-h) 90% 92%) 100%
  );
}

:root.dark .brand-checkin {
  background-image: radial-gradient(
    55% 85% at 70% 70%,
    hsl(var(--brand-h) 72% 32%) 0%,
    #2a2f36 100%
  );
}

.brand-tab {
  background-image: radial-gradient(
    120% 120% at top center,
    hsl(var(--brand-h) var(--brand-s) 62%) 0%,
    #fff 90%
  );
}

:root.dark .brand-tab {
  background-image: radial-gradient(
    circle at top center,
    hsl(var(--brand-h) var(--brand-s) var(--brand-l) / .9) 0%,
    hsl(var(--brand-h) 38% 28%) 36%,
    #323737 55%
  );
}

.brand-sec-head {
  background-image: linear-gradient(to bottom in oklab, var(--brand-head), transparent);
}

.brand-sec-wash {
  background-image: linear-gradient(to bottom in oklab, var(--brand-head), transparent 40%);
}

.brand-rule-wash {
  background-image: linear-gradient(to bottom in oklab, var(--brand-pale), transparent 26%);
}

:root.dark .brand-rule-wash {
  background-image: none;
}

:root:not(.dark) .brand-panel-wash {
  background-color: var(--brand-pale);
}

.brand-card-wash {
  background-image: linear-gradient(
    to bottom in oklab,
    hsl(var(--brand-h) 100% 50% / .14),
    transparent 3.375rem
  );
}

.brand-info-panel {
  background-image: linear-gradient(
    to right in oklab,
    hsl(calc(var(--brand-h) - 28) 100% 89%),
    hsl(var(--brand-h) 100% 84%)
  );
}

:root.dark .brand-info-panel {
  background-image: linear-gradient(
    to right in oklab,
    hsl(calc(var(--brand-h) - 28) 100% 42%),
    hsl(var(--brand-h) 85% 58%)
  );
}

.brand-cta,
button.brand-cta {
  background-color: var(--brand-surface);
  background-image: var(--brand-gradient);
  color: var(--brand-fg);
  box-shadow: inset 0 -2px 0 0 var(--brand-sunk);
}