/* ==========================================================================
   Buckettrips — the palette

   Every color on the site is in this file and nowhere else. Loaded first, by
   both `base.html` and `admin/base.html`, so everything after it consumes and
   nothing redeclares. This is the color half of what `app/typography.py` does
   for the faces: one place to edit, and the edit reaches everything.

   `docs/PALETTE.md` has the argument and the measurements. The short version:
   acid lime is Contiki's #ccff00, on nineteen of twenty pages sampled from
   their site, and Contiki is the operator we are positioned against. The
   violet this replaced sat seven degrees of hue from WeRoad's #4936f5, which
   is the nearest competitor there is, and it was never chosen: it arrived with
   the settings widget when it was ported in from Submira.

   ── how these are named ──────────────────────────────────────────────────
   Two rules, and they are the whole system.

   1. A name says what the color DOES, never what color it IS. `--brand-bg`
      is the background of a brand section whatever is painted there. A token
      called `--brand-pine` would have to be renamed everywhere the day the
      green changes, or sit there lying about itself.

   2. Four words, used the same way every time:

        -bg      something is painted in this
        -text    words sit on top of it, and are readable on it
        -muted   the quiet version of the one before it: still readable,
                 deliberately less loud
        -light   a lighter version of the one before it

      So --brand-bg is a background, --brand-text is what you write on it,
      --brand-text-muted is the same but quieter, and --brand-highlight is the
      loud one you paint a button in with --brand-highlight-text on top.

   ── one green, four lightnesses ──────────────────────────────────────────
   Everything green here is hue 152. Background, then fill, then link, each a
   step lighter. It has to be a ladder rather than one color because no single
   value can be a legible link on both #ffffff and #18181b. So:

     --accent-color     links and small labels. Changes between light and
                        dark, because it is the one sitting on the page.
     --accent-gradient  what a button is painted in. The SAME in both modes,
                        and dark enough that --accent-text holds on it at
                        8.51:1 across sixteen places that already do this.
                        Flat, whatever the name says: see the value.

   Contrast, measured: the link is 6.74:1 on the dark page and 5.68:1 on the
   light; --accent-text on a button is 8.51:1; --brand-text on --brand-bg is
   12.05:1 and the muted version of it is 6.73:1; --brand-highlight-text on
   --brand-highlight is
   9.67:1. Anything above 4.5:1 is legal for normal text. The violet this
   replaced was 4.47:1 on white and 3.97:1 on the dark, so it failed both.
   ========================================================================== */

:root {
    /* ── brand ─────────────────────────────────────────────────────────────
       A section that carries the brand is painted in --brand-bg and writes on
       it in --brand-text. These do not change between light and dark on
       purpose: a colored section looks the same whichever way the toggle is
       set, which is the whole point of having one. */
    --brand-bg:              #0e3a26;              /* currently a deep green */
    --brand-bg-light:        #17563a;              /* lighter, for gradients */
    --brand-text:            #f2fbf6;              /* headlines on --brand-bg */
    --brand-text-muted:      rgba(242,251,246,.72);/* quieter, same place */
    --brand-highlight:       #f5b544;              /* currently gold */
    --brand-highlight-text:  #241700;              /* words on --brand-highlight */

    /* ── accent ───────────────────────────────────────────────────────────── */
    --accent-color:      #20b670;   /* links and labels */
    /* One flat green, still written as an image rather than a color: Bootstrap
       repaints a button's background-color in its own blues on hover, focus
       and press, and an image is what covers that. */
    --accent-gradient:   linear-gradient(#0e5836, #0e5836);
    --accent-alpha:      rgba(32,182,112,0.12);  /* a wash of it, for tints */
    --accent-text:       #ffffff;   /* words on --accent-gradient */
    /* White, whatever the mode: words on a photograph, a dark wash or a state's
       fill, and the ground a QR code or a printout needs. Every white outside
       this file reads it (decision row 99). */
    --white:             #ffffff;

    /* ── grays, dark ──────────────────────────────────────────────────────── */
    --bg-primary:        #18181b;
    --bg-secondary:      #111113;
    --bg-tertiary:       #1f1f23;
    --bg-elevated:       #202024;
    --text-primary:      #ffffff;
    --text-secondary:    #a0a0a0;
    --text-muted:        #71717a;
    --border-color:      rgba(255,255,255,0.08);
    --card-bg:           #1c1c20;
    --card-border:       rgba(255,255,255,0.06);
    --card-shadow:       rgba(0,0,0,0.3);
    /* The edge of a field you type into. Stronger than --border-color, which
       is a divider: a field drawn with a divider's line on a white card read
       as a label, and filled gray instead it read as disabled. */
    --field-border:      rgba(255,255,255,0.16);
    /* The dim laid over the page under a sheet. The same in light and dark:
       it is there to push the page back, not to match it. */
    --scrim:             rgba(0,0,0,0.45);

    /* ── states ───────────────────────────────────────────────────────────
       Success is a teal, a hue clear of the brand's greens, so "it worked" and
       "it is ours" no longer read alike (decision row 99). 4.73:1 on the dark
       ground; light mode darkens it to hold on white. */
    --success-color:     #0d9488;
    --success-alpha:     rgba(13,148,136,0.12);
    --warning-color:     #f59e0b;
    --warning-alpha:     rgba(245,158,11,0.1);
    --error-color:       #ef4444;
    --error-alpha:       rgba(239,68,68,0.1);
    /* The band across every page of a box that is not production. The same in
       light and dark, and dark enough that its small white type holds at
       6.47:1, where --error-color would give 3.76:1, legal only for large type. */
    --not-live-bg:       #b91c1c;
    --not-live-text:     #ffffff;
    /* A live deal, named on a price. The gold, and the same gold the poster
       card has always painted its deal in -- so a trip with a deal looks
       the same on the landing page, in the departure list and on the tour's own
       booking card. It was #dc2626 here and gold on the card, which meant one
       deal wore two colors on two pages and neither was the deal's.

       Not red. Red is what the pages already spend on scarcity -- `.tour-spots`,
       `.trip-spots`, "Only 3 places left" -- so a red sale badge beside a red
       seat count read as one warning rather than as a deal and a fact. Gold
       is the color this brand announces things in.

       Aliases rather than a second copy of the hex, so the day the gold moves
       the deals move with it and cannot be left a shade behind. Fixed in light
       and dark, like the brand pair they point at, so a badge does not restate
       itself per mode -- and the pair is what makes the badge legible: near-
       black on gold at 9.67:1, where white would have been 1.81:1, which is
       the whole reason a deal used to be drawn as a tint instead. */
    --sale-color:        var(--brand-highlight);
    --sale-text:         var(--brand-highlight-text);
    --info-color:        #3b82f6;
    --info-alpha:        rgba(59,130,246,0.1);
    /* A campaign accent, for one mass email rather than for the site. The plate
       stays pine and the paper stays white; this is what a campaign's mark, its
       button and its labels may be painted in instead of the gold, so a letter
       to one audience can look like itself without a hex being typed into a
       design. Declared here because this file is the only one that declares a
       color, which is what lets an email be refused for painting in anything
       else.

       Near-black on it at 8.9:1, the way the gold carries near-black: white
       would give 3.1:1, legal only for large type and wrong beside the gold
       pair it stands in for. Not lime, which is Contiki's, and not violet,
       which was WeRoad's. */
    --campaign-pink:      #ff7fb6;
    --campaign-pink-text: #1a1a1a;
}

[data-mode="light"] {
    /* The link and success move. The fill, the brand and the other states do not. */
    --accent-color:      #0f7646;
    --accent-alpha:      rgba(15,118,70,0.10);
    --success-color:     #0f766e;   /* 5.47:1 on white, and white on it */
    --success-alpha:     rgba(15,118,110,0.10);

    --bg-primary:        #ffffff;
    --bg-secondary:      #f4f4f6;
    --bg-tertiary:       #e8e8ec;
    --bg-elevated:       #ffffff;
    --text-primary:      #0f0f14;
    --text-secondary:    #52525b;
    --text-muted:        #a1a1aa;
    --border-color:      rgba(0,0,0,0.08);
    --card-bg:           #ffffff;
    --card-border:       rgba(0,0,0,0.06);
    --card-shadow:       rgba(0,0,0,0.08);
    --field-border:      rgba(0,0,0,0.16);
}

/* ── shape ─────────────────────────────────────────────────────────────────
   Not color, but here because both layouts load this file first: a card on
   a public page and one in the admin round and rest the same, and one edit
   reaches both. Depth is in two steps and nowhere else: a card resting on
   the page, and whatever floats over it (a menu, a picker, a popover). Both
   are drawn in --card-shadow, so dark mode deepens them by itself. */
:root {
    --radius-sm:      6px;
    --radius-md:      8px;
    --radius-lg:      12px;
    --radius-xl:      14px;
    --shadow-card:    0 1px 2px var(--card-shadow), 0 2px 8px var(--card-shadow);
    --shadow-raised:  0 8px 24px var(--card-shadow);
}