/*

Copyright: 2025 - Diasync
Name: Diasync - Health
Author: Fredrick Femar Ochieng & Purity Nanjimars
Author URL(my site): https://github.com/fescii

*/

/*

  Fonts
  =====

*/

/* @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap"); */

@font-face {
  font-family: "Inter";
  src:
    url("/static/fonts/inter.woff2") format("woff2"),
    url("/static/fonts/inter.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comfortaa";
  src:
    url("/static/fonts/comfortaa.woff2") format("woff2"),
    url("/static/fonts/comfortaa.woff") format("woff");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src:
    url("/static/fonts/ibmplexsans.woff2") format("woff2"),
    url("/static/fonts/ibmplexsans.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src:
    url("/static/fonts/instrumentsans.woff2") format("woff2"),
    url("/static/fonts/instrumentsans.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jetbrains Mono";
  src:
    url("/static/fonts/jetbrainsmono.woff2") format("woff2"),
    url("/static/fonts/jetbrainsmono.woff") format("woff");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src:
    url("/static/fonts/worksans.woff2") format("woff2"),
    url("/static/fonts/worksans.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*

	Variables
	=========

*/

:root {
  color-scheme: light;

  /* ── motion (UI/MOTION.md) — every transition and view transition reads these ── */
  --motion-fast: 150ms;
  --motion: 280ms;
  --motion-slow: 520ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --vt-x: 50%;          /* where the theme reveal grows from — the switch that was pressed */
  --vt-y: 50%;
  --vt-shift: 28px;     /* how far a pushed screen travels */
  --phone-nav-height: 58px;  /* the fixed nav under 700px — every screen keeps this + 20px clear under it */

  --font-main: "Inter";
  --font-text: "Instrument Sans";
  --font-mono: "Jetbrains Mono";
  --font-read: "Work Sans";
  --font-article: "IBM Plex Sans";
  --font-logo: "Comfortaa";

  --vh-height: 100dvh;
  --vh-width: 100dvw;

  /* Neutral, low-glare surface scale */
  --background: #f5f5f7;
  --service-background: #ffffff;
  --stat-background: #f2f2f7;
  --gray-background: #e5e5ea;
  --tabs-background: #f2f2f7;
  --holding-background: #f2f2f7;
  --today-background: #eef5ff;
  --review-background: #f7f7f9;
  --verified-background: #e5e5ea;
  --attachment-background: #e5e5ea;
  --unselectable-background: #e5e5ea;
  --item-background: #e5e5ea;
  --morph-background: #1c1c1e14;

  /* Brand and semantic color roles */
  --accent-color: #007aff;
  --accent-alt: #409cff;
  --alt-color: #0a5fc2;
  --action-color: #006edc;
  --success-color: #16805f;
  --error-color: #c64d42;
  --warn-color: #b66b20;
  --rating-color: #af6d1a;
  --anchor-color: #1769aa;
  --white-color: #ffffff;
  --dark-white: #d1d1d6;
  --gray-color: #6e6e73;
  --icon-color: #636366;
  --text-color: #515154;
  --unselectable-color: #515154cc;
  --nav-color: #6e6e73;
  --label-color: #3a3a3c;
  --read-color: #1d1d1f;
  --title-color: #1d1d1f;

  /* Borders stay visible without outlining every element */
  --border: 1px solid #d1d1d6;
  --input-border: 1px solid #c7c7cc;
  --input-border-focus: 1px solid #007aff;
  --input-border-error: 1px solid #c64d42;
  --anchor-border: 1px solid #1769aa66;
  --selected-border: 2px solid #007aff55;
  --active-border: 2px solid #007aff;
  --icon-border: 1px solid #c7c7cc;
  --icon-border-active: 1px solid #007aff;
  --action-border: 1px solid #007aff88;
  --avatar-border: 1px solid #409cff99;
  --error-border: 1px solid #c64d427a;
  --rating-border: 1px solid #af6d1a80;
  --success-border: 1px solid #16805f70;
  --warn-border: 1px solid #b66b207a;
  --specialist-border: 1px solid #007aff88;

  /* Quiet tinted states — never use a translucent black fill on white */
  --action-background: #eaf3ff;
  --button-background: #e0efff;
  --icon-background: #e5e5ea;
  --dot-background: #007aff;
  --que-background: #eaf3ff;
  --tab-background: #eaf3ff;
  --nav-background: #f2f2f7;
  --selected-background: #e0efff;
  --upvote-background: #eaf3ff;
  --success-background: #ddf3e9;
  --error-background: #fae7e4;
  --warn-background: #f9eedf;
  --rating-background: #f8ecd9;
  --offer-background: #f8ecd9;
  --withdrawable-background: #eaf3ff;
  --loan-background: #fae7e4;
  --revenue-background: #ddf3e9;
  --account-stat-background: #eaf3ff;
  --deposit-background: #ddf3e9;
  --withdraw-background: #fae7e4;
  --transfer-background: #eaf3ff;
  --payment-background: #f8ecd9;
  --payout-background: #ddf3e9;
  --fee-background: #edf1ef;
  --refund-background: #ddf3e9;
  --bonus-background: #fbf1d9;
  --cashback-background: #f8ecd9;
  --reversal-background: #fae7e4;
  --hold-background: #edf1ef;
  --adjustment-background: #eaf3ff;
  --subscription-background: #eee8fa;
  --unknown-background: #edf1ef;

  --cancelled-background: #fae7e4;
  --pending-background: #fbf1d9;
  --approved-background: #ddf3e9;
  --cancelled-border: 1px solid #c64d4255;
  --pending-border: 1px solid #b66b2055;
  --approved-border: 1px solid #16805f55;
  --account-stat-border: 1px solid #007aff55;

  --box-shadow: 0 1px 2px #1d1d1f0a, 0 6px 20px -8px #1d1d1f1c;
  --modal-shadow: 0 20px 56px -20px #1d1d1f40;
  --text-shadow: 0 1px 2px #1d1d1f12;
  --header-shadow: 0 1px 0 #d1d1d6;
  --footer-shadow: 0 -1px 0 #d1d1d6;
  --scroll-bar-background: #e5e5ea;
  --scroll-bar-linear: linear-gradient(#409cff, #007aff);

  --action-linear: linear-gradient(135deg, #409cff, #007aff);
  --button-linear: linear-gradient(135deg, #0a84ff, #006edc);
  --light-linear: linear-gradient(90deg, #64b5ff, #007aff);
  --second-linear: linear-gradient(135deg, #0a5fc2, #409cff);
  --accent-linear: linear-gradient(135deg, #006edc, #409cff);
  --tab-linear: linear-gradient(135deg, #eef5ff, #e0efff);
  --rating-linear: linear-gradient(135deg, #c7862c, #af6d1a);
  --warn-linear: linear-gradient(135deg, #c7802d, #b65f2b);
  --error-linear: linear-gradient(135deg, #d36658, #b94238);

  --chat-background: #f2f2f7;
  --you-background: #e0efff;
  --reply-background: #ffffff;
  --chat-hover: #e5e5ea;
  --chat-you-delivered: var(--accent-color);
  --typing-color: #718079;
  --message-background: linear-gradient(135deg, #0a84ff, #007aff);
  --pin-text-color: #f5faf7;
  --pin-gray-color: #d1d1d6;
  --pin-background-even: linear-gradient(135deg, #f2f2f7, #e5e5ea);
  --pin-background-odd: linear-gradient(135deg, #eef5ff, #e0efff);

  --modal-background: #ffffff;
  --modal-border: 1px solid #d1d1d6;
  --modal-overlay: #1c1c1ed1;
  --image-dimming: unset;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Lifted charcoal, not black: separates cards and reduces eye strain */
  --background: #1c1c1e;
  --service-background: #2c2c2e;
  --stat-background: #242426;
  --gray-background: #3a3a3c;
  --tabs-background: #242426;
  --holding-background: #242426;
  --today-background: #1f2b3a;
  --review-background: #2c2c2e;
  --verified-background: #3a3a3c;
  --attachment-background: #3a3a3c;
  --unselectable-background: #3a3a3c;
  --item-background: #3a3a3c;
  --morph-background: #00000066;

  --accent-color: #0a84ff;
  --accent-alt: #409cff;
  --alt-color: #64b5ff;
  --action-color: #409cff;
  --success-color: #62c69e;
  --error-color: #ef8276;
  --warn-color: #e5a756;
  --rating-color: #e5ae5a;
  --anchor-color: #77bdf0;
  --white-color: #f5f8f6;
  --dark-white: #ebebf5;
  --gray-color: #98989d;
  --icon-color: #aeaeb2;
  --text-color: #c7c7cc;
  --unselectable-color: #c7c7cc99;
  --nav-color: #aeaeb2;
  --label-color: #d1d1d6;
  --read-color: #ebebf5;
  --title-color: #f5f5f7;

  --border: 1px solid #48484a;
  --input-border: 1px solid #636366;
  --input-border-focus: 1px solid #0a84ff;
  --input-border-error: 1px solid #ef8276;
  --anchor-border: 1px solid #77bdf080;
  --selected-border: 2px solid #0a84ff88;
  --active-border: 2px solid #0a84ff;
  --icon-border: 1px solid #545458;
  --icon-border-active: 1px solid #0a84ff;
  --action-border: 1px solid #0a84ff99;
  --avatar-border: 1px solid #409cff99;
  --error-border: 1px solid #ef827680;
  --rating-border: 1px solid #e5ae5a80;
  --success-border: 1px solid #62c69e80;
  --warn-border: 1px solid #e5a75680;
  --specialist-border: 1px solid #0a84ff99;

  --action-background: #20344d;
  --button-background: #1e3d5d;
  --icon-background: #3a3a3c;
  --dot-background: #0a84ff;
  --que-background: #20344d;
  --tab-background: #203b5b;
  --nav-background: #242426;
  --selected-background: #1e3d5d;
  --upvote-background: #20344d;
  --success-background: #244638;
  --error-background: #492b29;
  --warn-background: #4a3825;
  --rating-background: #4a3924;
  --offer-background: #443522;
  --withdrawable-background: #203b5b;
  --loan-background: #492b29;
  --revenue-background: #244638;
  --account-stat-background: #20344d;
  --deposit-background: #244638;
  --withdraw-background: #492b29;
  --transfer-background: #20344d;
  --payment-background: #4a3924;
  --payout-background: #244638;
  --fee-background: #2a3732;
  --refund-background: #244638;
  --bonus-background: #4a3b23;
  --cashback-background: #4a3924;
  --reversal-background: #492b29;
  --hold-background: #2a3732;
  --adjustment-background: #20344d;
  --subscription-background: #36304d;
  --unknown-background: #2a3732;

  --cancelled-background: #492b29;
  --pending-background: #4a3b23;
  --approved-background: #244638;
  --cancelled-border: 1px solid #ef827655;
  --pending-border: 1px solid #e5a75655;
  --approved-border: 1px solid #62c69e55;
  --account-stat-border: 1px solid #0a84ff55;

  --box-shadow: 0 1px 2px #080e0c55, 0 10px 28px -12px #080e0c99;
  --modal-shadow: 0 24px 64px -20px #070d0bba;
  --text-shadow: 0 1px 2px #07100d66;
  --header-shadow: 0 1px 0 #48484a;
  --footer-shadow: 0 -1px 0 #48484a;
  --scroll-bar-background: #3a3a3c;
  --scroll-bar-linear: linear-gradient(#409cff, #0a84ff);

  --action-linear: linear-gradient(135deg, #409cff, #0a84ff);
  --button-linear: linear-gradient(135deg, #409cff, #0a6ed1);
  --light-linear: linear-gradient(90deg, #64b5ff, #0a84ff);
  --second-linear: linear-gradient(135deg, #0a5fc2, #409cff);
  --accent-linear: linear-gradient(135deg, #0a6ed1, #64b5ff);
  --tab-linear: linear-gradient(135deg, #203b5b, #20344d);
  --rating-linear: linear-gradient(135deg, #e7b866, #b8792f);
  --warn-linear: linear-gradient(135deg, #e5a756, #c77940);
  --error-linear: linear-gradient(135deg, #ef8276, #c95a51);

  --chat-background: #242426;
  --you-background: #1e3d5d;
  --reply-background: #3a3a3c;
  --chat-hover: #48484a;
  --chat-you-delivered: var(--accent-color);
  --typing-color: #98989d;
  --message-background: linear-gradient(135deg, #409cff, #0a6ed1);
  --pin-text-color: #f0f6f2;
  --pin-gray-color: #aeaeb2;
  --pin-background-even: linear-gradient(135deg, #2c2c2e, #3a3a3c);
  --pin-background-odd: linear-gradient(135deg, #263b55, #29496c);

  --modal-background: #2c2c2e;
  --modal-border: 1px solid #545458;
  --modal-overlay: #000000cc;
  --image-dimming: brightness(.94) saturate(.9);
}

/* Keep keyboard navigation visible; the legacy `outline: inherit` hides it. */
:focus-visible {
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px;
}

/* Keep keyboard navigation visible; the legacy `outline: inherit` hides it. */
:focus-visible {
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px;
}

*,
*:after,
*:before {
  box-sizing: border-box;
  font-family: inherit;
  -webkit-box-sizing: border-box;
}

*:focus {
  outline: inherit !important;
}

*::-webkit-scrollbar {
  width: 3px;
}

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

*::-webkit-scrollbar-thumb {
  width: 3px;
  background: var(--scroll-bar-linear);
  border-radius: 50px;
}

/*

  Motion — view transitions (UI/MOTION.md)
  ========================================

  The router stamps <html data-vt="swap|push|pop"> for the life of a screen change and
  app.setTheme stamps data-vt="theme"; the named group `flow` is div#content-container in
  the shell. Without the View Transitions API none of this runs and the change just happens.

*/

::view-transition-group(*) {
  animation-duration: var(--motion);
  animation-timing-function: var(--ease);
}

/* the theme: the new one grows in a circle from the switch, the old one stays under it */
:root[data-vt="theme"]::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}
:root[data-vt="theme"]::view-transition-new(root) {
  animation: vt-theme-reveal var(--motion-slow) var(--ease) both;
  mix-blend-mode: normal;
}
@keyframes vt-theme-reveal {
  from { clip-path: circle(0 at var(--vt-x) var(--vt-y)); }
  to   { clip-path: circle(160vmax at var(--vt-x) var(--vt-y)); }
}

/* a screen for another: the old one fades, the new one rises in */
:root[data-vt="swap"]::view-transition-old(flow) { animation: vt-fade-out var(--motion-fast) var(--ease-in) both; }
:root[data-vt="swap"]::view-transition-new(flow) { animation: vt-rise-in var(--motion) var(--ease) both; }

/* a record over its feed: it slides in from the right; going back, it slides out the same way */
:root[data-vt="push"]::view-transition-old(flow) { animation: vt-fade-out var(--motion-fast) var(--ease-in) both; }
:root[data-vt="push"]::view-transition-new(flow) { animation: vt-slide-in var(--motion) var(--ease) both; }
:root[data-vt="pop"]::view-transition-old(flow)  { animation: vt-slide-out var(--motion) var(--ease-in) both; }
:root[data-vt="pop"]::view-transition-new(flow)  { animation: vt-fade-in var(--motion) var(--ease) both; }

/* the screen's own group never crossfades on top of these */
:root[data-vt="swap"]::view-transition-group(flow),
:root[data-vt="push"]::view-transition-group(flow),
:root[data-vt="pop"]::view-transition-group(flow) { animation: none; }

@keyframes vt-fade-out  { to   { opacity: 0; } }
@keyframes vt-fade-in   { from { opacity: 0; } }
@keyframes vt-rise-in   { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-slide-in  { from { opacity: 0; transform: translateX(var(--vt-shift)); } }
@keyframes vt-slide-out { to   { opacity: 0; transform: translateX(var(--vt-shift)); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}