/* ═══════════════════════════════════════════════════════════════════════
   BRAND PALETTE — the one place the brand colour is written down.
   ═══════════════════════════════════════════════════════════════════════

   The logo mark is an amber square with near-black ink on it. That pair IS
   the brand, so it is what these tokens hold. Until now the brand token was
   #15803d — a green that appears nowhere in the logo, scattered as a literal
   across 91 templates (815 occurrences) and duplicated again in a private
   :root on the pricing page. "Change the brand colour" meant editing a
   hundred files, so in practice it never happened evenly: the header ended
   up amber and every page CTA stayed green.

   Two brand colours, not one, because a single hue cannot do both jobs:
   --color-brand is a FILL (white text on it is 2.15:1 — never do that; put
   --color-brand-ink on it, 7.0:1), and --color-brand-text is that same hue
   darkened until it passes AA as TEXT on white (5.02:1 — exactly the
   contrast the old green had, so no copy will read lighter than before).

   Green is not a brand colour. It stays as STATUS only (--color-success in
   landing.css): ticks, "included", shields, live dots.

   Loaded two ways, so every page has it:
     • <link>ed by base.html.twig / es/base.html.twig, because the header is
       on every page but only 144 of 160 templates pull in
       tailwind-landing.css — the other 16 would render a header button with
       an undefined background;
     • @import-ed by assets/lib/landing.css, so it is inlined into the built
       tailwind-landing.css for everything else.
   Edit here, nowhere else, then rebuild:
     ./node_modules/.bin/tailwindcss -i assets/lib/landing.css \
        -o public/build/css/tailwind-landing.css --minify
     cp assets/lib/tokens.css public/build/css/tokens.css              */

:root {
    /* ── The logo ──────────────────────────────────────────────────────────
       The logo keeps the amber square it has always had. It is its OWN token,
       not --color-brand: the action colour moved to graphite and the logo did
       not, and until now the logo chip read var(--color-brand), so flipping
       the accent would have blackened the mark by accident. */
    --color-logo:         #f59e0b;
    --color-logo-ink:     #152b1f;               /* 7.0:1 on the logo square */

    /* ── The action colour ────────────────────────────────────────────────
       Graphite. Every primary button on the site. White label on it is
       17.7:1 — it can never fail, which is the point: the workhorse is quiet
       and the one bright thing on a screen is whatever we chose to light.
       This is the Apollo arrangement: a near-black primary, the warm colour
       kept rare. */
    --color-brand:        #111827;               /* fills: buttons, chips, bars   */
    --color-brand-hover:  #000000;               /* fill hover                    */
    --color-brand-ink:    #ffffff;               /* label ON a brand fill, 17.7:1 */

    /* Graphite cannot highlight a word inside a heading — it is the body
       colour. So accent TEXT is the dark amber: 5.02:1 on white (exactly the
       contrast the old green had), it keeps the line to the logo, and its
       hue sits 36 degrees off our warning colour, so it does not read as a
       caution. Tints below are its family, not graphite's, so a chip and the
       text on it belong together. */
    --color-brand-text:   #b45309;               /* accent text on white, 5.0:1   */
    --color-brand-bg:     #fffbeb;               /* tint behind accent text       */
    --color-brand-border: #fde68a;               /* tint border                   */
    --color-brand-ring:   rgba(16, 24, 40, 0.25);
    /* Alias kept because .btn-dark:hover and a few templates still name it. */
    --color-brand-light:  #000000;

    /* ── Dark CTA bands ──────────────────────────────────────────────────
       --color-band is the band's own background and NOTHING else.

       It used to be --color-brand-ink, i.e. the same token that means "the
       label printed on a brand fill". That held together only while the ink
       happened to be dark. Trying three candidate palettes (teal, graphite,
       wine) — all of which want a WHITE button label — turned every band
       white and made the white headline inside it vanish. One token cannot
       mean both "text colour" and "large background": pick any palette where
       the label is light and the bands die. So they are two tokens now. */
    --color-band:          #111827;

    /* On a dark band the primary button cannot keep the light-background
       fill: measured against the bands of the three candidate palettes it
       lands at 1.81:1 (teal), 1.39:1 (wine) and 1.00:1 (graphite — the
       button is literally the same colour as the band). So the accent has a
       lightened twin that is only used there. scripts/check-palette.php
       asserts the numbers below; it fails the build if a future palette
       forgets to move them together. */
    --color-brand-on-dark:      #f59e0b;          /* 8.26:1 on --color-band */
    --color-brand-on-dark-ink:  #152b1f;          /* 7.00:1 on the fill     */
    --color-brand-text-on-dark: #fcd34d;          /* links/accents on band  */
    /* On the graphite band the primary goes amber — 8.26:1 against the band,
       and it is the only place the logo colour appears at button size. */
}

/* Inside a dark band, re-point the accent tokens at their on-dark twins.
   Custom properties inherit, so every descendant picks this up — including
   the ~80 buttons that carry `style="background:var(--color-brand)"` inline.
   That is the whole reason this is done with variables instead of overrides:
   an inline style cannot be beaten without !important, but it can be fed a
   different value. */
.bg-brand, .band-ink, [data-band] {
    --color-brand:      var(--color-brand-on-dark);
    --color-brand-ink:  var(--color-brand-on-dark-ink);
    --color-brand-text: var(--color-brand-text-on-dark);
    --color-brand-hover: var(--color-brand-on-dark);
}

/* THE primary action button, for CTAs that bring their own geometry as
   Tailwind classes (homepage, news, author, pricing). They used to say
   `bg-green-700 hover:bg-green-800 text-white`. Everything else already
   goes through .btn-dark in landing.css, which reads the same tokens.

   !important because this rule is unlayered while the Tailwind utilities
   sharing the element (px-6, rounded-xl, …) sit in @layer utilities —
   without it a leftover text-white would win and drop the label to 2.15:1. */
.btn-brand {
    background: var(--color-brand) !important;
    color: var(--color-brand-ink) !important;
    border-color: var(--color-brand) !important;
}
.btn-brand:hover { background: var(--color-brand-hover) !important; }

/* Full-bleed CTA bands. At that size the accent itself is a wall, so the band
   is its own dark colour and the button inside it is the one thing lit. */
.bg-brand, .band-ink { background: var(--color-band) !important; color: #fff; }

/* landing-light.css paints every .font-semibold inside the header with an
   !important slate, at specificity (0,2,1). That was harmless while the header
   button was amber — a dark label on amber is what we wanted anyway — but the
   graphite action colour turned it into a 1.21:1 label, i.e. invisible. This
   out-specifies it at (0,2,2) rather than editing landing-light.css, which is
   not in the repo. */
.theme-light header a.btn-brand,
.theme-dark  header a.btn-brand { color: var(--color-brand-ink) !important; }