/* Cooriroo brand theme for Frappe's website pages — in practice the login screen,
 * which is the first thing anyone sees before the CRM SPA loads.
 *
 * Frappe's website styling derives almost everything from its `--gray-*` ramp
 * (`--text-color` is `--gray-800`, `--border-color` is `--gray-200`, `--btn-primary`
 * is `--gray-900`, ...), so warming that ramp carries the whole surface. Same
 * approach as cooriroo-crm.css: re-point tokens, don't restyle core class names.
 *
 * SPECIFICITY: Frappe injects `web_include_css` BEFORE a page's own bundle, and
 * login.bundle.css re-declares the same `:root` tokens — so an equal-specificity
 * block here silently loses. Every selector is doubled up on `:root` to outrank
 * the framework's own. `:not([data-theme='dark'])` keeps Frappe's dark theme
 * reachable; Cooriroo has no dark palette to mirror.
 *
 * Inter already ships with the framework and is already the website font stack,
 * so type needs nothing here.
 */

:root:not([data-theme='dark']) {
  --gray-50: #f6f4ef;
  --gray-100: #f1eee7;
  --gray-200: #ede9e0;
  --gray-300: #e5e0d5;
  --gray-400: #d6cfc1;
  --gray-500: #b0aa9d;
  --gray-600: #9a9488;
  --gray-700: #6e6960;
  --gray-800: #2a2620;
  --gray-900: #1d1b16;

  /* Warm paper under white cards — the frontend's auth-page hierarchy. */
  --bg-color: #fbfaf7;
  --fg-color: #ffffff;
  --navbar-bg: #ffffff;
  --modal-bg: #ffffff;
  --popover-bg: #ffffff;

  /* Primary action is ink, not gold: gold is the accent, never a button fill. */
  --primary: #1d1b16;
  --primary-color: #1d1b16;
  --btn-primary: #1d1b16;
  --border-primary: #1d1b16;

  --scrollbar-thumb-color: #d6cfc1;
  --scrollbar-track-color: transparent;
}

/* Depth the ramp cannot carry: the frontend's auth card is a lifted white card
   on warm paper, not a hairline box. Frappe's 10px radius already matches the
   frontend's --radius, so only the shadow changes. */
:root .page-card {
  box-shadow: 0px 2px 6px 0px rgba(29, 27, 22, 0.05),
    0px 30px 60px -28px rgba(29, 27, 22, 0.24);
}

/* Frappe sizes this for a square glyph; the Cooriroo mark is a circle and reads
   small at the default height. */
:root .page-card-head .app-logo {
  height: 40px;
  width: 40px;
}