/*!
 * Ember — brand token layer
 * -------------------------
 * Palette: warm hospitality. Terracotta #c2410c on a paper canvas #f7f3ec,
 * espresso #1d1310 chrome, amber / olive / teal-slate accents.
 *
 * Change brand colour HERE and nowhere else. It must load LAST — after
 * style.min.css, app.css, pos.css and auth.css — because it works by
 * redefining the tokens those files already consume. The other files carry
 * matching defaults only so the shell survives this one failing to load; they
 * are not a second place to edit.
 *
 * Every foreground/background pair below is checked against WCAG AA: 4.5:1 for
 * text, 3:1 for large text, icons and control borders.
 */

/* ============================================================ light (default) */
:root {
  /* --- Bootstrap surface + ink --- */
  --bs-body-bg: #fffdf9;
  --bs-body-bg-rgb: 255, 253, 249;
  --bs-body-color: #2b211a;
  --bs-body-color-rgb: 43, 33, 26;
  --bs-emphasis-color: #1a120c;
  --bs-emphasis-color-rgb: 26, 18, 12;
  --bs-secondary-color: rgba(43, 33, 26, 0.72);
  --bs-secondary-color-rgb: 43, 33, 26;
  --bs-secondary-bg: #ece4d7;
  --bs-secondary-bg-rgb: 236, 228, 215;
  --bs-tertiary-bg: #f2ece1;
  --bs-tertiary-bg-rgb: 242, 236, 225;
  --bs-border-color: #e0d5c6;
  --bs-border-color-translucent: rgba(61, 40, 28, 0.16);

  --bs-link-color: #2b211a;
  --bs-link-color-rgb: 43, 33, 26;
  --bs-link-hover-color: #c2410c;
  --bs-link-hover-color-rgb: 194, 65, 12;

  /* --- shell --- */
  --app-canvas: #f7f3ec;
  --app-surface: #fffdf9;
  --app-hairline: rgba(61, 40, 28, 0.13);
  --app-sidebar-bg: #1d1310;
  --app-primary-gradient: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);

  /* The ember highlight is decorative only — glows, drifting fields, accent
     bars. Never put text on it: white on #e05d2d is 3.28:1. */
  --app-ember-rgb: 224, 93, 45;

  /* Control boundaries have to clear 3:1 against their own surface (WCAG
     1.4.11), which the soft hairline used for table rules cannot do. */
  --app-control-border: #9c8a76;

  --app-radius: 10px;
  --app-radius-sm: 8px;

  /* Hairlines separate; shadows are reserved for things that float. */
  --app-shadow-sm: 0 1px 1px rgba(61, 40, 28, 0.05);
  --app-shadow: none;
  --app-shadow-lg: 0 2px 6px rgba(46, 30, 20, 0.08), 0 24px 48px -24px rgba(46, 30, 20, 0.36);

  /* --- KPI accents: ember / saffron / olive / teal-slate --- */
  --tone-sale: #c2410c;
  --tone-return: #b45309;
  --tone-purchase-return: #0f766e;
  --tone-profit: #4d7c0f;
  --tone-paid: #1f7a4d;
  --tone-due: #a16207;
  --tone-purchase-paid: #0f766e;
  --tone-purchase-due: #b91c1c;
}

/* =================================================================== dark */
/* Every token set in the :root block above has to be re-set here. `:root` and
   `[data-bs-theme=dark]` carry the same specificity, and this file loads after
   style.min.css — so a token left out below keeps its light value while the
   switcher is on dark. */
[data-bs-theme="dark"] {
  --bs-body-bg: #171310;
  --bs-body-bg-rgb: 23, 19, 16;
  --bs-body-color: #ece3d9;
  --bs-body-color-rgb: 236, 227, 217;
  --bs-emphasis-color: #fff8f2;
  --bs-emphasis-color-rgb: 255, 248, 242;
  --bs-secondary-color: rgba(236, 227, 217, 0.82);
  --bs-secondary-color-rgb: 236, 227, 217;
  --bs-secondary-bg: #2b241f;
  --bs-secondary-bg-rgb: 43, 36, 31;
  --bs-tertiary-bg: #1c1713;
  --bs-tertiary-bg-rgb: 28, 23, 19;
  --bs-border-color: #352c25;
  --bs-border-color-translucent: rgba(255, 240, 230, 0.16);

  --bs-link-color: #fff8f2;
  --bs-link-color-rgb: 255, 248, 242;
  --bs-link-hover-color: #e2632c;
  --bs-link-hover-color-rgb: 226, 99, 44;

  /* Deliberate split: --bs-primary is the *foreground* mark (tab underline,
     active rank badge, meter fill) and has to clear 4.5:1 on a dark surface,
     which #c2410c does not (3.3:1). --bs-primary-rgb stays terracotta because
     .bg-primary / .text-bg-primary paint white text on it, and white on the
     lighter ember fails. Keep the two apart. */
  --bs-primary: #e2632c;

  --app-canvas: #171310;
  --app-surface: #201a16;
  --app-hairline: rgba(255, 240, 230, 0.1);
  --app-sidebar-bg: #150f0c;
  --app-control-border: #7c6a5c;

  --app-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.5);
  --app-shadow: none;
  --app-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.95);

  --tone-sale: #e2632c;
  --tone-return: #f0a03a;
  --tone-purchase-return: #4bb8ac;
  --tone-profit: #a3c94e;
  --tone-paid: #3fbc7c;
  --tone-due: #e0a640;
  --tone-purchase-paid: #4bb8ac;
  --tone-purchase-due: #ef6a5f;
}

/* Same reason as the --bs-primary split: these paint the primary as text, and
   the terracotta --bs-primary-rgb they read only reaches 3.3:1 on a dark
   surface. .bg-primary keeps the rgb, because it carries white text. */
[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .link-primary {
  color: #e2632c !important;
}

/* ============================================================= display type */
/* assets/fonts ships Inter and Cairo only, and the till must not depend on a
   font CDN, so the display voice is weight and tracking on the text face
   rather than a second family. */
h1, h2, h3,
.h1, .h2, .h3,
.content-heading h1,
.content-heading h2,
.content-heading h3 {
  font-weight: 680;
  letter-spacing: -0.026em;
}
.page-sidebar .logo-text { letter-spacing: -0.03em; }
.stat-value { letter-spacing: -0.035em; }

/* ================================================================== shape */
/* 10px on shell surfaces, 8px on controls. */
.btn-sm { --bs-btn-border-radius: 6px; }
.btn-lg { --bs-btn-border-radius: 10px; }
.badge { border-radius: 6px; }
.dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu li a,
.dropdown-menu > li > a:not(.dropdown-item),
.dropdown-menu > li > .btn-link { border-radius: 6px; }
.header-icon-btn { border-radius: 8px; }
.filter-toggle { border-radius: 10px; }
.filter-toggle .date-btn { --bs-btn-border-radius: 7px; }
.stat-icon { border-radius: 9px; }
.page-link { border-radius: 6px; }
@media (min-width: 992px) {
  body:not(.layout-boxed) .page-sidebar { border-radius: 12px; }
}
@media (max-width: 991.98px) {
  .page-sidebar { border-radius: 0 12px 12px 0; }
}

/* Control boundaries, at the contrast the hairline cannot carry. */
.form-control,
.form-select,
.input-group-text,
.dropzone {
  border-color: var(--app-control-border);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
}
.bootstrap-select > .dropdown-toggle {
  border-color: var(--app-control-border) !important;
}
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
  border-color: var(--bs-primary) !important;
}

/* ==================================================================== POS
   The till and the back office are one brand: the rail is the same espresso
   as the admin sidebar and the "selected" colour is the same terracotta. */
.pos-modern {
  --pos-nav: #241a15;
  --pos-nav-2: #2f221b;
  --pos-nav-ink: rgba(255, 246, 240, 0.82);
  --pos-nav-ink-dim: rgba(255, 246, 240, 0.58);

  --pos-accent: #c2410c;
  --pos-accent-ink: #ffffff;
  --pos-accent-soft: #fbeee7;

  --pos-canvas: #f7f3ec;
  --pos-surface: #fffdf9;
  --pos-line: #e6dccc;
  --pos-line-soft: #f2ece1;
  --pos-ink: #26201b;
  --pos-ink-2: #5c4f45;
  --pos-ink-3: #7d6e60;

  --pos-green: #197a45;
  --pos-green-soft: #e8f3ec;
  --pos-green-line: #c7e2d2;
  --pos-blue: #22617a;
  --pos-blue-soft: #e9f1f4;
  --pos-blue-line: #cbdfe6;
  --pos-purple: #5b7320;
  --pos-purple-soft: #f0f3e4;
  --pos-purple-line: #dde6c2;
  --pos-orange: #b45309;
  --pos-orange-soft: #fdf0e2;
  --pos-orange-line: #f7dcbb;
  --pos-red: #dc2626;
  --pos-red-soft: #fdeaea;
  --pos-amber: #a16207;
  --pos-amber-soft: #fdf3e5;

  --pos-radius: 12px;
  --pos-radius-sm: 10px;
  --pos-radius-xs: 8px;
  --pos-shadow: 0 1px 1px rgba(61, 40, 28, 0.05);
  --pos-shadow-lg: 0 2px 6px rgba(46, 30, 20, 0.08), 0 24px 48px -24px rgba(46, 30, 20, 0.4);
}