/* ===========================================================================
   Bill-e-Buddy ERP — theme.css
   Design tokens + LIGHT Desk overrides. Additive only:
   never rewrite ERPNext layout, never touch core files.

   HARD RULE — Amber (#F6CB7A) is a FILL ONLY.
   It fails WCAG AA as a foreground colour on light surfaces. Use it as a
   background (with --bb-ink text on top) or a thick border-left accent.
   Never as small text or thin icons on a light surface.
   =========================================================================== */

@import url("/assets/billbuddy_erp/css/forms.css");

/* --- Self-hosted fonts (GDPR: no third-party CDN) -------------------------
   Files live in public/fonts/. Until they land, the stack below degrades to
   system-ui, so nothing breaks. See public/fonts/README.md. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/billbuddy_erp/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/billbuddy_erp/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Inter ships as a VARIABLE font (one file covers all weights). */
@font-face {
  font-family: "Inter";
  src: url("/assets/billbuddy_erp/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* --- Design tokens (brand palette — DO NOT substitute) -------------------- */
:root {
  --bb-teal:   #30B0A6;  /* proactive: buttons, prompts, icons, reminders */
  --bb-sand:   #F2E9D8;  /* soft base: backgrounds, no white glare */
  --bb-ink:    #0B2239;  /* text, headings, icons */
  --bb-amber:  #F6CB7A;  /* reset moments / alerts — NEVER red — FILL ONLY */
  --bb-forest: #1D645E;  /* categories, money organisation */
  --bb-plum:   #9D0191;  /* wins/milestones — use sparingly */

  --bb-surface: #FFFFFF;
  --bb-surface-warm: #F7F5F2;

  /* Type */
  --bb-font-display: "Atkinson Hyperlegible", system-ui, sans-serif;
  --bb-font-body: "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif;

  /* Spacing (8px baseline) */
  --bb-sp-sm: 8px; --bb-sp-md: 16px; --bb-sp-lg: 24px; --bb-sp-xl: 32px;

  --bb-radius: 12px;
  --bb-shadow: 0 1px 3px rgba(11, 34, 57, 0.08);
  --bb-focus: 0 0 0 2px var(--bb-teal);
}

/* --- Mode-dependent surfaces ---------------------------------------------
   Light: sand base, ink text (soft, no white glare).
   Dark : DARK BLUE base (--bb-ink #0B2239) with sand text — dark mode must NOT
          keep the sand background.

   VERIFIED on Frappe v16.31.0: dark mode is an ATTRIBUTE on the root element,
   `[data-theme="dark"]` (see frappe/public/scss/desk/dark.scss) — NOT a `.dark`
   class. The `.dark` selectors are kept as a harmless fallback. */
:root,
:root[data-theme="light"] {
  --bb-bg: var(--bb-sand);
  --bb-fg: var(--bb-ink);
}
:root[data-theme="dark"],
:root.dark {
  --bb-bg: #0B2239;            /* dark blue — brand ink */
  --bb-fg: #F2E9D8;            /* sand text on dark blue */
  --bb-surface: #12304F;       /* lifted card, still dark blue family */
  --bb-surface-warm: #0E2942;
  --bb-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  --bb-focus: 0 0 0 2px var(--bb-teal);
}

/* --- Base surfaces -------------------------------------------------------- */
body,
.layout-main {
  background-color: var(--bb-bg);
  color: var(--bb-fg);
  font-family: var(--bb-font-body);
  font-size: 16px;              /* body never smaller than 16px */
  font-weight: 400;             /* no thin weights for body text */
}

h1, h2, h3, h4, h5, h6,
.page-title,
.title-text {
  font-family: var(--bb-font-display);
  color: var(--bb-fg);
}

/* --- Buttons -------------------------------------------------------------- */
.btn-primary {
  background-color: var(--bb-teal);
  border-color: var(--bb-teal);
  color: var(--bb-ink);
  border-radius: var(--bb-radius);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bb-forest);
  border-color: var(--bb-forest);
  color: #FFFFFF;
}
.btn {
  border-radius: var(--bb-radius);
}

/* --- Cards / widgets ------------------------------------------------------ */
.widget,
.widget.number-widget-box,
.dashboard-widget-box,
.chart-widget-box {
  background-color: var(--bb-surface);
  border: 1px solid rgba(11, 34, 57, 0.06);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow);
  padding: var(--bb-sp-lg);
}

/* --- Focus visibility (WCAG 2.2 AA) --------------------------------------- */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--bb-focus);
}

/* --- Reset moments / messages (shame-free: never red) --------------------- */
.msgprint,
.form-message,
.modal .modal-body .alert,
.indicator.red,
.alert-danger {
  background-color: var(--bb-amber) !important;
  border-color: #E0B45F !important;
  color: var(--bb-ink) !important;
  border-radius: var(--bb-radius);
}
.indicator.red,
.indicator-pill.red {
  background-color: var(--bb-amber) !important;
  color: var(--bb-ink) !important;
}

/* --- Reduced motion (WCAG 2.2 AA) ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}