/* SuperOffice — the design-system TOKENS only (fonts + --so-*).
 * Safe to load on the builder: it styles nothing, so the customer's document
 * (tables, cards, its own fonts) is untouched. superoffice.css adds the
 * components and re-points the older vocabularies for the rest of the site.
 *
 * Source: SuperOffice Design System.
 *
 * Source of truth: the "SuperOffice Design System" artifact
 * (https://claude.ai/artifact/5V4HARARTuhAGiGzQBJTFj), restated in BRAND.md.
 * Loaded LAST on every page, so it re-points the older shared vocabularies
 * (blue-whale.css --color-*, palette.css, the CRM names) onto one palette and one
 * face. Components below follow its guidelines: one gold primary per section,
 * selection in navy never gold, borders not shadows, Montserrat throughout.
 *
 * The DOCUMENT's own palette (--doc-*) is deliberately absent: it is the customer's
 * artefact and stays frozen.
 */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Montserrat-400.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Montserrat-500.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Montserrat-600.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/Montserrat-700.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/Montserrat-400i.ttf') format('truetype')}

:root{
  /* ---- the tokens, light | dark ---- */
  --so-paper-000: light-dark(#ffffff, #1a1f27);
  --so-paper-050: light-dark(#fcfbf9, #141821);
  --so-paper-100: light-dark(#f6f4ef, #0e1219);
  --so-stone-200: light-dark(#e3ddd0, #2a3140);
  --so-stone-300: light-dark(#d2c8b4, #3a4356);
  --so-ink-900:   light-dark(#0e0e0e, #f3f1ec);
  --so-ink-600:   light-dark(#3f4a56, #b7bdc7);
  --so-ink-500:   light-dark(#55606c, #98a0ad);
  --so-navy-900:  light-dark(#0b1d32, #e3e9f5);
  --so-navy-700:  light-dark(#133353, #c7d3ea);
  --so-navy-500:  light-dark(#1b4b7a, #8fb0d8);
  --so-navy-050:  light-dark(#e8edf4, #1e2a3d);
  --so-gold-400:  light-dark(#d4ba7a, #e6d095);
  --so-gold-500:  light-dark(#c5a55a, #d4ba7a);
  --so-gold-600:  light-dark(#a8893e, #e0c98a);
  --so-gold-800:  light-dark(#7a601c, #ead49a);
  --so-gold-050:  light-dark(#f6eedc, #2a2416);
  --so-success-600: light-dark(#2f7a4f, #7fcf9f);
  --so-danger-600:  light-dark(#b6453a, #ef8a80);
  /* fixed in both themes: the app bar is always navy, the gold gradient always gold */
  --so-bar: #0b1d32;
  --so-grad-gold: linear-gradient(135deg, #d4ba7a, #c5a55a 50%, #a8893e);
  --so-grad-navy: linear-gradient(125deg, #0b1d32, #133353 55%, #1b4b7a);
  --so-shadow-card: light-dark(0 1px 2px rgba(20,33,61,.06), 0 1px 2px rgba(0,0,0,.5));
  --so-shadow-sheet: light-dark(0 -8px 32px rgba(20,33,61,.18), 0 -8px 32px rgba(0,0,0,.6));
  --so-shadow-dialog: light-dark(0 24px 64px rgba(20,33,61,.22), 0 24px 64px rgba(0,0,0,.6));
  --so-shadow-gold: light-dark(0 8px 20px rgba(168,137,62,.28), 0 8px 20px rgba(0,0,0,.5));
  --so-shadow-navy: light-dark(0 8px 20px rgba(11,29,50,.22), 0 8px 20px rgba(0,0,0,.5));
  --so-r-sm: 6px; --so-r-md: 10px; --so-r-lg: 14px; --so-r-xl: 20px; --so-r-pill: 999px;
  --so-font: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --so-ease: cubic-bezier(.2,.8,.25,1);

}