/* ============================================================
   nabr.club design system
   Loaded first: this file establishes the layer order for every
   other stylesheet, so nothing below depends on file order.
   ============================================================ */

/* `components` holds the general-purpose pieces that replaced Bootstrap;
   `app` holds this product's own components, and sits after them so a
   product rule always wins over the generic one it is refining. */
@layer reset, base, layout, components, app, utilities;

:root {
  /* Palette */
  --color-primary: #6366f1;
  --color-secondary: #a78bfa;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #06b6d4;
  --color-light: #f8f9fc;
  --color-dark: #1e1b4b;

  /* Ink and surfaces */
  --color-body: #212529;
  --color-body-bg: #fff;
  --color-muted: rgba(33, 37, 41, 0.75);
  --color-border: #dee2e6;
  --color-heading: inherit;

  /* Focus rings, as alpha over the brand colour. 25% is the ring Bootstrap
     drew on nav links, the navbar toggler and the accordion; buttons and
     inputs use the stronger one, which is what this app always overrode
     them to. */
  --primary-ring: color-mix(in srgb, var(--color-primary) 25%, transparent);
  --primary-ring-strong: color-mix(in srgb, var(--color-primary) 35%, transparent);
  /* Sass derived this by pulling the brand colour's HSL lightness down 8%.
     color-mix() with black is not the same operation on a colour this
     saturated, so it is pinned to the exact value Sass emitted. */
  --primary-hover: #3e41ee;

  /* Typography */
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-size: 1rem;
  --line-height: 1.5;

  /* Radii */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-pill: 50rem;

  /* Shadows */
  --shadow: 0 2px 12px rgb(30 27 75 / 0.06);
  --shadow-sm: 0 1px 4px rgb(30 27 75 / 0.04);
  --shadow-lg: 0 8px 30px rgb(30 27 75 / 0.10);

  /* Spacing scale, matching the utility class suffixes */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;

  --container-max: 1320px;

  /* Motion */
  --transition: 0.15s ease-in-out;
}