/*
 * Entry stylesheet: declares cascade order, then design tokens.
 *
 * The layer order is declared here and nowhere else, so every other stylesheet
 * can be loaded in any order and still cascade predictably. Each file assigns
 * its rules to exactly one layer:
 *
 *   tokens      application.css  design tokens only, no selectors beyond :root
 *   base        base.css         element defaults, no class selectors
 *   layout      layout.css       page shell and spacing primitives
 *   components  components.css   named, reusable pieces
 *   components  backoffice.css   Active Admin shell, Backoffice layouts only
 *
 * Deliberately generic: a neutral palette and a single accent, all expressed as
 * custom properties. Restyling means editing the tokens below, not the rules.
 * Partner branding is not applied here; the report PDF carries its own inline
 * stylesheet because it is rendered from an HTML string with no asset host.
 */

@layer tokens, base, layout, components;

@layer tokens {
  :root {
    /* Neutral ramp. Lower numbers are lighter. */
    --colour-neutral-0: #ffffff;
    --colour-neutral-50: #f7f8fa;
    --colour-neutral-100: #eef0f4;
    --colour-neutral-200: #dfe3ea;
    --colour-neutral-300: #c8cfda;
    --colour-neutral-500: #7b8598;
    --colour-neutral-700: #454f60;
    --colour-neutral-900: #1b2030;

    /* Single accent, swap this ramp to rebrand. */
    --colour-accent-50: #eef2fb;
    --colour-accent-200: #c3d0ef;
    --colour-accent-500: #3b5fbd;
    --colour-accent-700: #2b4691;

    /* Status hues, used sparingly and always alongside text. */
    --colour-positive-500: #2f7a56;
    --colour-caution-50: #fdf6e7;
    --colour-caution-500: #8a6520;
    --colour-critical-50: #fdf0ef;
    --colour-critical-500: #a33a32;

    /* Semantic aliases. Rules reference these, never the ramps above. */
    --surface-page: var(--colour-neutral-50);
    --surface-raised: var(--colour-neutral-0);
    --surface-sunken: var(--colour-neutral-100);
    --text-primary: var(--colour-neutral-900);
    --text-secondary: var(--colour-neutral-700);
    --text-muted: var(--colour-neutral-500);
    --text-on-accent: var(--colour-neutral-0);
    --border-subtle: var(--colour-neutral-200);
    --border-strong: var(--colour-neutral-300);
    --accent: var(--colour-accent-500);
    --accent-strong: var(--colour-accent-700);
    --accent-wash: var(--colour-accent-50);
    --focus-ring: var(--colour-accent-500);

    /* Spacing scale, 4px base. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Type scale. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --leading-tight: 1.25;
    --leading-normal: 1.6;

    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;

    --shadow-sm: 0 1px 2px rgb(27 32 48 / 6%);
    --shadow-md: 0 1px 3px rgb(27 32 48 / 8%), 0 4px 12px rgb(27 32 48 / 4%);

    --measure: 68ch;
    --container: 72rem;
  }
}