/* Beetzee design-system foundation.
   Every value a new rule should need is named here: a colour ramp, a spacing
   scale, a type scale and a radius scale. Legacy names (--ink, --muted,
   --line, --brand, ...) still live in assets/app.css and are still valid;
   nothing has to be migrated in one go. */
:root {
    /* Native browser furniture - select drop-downs, date and time pickers,
       scrollbars, number spinners, autofill - is painted by the browser and
       not by this stylesheet. Without this line the browser assumed a light
       page, so a dropdown opened white and a date picker opened white on a
       near-black screen. This is the only place it needs saying: the light
       islands (the branding manager, the gallery templates, the flipbook
       editor) set color-scheme: light on their own container. */
    color-scheme: dark;

    /* ---- Surfaces ------------------------------------------------------ */
    --bz-bg-canvas: #070910;
    --bz-bg-sidebar: #090c14;
    --bz-bg-surface: #0d111b;
    --bz-bg-surface-raised: #121725;
    --bz-bg-surface-hover: #171d2d;
    /* The colour every input in the product is actually painted. The token
       used to say #0a0e17, which is bluer and darker than anything on screen,
       so the fifteen bz-ux controls using it did not match the rest. */
    --bz-bg-input: #151519;
    /* The panel/card surface, as painted by the skin. */
    --bz-bg-card: rgba(31, 31, 35, 0.94);

    --bz-border-subtle: rgba(255, 255, 255, 0.07);
    --bz-border-default: rgba(255, 255, 255, 0.11);
    --bz-border-strong: rgba(255, 255, 255, 0.17);

    /* ---- Text ---------------------------------------------------------- */
    --bz-text-primary: #f5f7fb;
    --bz-text-secondary: #a8b0c2;
    /* Lifted twice. #717b91 scored 4.21:1 on raised surfaces; #8e97ab fixed
       those but still measured 4.19:1 on the violet plan and empty-state
       panels. #9aa2b5 clears 4.8:1 on every surface in this palette. */
    --bz-text-tertiary: #9aa2b5;
    /* Disabled text is exempt from the 4.5:1 rule, but this token is also used
       for the crossed-out icons in the plan comparison - a meaningful graphic,
       which needs 3:1. #4f586b measured 1.72:1 there. */
    --bz-text-disabled: #7c8496;
    --bz-text-on-brand: #ffffff;

    /* ---- Brand ramp ----------------------------------------------------
       Light end down to dark end. Anything from -600 down carries white text
       at 4.5:1 or better; -200 and lighter are for text and icons sitting on
       a dark surface. Measured, not guessed. */
    --bz-brand-100: #ede9fe;   /* 16.3:1 on the page */
    --bz-brand-200: #ddd6fe;   /* 14.0:1 on the page */
    --bz-brand-300: #c4b5fd;   /* 10.5:1 on the page - the focus ring */
    --bz-brand-400: #a78bfa;   /*  7.1:1 on the page */
    --bz-brand-500: #8b5cf6;   /*  4.6:1 on the page */
    --bz-brand-600: #7a53ed;   /*  4.9:1 against white text */
    --bz-brand-700: #6d28d9;   /*  7.1:1 against white text */
    --bz-brand-800: #5b21b6;
    --bz-brand-900: #4c1d95;

    --bz-accent-300: #f0abfc;
    --bz-accent-500: #d946ef;
    --bz-accent-600: #d6157f;  /*  4.9:1 against white text */
    --bz-accent-700: #a21caf;

    --bz-brand: var(--bz-brand-500);
    --bz-brand-hover: #9d73ff;
    --bz-brand-soft: rgba(139, 92, 246, 0.14);
    --bz-accent: var(--bz-accent-500);
    --bz-accent-soft: rgba(217, 70, 239, 0.12);

    /* The one action colour. Every stop clears 4.5:1 against white label text
       and 3:1 against an ordinary button. */
    --bz-brand-gradient: linear-gradient(135deg, var(--bz-brand-600), #a53fd6 62%, var(--bz-accent-600));
    --bz-brand-gradient-hover: linear-gradient(135deg, var(--bz-brand-hover), #b34fe2 62%, #e42b8e);

    /* ---- Status -------------------------------------------------------- */
    --bz-success: #34d399;
    --bz-success-soft: rgba(52, 211, 153, 0.12);
    --bz-warning: #fbbf24;
    --bz-warning-soft: rgba(251, 191, 36, 0.12);
    --bz-danger: #fb7185;
    --bz-danger-soft: rgba(251, 113, 133, 0.12);
    --bz-info: #38bdf8;
    --bz-info-soft: rgba(56, 189, 248, 0.12);
    --bz-focus-ring: var(--bz-brand-300);

    /* ---- Spacing -------------------------------------------------------
       The half-steps are not decoration: 6, 10, 14, 18 and 22px are the most
       common paddings in this codebase, so a scale without them sends people
       straight back to raw pixels. */
    --bz-space-0: 0;
    --bz-space-05: 2px;
    --bz-space-1: 4px;
    --bz-space-15: 6px;
    --bz-space-2: 8px;
    --bz-space-25: 10px;
    --bz-space-3: 12px;
    --bz-space-35: 14px;
    --bz-space-4: 16px;
    --bz-space-45: 18px;
    --bz-space-5: 20px;
    --bz-space-55: 22px;
    --bz-space-6: 24px;
    --bz-space-7: 28px;
    --bz-space-8: 32px;
    --bz-space-10: 40px;
    --bz-space-12: 48px;
    --bz-space-16: 64px;

    /* ---- Radius -------------------------------------------------------- */
    --bz-radius-xs: 6px;
    --bz-radius-sm: 8px;
    --bz-radius-md: 12px;
    --bz-radius-lg: 16px;
    --bz-radius-xl: 20px;
    --bz-radius-circle: 50%;
    --bz-radius-pill: 999px;

    --bz-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.16);
    --bz-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.22);
    --bz-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.28);

    /* ---- Type ----------------------------------------------------------
       12px is the floor. Cham's rule is that an eight-year-old can read the
       screen at a glance, and 10 and 11px text does not pass that. There is
       deliberately no token below --bz-text-supporting. */
    --bz-font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bz-text-supporting: 12px;  /* captions, table sub-lines, chips */
    --bz-text-small: 13px;       /* dense table cells */
    --bz-text-body: 14px;        /* default UI text */
    --bz-text-body-lg: 15px;
    --bz-text-lead: 16px;        /* intro paragraphs, form inputs */
    --bz-text-section-title: 18px;
    --bz-text-subhead: 20px;
    --bz-text-card-title: 22px;
    --bz-text-figure: 24px;      /* metric numbers */
    --bz-text-page-title: 28px;
    --bz-text-display: 32px;

    --bz-weight-regular: 400;
    --bz-weight-medium: 600;
    --bz-weight-bold: 800;

    /* ---- Controls ------------------------------------------------------
       44px is the minimum for anything you press with a thumb. */
    --bz-control-height: 44px;
    --bz-control-height-sm: 36px;
}