/* A1CMS design tokens: the single source of truth for colour and type.
   Both shared themes (a1-shared-theme.css and accu_law's accu-shared-theme.css)
   alias their own token names to these, so a palette change happens here once.

   Palette rules:
   - Backgrounds are white or a near-white neutral. No cream, no yellow washes.
   - Pastels carry the highlighting (lavender leads, matching the admin menu colours).
   - Gold is a deliberate accent: the active item, the primary action, and
     section outlines. It is never a page, panel, or row background. */

:root {
  /* Ink and neutrals */
  --a1-ink: #243043;
  --a1-ink-soft: #3a465c;
  --a1-muted: #6c7388;
  --a1-border: #e6e4f2;
  --a1-border-strong: #d5d1e8;

  /* Surfaces */
  --a1-page: #f7f7fb;
  --a1-shell: #ffffff;
  --a1-surface: #ffffff;
  --a1-surface-alt: #f6f5fd;

  /* Pastel accents */
  --a1-lavender: #e5e7ff;
  --a1-lavender-deep: #aca7ea;
  --a1-purple-ink: #550672;
  --a1-purple-soft: #7c74c9;
  --a1-mint: #def5ee;
  --a1-sky: #e4f0ff;
  --a1-peach: #ffe9d9;
  --a1-rose: #ffe5ec;

  /* Gold accent */
  --a1-gold: #d4af57;
  --a1-gold-deep: #b98919;
  --a1-gold-ink: #1b1304;
  --a1-gold-gradient: linear-gradient(135deg, #f1c84b 0%, #d8b85a 48%, #b98919 100%);
  /* Polished metal, as a lit edge rather than a striped one. Many stops band
     visibly across a 1px border or a small glyph and read as a rendering
     fault, so each ramp here is a single sweep from highlight to shade. */
  --a1-gold-metallic: linear-gradient(180deg, #f4dc93 0%, #c9a13a 46%, #8a6510 100%);
  --a1-gold-edge: linear-gradient(160deg, #f0d78f 0%, #c9a34a 44%, #9d7616 100%);
  --a1-gold-metallic-rule: linear-gradient(90deg, #b8891c 0%, #e8cd7a 30%, #f6e6b4 50%, #e0c063 70%, #a87c11 100%);
  /* Gold for words. The ramps above drop below a readable contrast on white
     at their light end, so text uses this darker sweep, which stays above
     4.5 to 1 against white from top to bottom. */
  --a1-gold-text: #81600c;
  --a1-gold-text-metallic: linear-gradient(180deg, #96700f 0%, #6b4d08 100%);

  /* Gold as an outline. Sections, panels and the sidebar groups are edged in
     gold because lavender on a white page does not read as a boundary. The
     fill behind these borders stays white or pastel. */
  --a1-section-border: rgba(216, 184, 90, 0.58);
  --a1-section-border-strong: rgba(216, 184, 90, 0.82);

  /* Scrollbars */
  --a1-scrollbar-track: rgba(229, 231, 255, 0.55);
  --a1-scrollbar-thumb: rgba(150, 143, 214, 0.85);
  --a1-scrollbar-thumb-hover: #7c74c9;

  /* Controls. Every button and every single-line field is one height, so a
     row of fields and buttons lines up. The small height is for compact rows
     only. */
  --a1-control-height: 40px;
  --a1-control-height-sm: 32px;

  /* Buttons have edged corners: two corners round and two nearly square. */
  --a1-button-radius: 11px 4px;
  --a1-button-radius-sm: 8px 3px;

  /* A resting button is a white face that shades into lavender, with a lit
     top edge and a shaded bottom edge. */
  --a1-button-face: linear-gradient(180deg, #ffffff 0%, var(--a1-lavender) 130%);
  --a1-button-edge: var(--a1-border-strong);
  --a1-button-bevel: inset 0 1px 0 #ffffff, inset 0 -2px 0 rgba(85, 6, 114, 0.06);
  --a1-button-ring: rgba(172, 167, 234, 0.3);

  /* The primary button is polished gold with dark text. White text on gold
     does not have enough contrast to read. */
  --a1-button-gold-face: linear-gradient(180deg, #f8e19a 0%, #e0b752 52%, #bb8b1c 100%);
  --a1-button-gold-edge: #a8801c;
  --a1-button-gold-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(120, 84, 8, 0.18);
  --a1-button-gold-ring: rgba(222, 186, 92, 0.42);

  /* A destructive button stays recognisable, in a soft rose. */
  --a1-button-rose-face: linear-gradient(180deg, #ffffff 0%, #fbe4ea 60%, #f2c3d1 100%);
  --a1-button-rose-edge: #d99aae;
  --a1-button-rose-ink: #6f3550;
  --a1-button-rose-ring: rgba(222, 159, 178, 0.35);

  --a1-shadow: 0 16px 34px rgba(36, 32, 68, 0.10);
  --a1-shadow-soft: 0 8px 20px rgba(36, 32, 68, 0.07);

  /* Type: one UI family and one title family for the whole site */
  --a1-title-font: "Fraunces", "Georgia", serif;
  --a1-ui-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Lists are one size everywhere, so a native Perfex table and a themed one
     do not read as two different products. */
  --a1-table-font-size: 14.5px;

  /* The three sizes a list row uses: the name, the line under it, and the
     smallest line of all (a role, a timestamp). Modules that ship their own
     10px and 11px type are raised to these instead. */
  --a1-list-primary-size: 15px;
  --a1-list-secondary-size: 13.5px;
  --a1-list-meta-size: 12.5px;

  /* One heading size for every dashboard widget, whichever module ships it. */
  --a1-widget-title-size: 16.5px;

  /* Meaning keeps its colour, in this palette: money in, money out, a note and
     a warning. Core ships Bootstrap and Tailwind hues that match neither this
     palette nor each other. */
  --a1-positive: #1f7a5c;
  --a1-negative: #b3364d;
  --a1-info: #4a5db8;
  --a1-warning: #9a6b12;
}