/* kaixa - the brand layer, loaded after styles.css.

   One loud colour, one near-black, and nothing else competing: the structure the
   owner pointed at in Teya and Bitstamp. The green fills shapes; the ink goes on
   top of it. Nothing here changes a layout - only what the layout is made of.

   The warm paper is NOT touched. It is the owner's round-11 decision and a green
   brand is no reason to re-open it; a vivid yellow-green sits well on a warm
   cream, and white would have been a change nobody asked for. */

:root {
  /* ---- the brand ------------------------------------------------------
     #2FEF10 is L* 83, chroma 111 - 98% of everything sRGB has at its hue.
     It is 1.56:1 on paper, so it NEVER sets text. It fills, and ink sits on
     it at 11.96:1. Every figure here comes from tools/colour.mjs. */
  --verde: #2FEF10;

  --ink: #0f140e;             /* near-black with a whisper of green in it. Pure
                                 black beside a colour this saturated reads as a
                                 hole punched in the screen. 17.4:1 on the paper */
  --ink-2: #3a413a;           /* 9.8:1 on the paper */
  --ink-3: #5a6157;           /* 6.0:1 on the paper - AA at any size */
  --ink-inverse: #ffffff;

  --rule: rgba(15, 20, 14, 0.13);
  --rule-strong: rgba(15, 20, 14, 0.3);
  --rule-inverse: rgba(255, 255, 255, 0.24);

  /* ---- money -----------------------------------------------------------
     Money keeps a deeper, cooler green and stays TEXT. 5.00:1 on white,
     4.58:1 on the wash. --signal-bright is the brand: a fill, ink on top. */
  --signal: #2e7d5b;
  --signal-bright: #2fef10;
  --signal-wash: #e6fbdf;

  --alert: #c0261a;
  --alert-wash: #fce9e7;
  --warn: #7a5200;
  --warn-wash: #fdf1d9;

  /* ---- the accent slots both resolve to the brand ---------------------
     The shipped app had terracotta for primary actions and papaya for the
     active state. A brand colour on top of those would have made three
     accents, and a screen with three accents reads as an accident however
     good each one is. Both slots become the green - so everything the app
     itself does (charge a bill, show you where you are, open the till) is
     the brand colour with ink on it, exactly as the mark is. */
  --terracotta: #2fef10;
  --terracotta-wash: #e6fbdf;
  --papaya: #2fef10;
  --papaya-wash: #e6fbdf;

  --lift: 0 2px 0 rgba(15, 20, 14, 0.05), 0 10px 22px -12px rgba(15, 20, 14, 0.28);
}

/* styles.css sets .primary-button's label in --ink-inverse, which was right on
   terracotta (4.9:1) and measures 1.45:1 the moment that token becomes the brand
   green - a total failure that would have shipped invisibly, because the button
   still LOOKS like a button. Ink measures 11.96:1. */
.primary-button {
  color: var(--ink);
}

/* Interactive TEXT cannot be the brand colour - there is no size at which
   #2FEF10 is readable on paper. It could be given a dark green derivative, but
   the app already has a dark green (money), and two dark greens a few degrees
   of hue apart at 14px is a worse problem than the one being solved. So text
   actions become ink.

   The affordance the colour used to carry has to come back from somewhere, and
   WHERE depends on what the control already is. .nudge-link and
   .caixa-products-link are filled wash pills - the pill is the affordance, and
   underlining a label inside a filled button is a tell, not a fix. The other two
   are bare text and get the underline. */
.text-button,
.link-button,
.nudge-link,
.caixa-products-link {
  color: var(--ink);
}
.text-button,
.link-button {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--rule-strong);
}

/* --------------------------------------------------------------------------
   styles.css hard-codes the old navy - rgba(22, 50, 79, a) - in twenty places,
   so a brand layer cannot recolour those by moving a token; it has to override
   the rules. Most are tints at alpha 0.05-0.16 and read as neutral grey against
   any paper, so they are deliberately left alone. These three are the ones a
   green brand actually shows:

   - the quantity stepper falls back to a hard-coded warm #f6ece0, which sat
     correctly inside the old papaya row wash and reads as a stray beige chip
     inside a green one;
   - the nav and dock shadows carry navy at alpha 0.44, which is dark enough to
     see under a near-black pill.
   -------------------------------------------------------------------------- */
:root {
  --paper-sunk: #dcedd4;
}
.tile-stepper button:active {
  background: rgba(15, 20, 14, 0.12);
}
.bottom-nav,
.sale-dock-inner {
  box-shadow: 0 3px 0 rgba(15, 20, 14, 0.08), 0 18px 32px -16px rgba(15, 20, 14, 0.44);
}
.caixa-control-row.is-compact {
  box-shadow: 0 8px 20px -14px rgba(15, 20, 14, 0.55);
}