/* --------------------------------------------------------------------------
   Design tokens.

   The light palette is lifted verbatim from the desktop launcher's class C
   (dhara_launcher.py ~line 510) so the browser dashboard and the application
   the customer just installed look like one product. The dark palette exists
   only for the entry / auth page and is built around the Vayusoft teal.
   -------------------------------------------------------------------------- */

:root {
  /* -- brand, from assets/logo.png ------------------------------------- */
  --teal:        #177f8f;
  --teal-600:    #12697a;
  --teal-300:    #4aa8b6;
  --teal-100:    #d9edf0;
  --orange:      #f36f21;
  --orange-600:  #d95c14;
  --orange-100:  #fde8db;

  /* -- launcher palette (Bootstrap 5, as the app uses it) --------------- */
  --primary:     #0d6efd;
  --primary-dk:  #0b5ed7;
  --primary-100: #e7f1ff;
  --violet:      #6366f1;
  --violet-b:    #8b5cf6;
  --success:     #198754;
  --success-100: #d1e7dd;
  --danger:      #dc3545;
  --danger-100:  #f8d7da;
  --amber:       #ffc107;
  --amber-100:   #fff3cd;

  --page:        #f1f3f5;
  --card:        #ffffff;
  --header:      #f8f9fa;
  --border:      #dee2e6;
  --border-soft: #e9ecef;
  --ink:         #212529;
  --label:       #495057;
  --muted:       #6c757d;
  --disabled:    #adb5bd;

  /* -- dark, entry page only -------------------------------------------- */
  --d-bg:        #06121a;
  --d-bg-2:      #0b1f28;
  --d-ink:       #e8f0f2;
  --d-muted:     #91a7b0;
  --d-line:      rgba(255, 255, 255, .11);
  --d-line-soft: rgba(255, 255, 255, .06);
  --d-glass:     rgba(255, 255, 255, .045);
  --d-glass-2:   rgba(255, 255, 255, .075);

  /* -- type -------------------------------------------------------------- */
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas,
          "Liberation Mono", monospace;

  --t-xs:  .75rem;
  --t-sm:  .8125rem;
  --t-md:  .9375rem;
  --t-lg:  1.0625rem;
  --t-xl:  1.375rem;
  --t-2xl: 1.875rem;
  --t-3xl: 2.5rem;

  /* -- geometry ---------------------------------------------------------- */
  --r-sm: 8px;      /* the launcher's RADIUS */
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  --shadow-1: 0 1px 2px rgba(16, 24, 32, .05);
  --shadow-2: 0 2px 8px rgba(16, 24, 32, .07), 0 1px 2px rgba(16, 24, 32, .05);
  --shadow-3: 0 12px 32px rgba(16, 24, 32, .10), 0 3px 8px rgba(16, 24, 32, .06);
  --shadow-4: 0 24px 60px rgba(16, 24, 32, .16), 0 6px 14px rgba(16, 24, 32, .07);

  /* -- motion ------------------------------------------------------------ */
  --e-out:    cubic-bezier(.22, 1, .36, 1);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-4: 700ms;
}

/* One switch for the whole site's motion. Every animated rule below either
   consults this or is disabled wholesale in the block at the end of base.css. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}