/* =========================================================================
   LAYER 1 — PRIMITIVES
   =========================================================================

   The raw palette. Every colour the product is allowed to use lives here
   and NOWHERE else. These names describe what a colour *is* (navy, gold,
   step 500), never what it is *for* — a primitive has no opinion about
   whether it is a background, a border, or overdue rent.

   Rules for this file:
     1. This is the only stylesheet permitted to contain a hex literal.
        Everything downstream reads var(--rq-*). TokenDisciplineTests in
        Npbnb.WebApp.UITests enforces this.
     2. Nothing here is theme-aware. There is no light/dark in this file.
        A primitive has one value, always. Themes pick *between*
        primitives; they never redefine one.
     3. Never consume a primitive from component CSS. Components read
        LAYER 2 roles (rq-theme.css). If you find yourself wanting
        var(--rq-navy-800) in a component, the role you need is missing —
        add it to layer 2 instead.

   Ramps run 50 (lightest) → 950 (darkest), matching the convention used
   by Tailwind/Radix/Bootstrap so the numbers are guessable.

   Load order: must load before rq-theme.css. See the <link> block in
   Views/Shared/_AppAuthLayout.cshtml.
   ========================================================================= */

:root {

    /* ---------------------------------------------------------------
       NAVY — the structural axis.
       Carries the brand at the dark end and degrades to plain cool
       greys at the light end, so one ramp covers both the editorial
       hero panels and ordinary app chrome (borders, muted text).
       900 and 800 are the authoritative editorial brand values; the
       rest of the ramp was built around them.
       --------------------------------------------------------------- */
    --rq-navy-950: #070b18;
    --rq-navy-900: #0b1024;   /* brand anchor — editorial hero base */
    --rq-navy-850: #0d1430;   /* the hero gradient's far stop */
    --rq-navy-800: #141c3a;
    --rq-navy-700: #1d2950;
    --rq-navy-600: #2b3a68;
    --rq-navy-500: #3d4f80;
    --rq-navy-400: #5a6b98;
    --rq-navy-300: #8894b3;
    --rq-navy-200: #b8c0d2;
    --rq-navy-100: #dcdfe8;
    --rq-navy-50:  #f0f2f6;

    /* ---------------------------------------------------------------
       PAPER — warm light surfaces.
       Deliberately NOT white. The editorial pages sit on #f6f3ec and
       that warmth is what stops the navy reading as corporate-cold.
       --------------------------------------------------------------- */
    --rq-paper-100: #ffffff;
    --rq-paper-200: #faf8f3;
    --rq-paper-300: #f6f3ec;  /* brand anchor — editorial page base */
    --rq-paper-400: #ede8dd;
    --rq-paper-500: #ddd6c7;

    /* ---------------------------------------------------------------
       BLUE — the interactive axis: links, buttons, focus, selection.
       This is what the user can *act on*. 500 is the editorial blue.
       400 exists because 500 reaches only 4.13:1 on navy-900 — dark
       themes must step up to 400 (7.35:1) for anything text-sized.
       --------------------------------------------------------------- */
    --rq-blue-700: #1e3fa8;
    --rq-blue-600: #2a54d4;
    --rq-blue-500: #3b6cf5;   /* brand anchor — editorial accent */
    --rq-blue-400: #7aa0ff;
    --rq-blue-300: #a8c0ff;
    --rq-blue-200: #d0dcff;
    --rq-blue-100: #e8eeff;

    /* ---------------------------------------------------------------
       GOLD — money and status ONLY. Not a general accent.
       Per product decision: gold marks value and standing (amounts,
       payouts, verified badges, tiers). It never becomes a button.

       The ramp is lopsided on purpose. 400 is the brand gold and it is
       gorgeous on navy (11.6:1) but unusable on white (1.6:1 — past
       failing, effectively invisible). 700 and 800 exist purely so
       light themes have a legible gold for text. If you are picking a
       gold by eye you are picking wrong: use the --rq-money role.
       --------------------------------------------------------------- */
    --rq-gold-800: #6b5323;
    --rq-gold-700: #8a6d2f;   /* light-theme money text — 4.7:1 on white */
    --rq-gold-600: #b8944e;
    --rq-gold-500: #d4ab63;
    --rq-gold-400: #e9c98a;   /* brand anchor — editorial gold */
    --rq-gold-300: #f2ddb4;
    --rq-gold-200: #f9eed8;
    --rq-gold-100: #fdf8ee;

    /* ---------------------------------------------------------------
       STATUS — fixed hues, meaning-bearing, never re-tinted by a theme.
       Green/amber/red keep their values in every theme because their
       meaning is conventional: a "paid" badge must not turn navy
       because someone shipped a new brand palette.

       The 600s are values already in use across the codebase, kept
       deliberately so the migration shifts no existing colour.
       --------------------------------------------------------------- */
    --rq-green-700: #15803d;
    --rq-green-600: #16a34a;
    --rq-green-500: #22c55e;
    --rq-green-200: #bbf7d0;
    --rq-green-100: #dcfce7;

    --rq-amber-700: #b45309;
    --rq-amber-600: #d97706;
    --rq-amber-500: #f59e0b;
    --rq-amber-200: #fde68a;
    --rq-amber-100: #fef3c7;

    --rq-red-700:   #b91c1c;
    --rq-red-600:   #dc2626;
    --rq-red-500:   #ef4444;
    --rq-red-200:   #fecaca;
    --rq-red-100:   #fee2e2;

    --rq-cyan-700:  #0369a1;
    --rq-cyan-600:  #0284c7;
    --rq-cyan-500:  #0ea5e9;
    --rq-cyan-200:  #bae6fd;
    --rq-cyan-100:  #e0f2fe;

    /* ---------------------------------------------------------------
       MINT — the "live" indicator on the editorial hero.
       Not a status colour and deliberately not part of the green ramp:
       green-500 means "succeeded", this means "running right now". It
       reads softer than success green on the dark hero, which is the
       point — a pulse, not a checkmark.
       --------------------------------------------------------------- */
    --rq-mint-400:  #5dd39e;
    --rq-mint-a18:  rgba(93,211,158,.18);

    /* ---------------------------------------------------------------
       ROSE — the filled favourite heart.
       Kept out of the red ramp deliberately. Red means something is
       wrong; this means someone liked a listing. They must not be the
       same colour, and a saved listing turning "danger red" on a future
       palette change would be a small disaster.
       --------------------------------------------------------------- */
    --rq-rose-500:  #ff385c;

    /* ---------------------------------------------------------------
       ALPHA PRIMITIVES
       Translucent overlays can't be expressed as a ramp step because
       they composite against an unknown backdrop. Two sets: one to lay
       over dark surfaces, one over light.
       --------------------------------------------------------------- */
    --rq-on-dark-04:  rgba(255,255,255,.04);
    --rq-on-dark-08:  rgba(255,255,255,.08);
    --rq-on-dark-12:  rgba(255,255,255,.12);
    --rq-on-dark-52:  rgba(255,255,255,.52);
    --rq-on-dark-72:  rgba(255,255,255,.72);
    --rq-on-dark-92:  rgba(255,255,255,.92);

    --rq-on-light-04: rgba(11,16,36,.04);
    --rq-on-light-08: rgba(11,16,36,.08);
    --rq-on-light-12: rgba(11,16,36,.12);
    --rq-on-light-52: rgba(11,16,36,.52);
    --rq-on-light-66: rgba(11,16,36,.66);
    --rq-on-light-88: rgba(11,16,36,.88);

    /* Hue tints. Dark surfaces can't use the solid 100/200 fills — a
       light green block on navy glows. Translucent tints of the hue
       composite against whatever surface they land on instead, so one
       value works on page, card, and raised alike.
       -a14 = soft fill · -a32 = its border. */
    --rq-blue-a14:  rgba(122,160,255,.14);
    --rq-blue-a32:  rgba(122,160,255,.32);
    --rq-gold-a12:  rgba(233,201,138,.12);
    --rq-gold-a30:  rgba(233,201,138,.30);
    --rq-green-a14: rgba(34,197,94,.14);
    --rq-green-a32: rgba(34,197,94,.32);
    --rq-amber-a14: rgba(245,158,11,.14);
    --rq-amber-a32: rgba(245,158,11,.32);
    --rq-red-a14:   rgba(239,68,68,.14);
    --rq-red-a32:   rgba(239,68,68,.32);
    --rq-cyan-a14:  rgba(14,165,233,.14);
    --rq-cyan-a32:  rgba(14,165,233,.32);

    /* Shadow ink. Black, not navy — a tinted shadow reads as a glow. */
    --rq-ink-a20:   rgba(0,0,0,.20);
    --rq-ink-a55:   rgba(0,0,0,.55);

    /* ---------------------------------------------------------------
       RGB TRIPLETS
       Bootstrap and Modernize compose colours as rgba(var(--bs-*-rgb),
       .5) so they can vary alpha at the point of use. That idiom needs
       bare "r,g,b" channels, which cannot be derived from a hex in CSS.
       So any colour the bridge exposes to Bootstrap needs a triplet
       twin here, kept in sync by hand.

       Only colours Bootstrap actually composes are listed. If you add
       one, add it in the same commit as the hex it mirrors.
       --------------------------------------------------------------- */
    --rq-navy-900-rgb:  11,16,36;
    --rq-paper-100-rgb: 255,255,255;
    --rq-blue-500-rgb:  59,108,245;
    --rq-blue-400-rgb:  122,160,255;
    --rq-gold-400-rgb:  233,201,138;
    --rq-gold-700-rgb:  138,109,47;
    --rq-green-600-rgb: 22,163,74;
    --rq-green-500-rgb: 34,197,94;
    --rq-amber-600-rgb: 217,119,6;
    --rq-amber-500-rgb: 245,158,11;
    --rq-red-600-rgb:   220,38,38;
    --rq-red-500-rgb:   239,68,68;
    --rq-cyan-600-rgb:  2,132,199;
    --rq-cyan-500-rgb:  14,165,233;

    /* ---------------------------------------------------------------
       NON-COLOUR PRIMITIVES
       Same discipline: one place to change, no magic numbers downstream.
       --------------------------------------------------------------- */

    /* Type. Fraunces is the editorial display face, Mulish carries the
       interface. Both already load on the public pages. */
    --rq-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --rq-font-ui: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rq-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

    /* Modular scale, 1.25 ratio, 16px base. */
    --rq-text-2xs: .6875rem;   /* 11px — table micro-labels */
    --rq-text-xs:  .75rem;     /* 12px */
    --rq-text-sm:  .875rem;    /* 14px — dense table body */
    --rq-text-md:  1rem;       /* 16px — base */
    --rq-text-lg:  1.125rem;   /* 18px */
    --rq-text-xl:  1.375rem;   /* 22px */
    --rq-text-2xl: 1.75rem;    /* 28px */
    --rq-text-3xl: 2.25rem;    /* 36px */
    --rq-text-4xl: 3rem;       /* 48px — hero only */

    --rq-weight-normal:   400;
    --rq-weight-medium:   500;
    --rq-weight-semibold: 600;
    --rq-weight-bold:     700;

    --rq-leading-tight:  1.15;
    --rq-leading-snug:   1.35;
    --rq-leading-normal: 1.55;

    /* 4px base spacing scale. */
    --rq-space-1: .25rem;
    --rq-space-2: .5rem;
    --rq-space-3: .75rem;
    --rq-space-4: 1rem;
    --rq-space-5: 1.5rem;
    --rq-space-6: 2rem;
    --rq-space-7: 3rem;
    --rq-space-8: 4rem;

    --rq-radius-sm:   6px;
    --rq-radius-md:   10px;
    --rq-radius-lg:   16px;
    --rq-radius-pill: 999px;

    /* Shadow geometry only. A shadow's colour depends on the surface it
       falls on (black is invisible on navy), so the usable shadow roles
       live in layer 2. */
    --rq-shadow-1: 0 1px 2px;
    --rq-shadow-2: 0 4px 12px;
    --rq-shadow-3: 0 12px 32px;

    --rq-transition-fast: 120ms ease;
    --rq-transition-base: 200ms ease;
}