/* CareShip Design System — canonical tokens.
   Paste into a product's :root unchanged; set ONLY --app / --app2 from tokens/products.json.
   Values mirror cs-frontly-website-and-product/app (the reference implementation). */

:root {
  /* brand — the only per-product values. Declare once, nowhere else. */
  --app: #1E7FEF;
  --app2: #74B0F5;

  /* surfaces & ink (light) */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f1f3f4;
  --surface-3: #e7e9ec;
  --ink: #1f2023;
  --ink-soft: #565b63;
  --ink-faint: #6e747f;
  --line: #e4e6ea;
  --accent: var(--app);
  --accent-ink: #ffffff;
  --secondary: #1f2023;
  color-scheme: light;

  /* radius */
  --r-lg: 28px;   /* overlays, big panels */
  --r-md: 22px;   /* main card, grid card, conversation card, chart cards */
  --r-sm: 13px;   /* inputs, segmented container, small buttons */
  --r-xs: 11px;   /* compact elements */

  /* elevation (always two layers) */
  --shadow-1: 0 1px 2px rgba(60,64,67,.10), 0 1px 3px rgba(60,64,67,.06);
  --shadow-2: 0 2px 6px rgba(60,64,67,.10), 0 6px 16px rgba(60,64,67,.08);
  --shadow-pop: 0 4px 12px rgba(60,64,67,.14), 0 14px 34px rgba(60,64,67,.16);
  --shadow-lift: 0 24px 60px -18px rgba(20,22,40,.42);

  /* motion */
  --ease: cubic-bezier(.2, .6, .3, 1);
  --easeS: cubic-bezier(.22, 1, .36, 1);
  --easeO: cubic-bezier(.3, 1.36, .44, 1);

  /* layout */
  --topbar-h: 66px;
  --leftnav-w: 236px;

  /* brand gradients (base fallback; #app overrides below) */
  --app-grad: linear-gradient(135deg,
    color-mix(in srgb, var(--app) 82%, #ffffff) 0%,
    var(--app) 55%,
    color-mix(in srgb, var(--app) 84%, #000000) 100%);
  --app-soft: linear-gradient(135deg,
    color-mix(in srgb, var(--app) 16%, var(--surface)) 0%,
    color-mix(in srgb, var(--app) 6%, var(--surface)) 100%);

  /* semantic status — fixed, never re-skinned per product */
  --ok: #0d9488;
  --warn: #e0a020;
  --danger: #e05a4e;
  /* Fustat is the ONLY typeface. sans-serif is a load-failure fallback, nothing more. */
  --font: "Fustat", sans-serif;
}

:root[data-theme="dark"] {
  --bg: #151619;
  --surface: #202226;
  --surface-2: #2a2d31;
  --surface-3: #33373c;
  --ink: #e8eaed;
  --ink-soft: #c3c7ce;
  --ink-faint: #a6adb9;
  --line: #33373c;
  --secondary: #e8eaed;
  color-scheme: dark;

  --shadow-1: 0 1px 2px rgba(0,0,0,.44), 0 1px 3px rgba(0,0,0,.34);
  --shadow-2: 0 2px 6px rgba(0,0,0,.44), 0 6px 16px rgba(0,0,0,.38);
  --shadow-pop: 0 6px 18px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.52);
  --shadow-lift: 0 26px 64px -16px rgba(0,0,0,.7);
}

/* canonical gradients inside the app shell */
#app {
  --app-grad: linear-gradient(135deg,
    var(--app2) 0%,
    var(--app) 58%,
    color-mix(in srgb, var(--app) 78%, #12083a) 100%) !important;
  --app-soft: linear-gradient(135deg,
    color-mix(in srgb, var(--app) 15%, var(--surface)) 0%,
    color-mix(in srgb, var(--app2) 7%, var(--surface)) 100%) !important;
}

/* marketing site is always light, even when the app sets data-theme="dark" */
:root[data-theme="dark"] #landing {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f1f3f4; --surface-3: #e7e9ec;
  --ink: #1f2023; --ink-soft: #565b63; --ink-faint: #6e747f; --line: #e4e6ea;
  --secondary: #1f2023; color-scheme: light;
}

html, body, input, button, textarea, select { font-family: var(--font); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}