/* =========================================================================
   PayMQR — the brand token layer
   =========================================================================
   THE ONLY FILE IN PayMQR THAT WRITES A BRAND COLOUR LITERAL.

   Loaded FIRST by every document shell, before site.css / merchant.css /
   admin.css and before any inline <style> block. Those files keep their own
   vocabulary (--si-*, --pm-*) but take their VALUES from here, so a brand
   change is an edit to §1 of this file and nothing else.

   Served as a static file from public/, so it is covered by the existing
   `style-src 'self'` and needs no CSP change. No build step, no preprocessor,
   no webfont request, no external host.

   Specification: docs/BRAND_SYSTEM.md

   =========================================================================
   THE RULE THAT SHAPES THIS WHOLE FILE
   =========================================================================
   #FFC400 HAS A CONTRAST RATIO OF 1.60:1 AGAINST WHITE.

   The blue it replaces was ~5.2:1 and could therefore be one token doing two
   jobs: a button fill AND a link colour. Yellow cannot. So the single
   "primary" role is split into three, and which one a rule reaches for is
   decided by WHAT THE COLOUR IS DOING, never by what it used to be:

       --action-fill      the yellow. A BACKGROUND. Never text on light.
       --action-on-fill   charcoal. The text that sits ON the yellow.
       --action-ink       dark brand ink. Brand-coloured TEXT on a light
                          ground - links, active labels, small icons.

   A blind find-and-replace of the old blue with --action-fill produces
   invisible links, not off-brand links. That is why §2 exists.

   Sections
     1. Raw brand ramp            (the only literals)
     2. Action roles              (what components reference)
     3. Ink, surfaces and lines
     4. Status families           (NOT brand-derived - see §4)
     5. Elevation and focus
     6. Compatibility definitions
   ========================================================================= */

:root {

    /* ---- 1. RAW BRAND RAMP ---------------------------------------------
       Change the brand here and nowhere else. Every value below this block
       is expressed in terms of these. */

    --brand-500: #FFC400;   /* primary yellow - fills only */
    --brand-600: #E6AC00;   /* hover fill */
    --brand-700: #C08F00;   /* pressed fill */

    /* DERIVED, AND IT IS NOT DECORATION. --brand-700 is 2.93:1 on white,
       which is under the 3:1 WCAG 1.4.11 floor for a meaningful graphic.
       Anything in the brand family that has to be SEEN on a light ground
       rather than merely filled - a focus ring, a chart bar, a meter -
       uses this instead. 3.26:1. */
    --brand-800: #B88600;

    --brand-ink-strong: #7A5600;        /* brand TEXT on light. 6.65:1 */
    --brand-soft: #FFF6D9;              /* tinted fill */
    --brand-border: #FFE28A;            /* the hairline that goes with it */
    --brand-ring: rgba(255, 196, 0, .45);

    --charcoal-900: #141414;
    --charcoal-800: #1F1F1F;
    --charcoal-700: #2B2B2B;

    --ground: #FFFDF7;
    --ground-alt: #F7F4EC;
    --surface: #FFFFFF;


    /* ---- 2. ACTION ROLES ------------------------------------------------
       WHAT COMPONENTS REFERENCE. A rule that wants "the brand" picks the
       role that matches what it is painting, and the contrast question is
       then already answered. */

    --action-fill: var(--brand-500);
    --action-fill-hover: var(--brand-600);
    --action-fill-active: var(--brand-700);

    /* 10.32:1 on the yellow. The single most likely thing to get wrong in
       this migration is leaving `color:#fff` on a button whose background
       just became yellow - that is 1.60:1. */
    --action-on-fill: var(--charcoal-800);

    /* Brand-coloured TEXT. Never --action-fill. */
    --action-ink: var(--brand-ink-strong);

    /* The same role on a DARK surface, where the yellow is 10.32:1 and is
       the correct choice for text. */
    --action-ink-on-dark: var(--brand-500);

    --action-soft: var(--brand-soft);
    --action-border: var(--brand-border);

    /* A brand-family colour that must be SEEN as a shape on a light ground:
       chart bars, meter fills, iconography carrying meaning. */
    --action-graphic: var(--brand-800);


    /* ---- 3. INK, SURFACES AND LINES ------------------------------------
       Warm rather than blue-grey, so the neutrals sit with the yellow
       instead of arguing with it. */

    --ink-base: var(--charcoal-800);
    --ink: var(--ink-base);
    --ink-strong: var(--charcoal-900);
    --ink-muted: #57534A;       /* real body copy and captions. 7.66:1 */
    --ink-subtle: #7A7367;      /* genuine metadata only.      4.83:1 */
    --ink-invert: #FAF9F6;      /* text on a dark surface */
    --ink-invert-muted: #D8D3C8;/* muted text on dark.        11.04:1 */

    /* TWO NAMES FOR THE SAME HAIRLINE, ON PURPOSE. `--line` and `--ink` are
       short enough that a page-local palette may already own those names —
       views/public/origin.php does — and `--line: var(--line)` on the same
       element is a SELF-CYCLE, which CSS makes invalid at computed-value
       time and then drops silently. The `--hairline` / `--ink-base` spellings
       exist so such a page can point at this layer without colliding. */
    --hairline: #E6E2D8;
    --hairline-strong: #D3CDC0;
    --line: var(--hairline);
    --line-strong: var(--hairline-strong);

    --dark-surface: var(--charcoal-800);
    --dark-surface-2: var(--charcoal-700);
    --dark-surface-deep: var(--charcoal-900);
    --dark-line: #3A362F;

    /* RGB TRIPLES, so a translucent wash can be written
       `rgba(var(--shadow-rgb), .08)` instead of hardcoding a colour that a
       future brand change would silently leave behind. The old stylesheets
       carried the retired navy as a literal in 159 places for exactly this
       reason; these three tokens are what replaced them. */
    --shadow-rgb: 31, 28, 22;      /* the ink, for casts and hairlines */
    --brand-rgb: 255, 196, 0;      /* the yellow, for glows and focus washes */
    --brand-deep-rgb: 122, 86, 0;  /* brand ink, for a shadow UNDER a yellow fill */


    /* ---- 4. STATUS FAMILIES --------------------------------------------
       DELIBERATELY NOT DERIVED FROM THE BRAND RAMP, and they must never
       become so. These carry PAYMENT MEANING: a customer has to tell
       "settled" from "still working" from "needs a look" from "declined"
       at a glance, and the brand turning yellow changes none of that.

       docs/BRAND_SYSTEM.md §4 is the contract. */

    /* SETTLED. Unchanged from the green identity. */
    --state-ok: #12805C;
    --state-ok-soft: #EAF7F1;
    --state-ok-border: #B7E4CF;
    --state-ok-ink: #0B5C42;
    /* Settled, ON A DARK SURFACE. --state-ok is 4.92:1 on white but only
       3.04:1 on charcoal, which is too weak for a label. Same meaning,
       lifted for the ground it sits on. 8.6:1 on #1F1F1F. */
    --state-ok-on-dark: #34D399;

    /* WORKING. Teal, and deliberately NOT the settled green - green here
       would say the payment succeeded and then take it back. */
    --state-busy: #0F766E;
    --state-busy-soft: #F2FBF9;
    --state-busy-border: #CFEBE5;
    --state-busy-ink: #0F766E;

    /* NEEDS REVIEW. THE ONE FAMILY THE REBRAND MOVED, and the reason is
       measurable: the old amber sat at hue 36 and the brand yellow sits at
       46. Ten degrees apart is not a status colour, it is the brand. There
       are only 46 degrees between the brand and the error red to spend, so
       this splits the difference: 25 from the brand, 21 from the error. */
    --state-warn: #8F3A0B;
    --state-warn-soft: #FDF3EC;
    --state-warn-border: #F0D6C2;
    --state-warn-ink: #8F3A0B;
    --state-warn-solid: #B24A10;

    /* DECLINED. Unchanged. */
    --state-error: #C92A2A;
    --state-error-soft: #FDEDED;
    --state-error-border: #F5C2C2;
    --state-error-ink: #8F1D1D;

    /* INFORMATION. Unchanged, and MORE load-bearing than it was: with the
       brand no longer blue, blue now means information and nothing else. */
    --state-info: #1D5FCF;
    --state-info-soft: #EAF1FD;
    --state-info-border: #BFD3F7;
    --state-info-ink: #17417F;

    /* NO STATE. */
    --state-neutral-soft: #F4F2EC;
    --state-neutral-border: #DFDACE;
    --state-neutral-ink: #5A554B;


    /* ---- 5. ELEVATION AND FOCUS ----------------------------------------- */

    /* A SOLID RING PLUS A GLOW, not a glow alone. rgba(255,196,0,.45) over
       white resolves to about 1.3:1 - a keyboard user would not see it. The
       solid --brand-800 ring is what carries the 3:1, and the soft ring is
       what makes it look like a focus state rather than a border. */
    --focus-ring: 0 0 0 2px var(--brand-800), 0 0 0 5px var(--brand-ring);
    --focus-ring-dark: 0 0 0 2px var(--brand-500), 0 0 0 5px rgba(255, 196, 0, .25);
    --focus-ring-color: var(--brand-800);
    --focus-ring-color-dark: var(--brand-500);

    --shadow-xs: 0 1px 2px rgba(31, 28, 22, .05);
    --shadow-sm: 0 1px 3px rgba(31, 28, 22, .07), 0 1px 2px rgba(31, 28, 22, .05);
    --shadow-md: 0 6px 16px rgba(31, 28, 22, .09), 0 1px 3px rgba(31, 28, 22, .06);
    --shadow-lg: 0 16px 40px rgba(31, 28, 22, .15);


    /* ---- 6. COMPATIBILITY DEFINITIONS -----------------------------------
       Three tokens the merchant stylesheet REFERENCES but never defined,
       with no var() fallback - so those declarations were invalid and the
       property fell through to inherited. Defined here because this file is
       the token layer and an undefined token is exactly the sprawl it
       exists to end. */

    --pm-ink-soft: var(--ink-muted);
    --pm-ink-faint: var(--ink-subtle);
    --pm-muted: var(--ink-muted);
}