/* ************************************************************************************************
 * SmartCart360 — shared design tokens (ported from app/server's gen-3 mode-island system).
 *
 * The SINGLE shared design surface. Custom properties + the self-hosted brand fonts — no
 * components, no layout. Every mode imports this and builds its own component CSS against
 * these tokens, so the modes stay visually consistent while each owns 100% of its markup.
 *
 * Fonts are self-hosted variable fonts (latin subset) — no third-party CDN request, which
 * matters most on the credential pages.
 *
 * Breakpoints (CSS vars can't be used in @media conditions — copy these literals):
 *   sm 480px   md 768px   lg 1024px   xl 1280px
 * ********************************************************************************************** */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/material-icons.woff2") format("woff2");
}

/* The standard Material Icons ligature class (the glyph plumbing for the font above —
   size/color belong to the mode stylesheets). */
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

:root {
  /* ---- Color: brand ---- */
  --sc-green: #1f9d28;
  --sc-green-deep: #137a1d;
  --sc-green-tint: rgba(31, 157, 40, .13);
  --sc-blue: #1f9fe0;
  --sc-blue-deep: #167bb0;
  --sc-blue-tint: rgba(31, 159, 224, .14);
  /* Company-mode accent (amber) */
  --sc-amber: #c4880f;
  --sc-amber-deep: #8a5d08;
  --sc-amber-tint: rgba(196, 136, 15, .14);
  /* Shipping-mode accent (violet) */
  --sc-violet: #7c5cd6;
  --sc-violet-deep: #573fb0;
  --sc-violet-tint: rgba(124, 92, 214, .14);
  /* Purchasing-hub accent (teal — green/blue mix, frozen from hub.css's color-mix) */
  --sc-teal: #1f9e7b;
  --sc-teal-deep: #147a5f;
  --sc-teal-tint: rgba(31, 158, 123, .14);
  /* Accounting-hub accent (bronze — amber/ink mix, frozen from hub.css's color-mix) */
  --sc-bronze: #846723;
  --sc-bronze-deep: #614d1e;
  --sc-bronze-tint: rgba(132, 103, 35, .14);

  /* ---- Color: ink (text) ---- */
  --sc-ink: #243640;
  --sc-ink-soft: #5c7080;
  --sc-ink-faint: #8aa0ac;

  /* ---- Color: surfaces & lines ---- */
  --sc-bg: #f4f7f6;
  --sc-surface: #ffffff;
  --sc-surface-alt: #f8faf9;
  --sc-line: #e2eae7;
  --sc-line-strong: #cdd9d4;

  /* ---- Color: status ---- */
  --sc-danger: #c0392b;
  --sc-danger-bg: #fcf0ee;
  --sc-warn: #b9770e;
  --sc-success: #176a26;
  --sc-success-bg: #e9f7ec;

  /* ---- Company-mode accent (the edit-mode surface) ---- */
  --sc-company: #ffc100;
  --sc-company-ink: #243640;

  /* ---- Typography ---- */
  --sc-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --sc-font-body: "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale (mobile → desktop) */
  --sc-text-xs: .72rem;
  --sc-text-sm: .82rem;
  --sc-text-md: .92rem;
  --sc-text-lg: 1.05rem;
  --sc-text-xl: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  --sc-text-2xl: clamp(1.5rem, 1.1rem + 2vw, 2.1rem);

  /* ---- Spacing scale ---- */
  --sc-space-1: .25rem;
  --sc-space-2: .5rem;
  --sc-space-3: .75rem;
  --sc-space-4: 1rem;
  --sc-space-5: 1.5rem;
  --sc-space-6: 2rem;
  --sc-space-7: 3rem;

  /* ---- Radii ---- */
  --sc-radius-sm: 9px;
  --sc-radius: 14px;
  --sc-radius-lg: 20px;

  /* ---- Shadows ---- */
  --sc-shadow-sm: 0 1px 2px rgba(36, 54, 64, .08);
  --sc-shadow: 0 1px 2px rgba(36, 54, 64, .06), 0 8px 24px -12px rgba(36, 54, 64, .18);
  --sc-shadow-lg: 0 4px 8px rgba(36, 54, 64, .08), 0 24px 48px -16px rgba(36, 54, 64, .26);

  /* ---- Motion ---- */
  --sc-dur-fast: 120ms;
  --sc-dur: 200ms;
  --sc-dur-slow: 320ms;
  --sc-ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Layout metrics ---- */
  --sc-topbar-h: 56px;
  --sc-drawer-w: 280px;
  --sc-content-max: 920px;
  --sc-z-topbar: 100;
  --sc-z-drawer: 200;
  --sc-z-dialog: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sc-dur-fast: 0ms;
    --sc-dur: 0ms;
    --sc-dur-slow: 0ms;
  }
}