/* ============================================================
   ZAMBABET — Tier 1 brand primitives
   ============================================================
   This file overrides only Tier 1 primitives. The Tier 2 semantic
   aliases (--surface-*, --content-*, --action-*)
   live in app/assets/css/variables-base.css and resolve through these
   primitives at use-site, so changes here propagate through the UI.

   Color formats are interchangeable — hex, rgb(), oklch(), and
   color(display-p3 …) all produce the same downstream behaviour.
   This brand uses OKLCH throughout for perceptually-uniform scales:
   stepping --neutral-base → --neutral-muted moves only L (lightness)
   while keeping H (hue, 282°/indigo) constant, so the elevation
   ladder reads as one coherent surface, not five different colors.

   To add a new brand: copy this file, change the values, no other
   code change is required.

   Each block below follows the same shape:
     • role             what the token represents
     • where it shows   the Tailwind classes / components driven by it
     • effect           what changes visually if you tweak the value
*/

:root {

  /* ─── Brand colors ───────────────────────────────────────────
     The two CTAs (primary + emphasis) and the promo banner accent.
     These are the loudest, most "branded" colors on the site — they
     define the visual identity. */

  /* --brand-primary
       Role:    main CTA color (login, deposit, claim, "Continue")
       Used in: <BaseButton variant="primary"> → bg-button-primary
                .text-primary (tinted headings / prices)
                .text-accent-primary (text highlights)
                focus ring on primary buttons
       Effect:  shifts the dominant CTA hue across the entire app */
  --brand-primary:       oklch(0.92 0.23 100);   /* electric yellow */

  /* --brand-primary-fg
       Role:    foreground (text/icon) color rendered ON top of
                --brand-primary surfaces. Must contrast strongly
                with --brand-primary; usually #000 on light hues
                and #fff on dark hues.
       Used in: text-button-primary utility (Button.vue primary)
       Effect:  legibility of the primary CTA's label */
  --brand-primary-fg:    #000000;

  /* --brand-emphasis
       Role:    "louder than primary" CTA — the play / spin / cash-out
                action where emphasis matters more than brand cohesion.
                Always visually distinct from --brand-primary so two
                CTAs can sit on the same screen without confusion.
       Used in: <BaseButton variant="emphasis"> → bg-button-emphasis
                .bg-progress-emphasis (rollover progress bars)
                .text-accent-emphasis
       Effect:  shifts the high-emphasis CTA hue */
  --brand-emphasis:      oklch(0.9 0.35 128);    /* lime green */

  /* --brand-emphasis-fg
       Role:    text/icon color on --brand-emphasis surfaces.
       Used in: text-button-emphasis utility (Button.vue emphasis)
       Effect:  legibility of the emphasis CTA's label */
  --brand-emphasis-fg:   #000000;

  /* --brand-promo
       Role:    decorative background for the promo banner / bonus
                ribbon. Picked to feel "different" from the rest of
                the UI: Zamba uses dark green, Giro/Bloqued use deep
                purple — so the promo strip reads as a separate
                visual layer.
       Used in: .bg-promo-primary (promo banner background)
       Effect:  recolor the promotional ribbon */
  --brand-promo:         oklch(0.32 0.12 148);   /* deep forest green */

  /* --brand-promo-fg
       Role:    text/icon color on the promo banner.
       Used in: .text-promo-primary
       Effect:  legibility of promo banner copy */
  --brand-promo-fg:      oklch(0.86 0.05 148);   /* pale green-mint */


  /* ─── Neutral surface scale ──────────────────────────────────
     SURFACES are background fills *behind* content (page, cards,
     modals). They form an ELEVATION ladder from deepest (base) to
     most lifted (overlay). They are NOT text colors — see the
     foreground scale below. The hue stays at 282° (indigo/violet)
     across the scale — only L moves — so the surfaces feel like
     one cohesive material lit from different angles. */

  /* --neutral-base
       Role:    the deepest surface — the <body> page background.
                Visible behind everything else.
       Used in: body { background-color }, .bg-default,
                .bg-default/60 (loading overlays use this with alpha)
       Effect:  changes the entire app's background tone */
  --neutral-base:        oklch(0.16 0.05 282);   /* deep indigo near-black */

  /* --neutral-raised
       Role:    one step up from base — cards, panels, sidebars,
                sub-sections that should read as "above" the page.
                The most common surface in the app.
       Used in: .bg-subtle (most-used bg utility — wallet cards,
                game thumbnails, table rows, dashboard sections)
                drives --action-subtle (subtle button bg)
       Effect:  recolors all card-like surfaces */
  --neutral-raised:      oklch(0.2 0.06 282);

  /* --neutral-overlay
       Role:    top of the elevation stack — modals, popovers,
                dropdowns, the most "lifted" UI elements.
       Used in: .bg-emphasis (modal interiors, prominent highlight
                boxes, jurisdiction-error card)
                drives --action-secondary (secondary button bg)
       Effect:  recolors modals and prominent overlays */
  --neutral-overlay:     oklch(0.28 0.08 282);

  /* --neutral-active
       Role:    hover / pressed state on raised surfaces — slightly
                brighter than raised so it reads as "lit up".
       Used in: .bg-active (active nav item, selected tab)
                drives --action-secondary-hover and
                --action-subtle-hover
       Effect:  intensity of hover feedback on neutral controls */
  --neutral-active:      oklch(0.31 0.07 282);

  /* --neutral-muted
       Role:    most subdued surface — disabled controls, skeleton
                loaders, low-priority chip backgrounds, ring lines.
       Used in: .bg-muted (badge fills, decorative rings)
                .border-muted/5 (the standard subtle card border)
       Effect:  tone of disabled/muted UI */
  --neutral-muted:       oklch(0.51 0.09 282);


  /* ─── Neutral content scale ──────────────────────────────────
     CONTENT colors are the TEXT and ICON colors that sit ON
     surfaces. They form an EMPHASIS ladder from highest contrast
     (fg) to faintest (fg-faint). These pair with the surfaces
     above — the strongest text on the deepest background, etc.
     Same indigo hue as the surface scale so text and background
     belong to the same color family. */

  /* --neutral-fg
       Role:    highest contrast text — page titles, primary
                headings, important values, the body's default
                text color.
       Used in: body { color }, .text-default
       Effect:  legibility of the most important text */
  --neutral-fg:          #ffffff;

  /* --neutral-fg-emphasis
       Role:    emphasized body text — labels, sub-headings, input
                values. Slightly quieter than --neutral-fg but still
                clearly readable.
       Used in: .text-emphasis
                input::placeholder (default placeholder color)
                input:-webkit-autofill (Mac autofill text)
                .bg-text-emphasis (used as a chip-fill background)
                drives --action-secondary-fg (secondary button text)
       Effect:  tone of secondary headings and input text */
  --neutral-fg-emphasis: oklch(0.86 0.025 282);

  /* --neutral-fg-muted
       Role:    secondary descriptive text — helper text, inline
                captions, sub-line copy.
       Used in: .text-subtle-light
       Effect:  tone of helper/descriptive copy */
  --neutral-fg-muted:    oklch(0.74 0.05 282);

  /* --neutral-fg-faint
       Role:    faintest text — disabled text, placeholder hints,
                timestamps, metadata. The most-used text class in
                the codebase (60+ occurrences).
       Used in: .text-subtle, .bg-text-subtle
                drives --action-subtle-fg (text on subtle buttons)
       Effect:  tone of all secondary/tertiary copy */
  --neutral-fg-faint:    oklch(0.62 0.07 282);


  /* ─── Status pairs ───────────────────────────────────────────
     Each pair has a tinted background (low-saturation, readable as
     a banner fill) and a vivid foreground (high-saturation,
     readable as inline text accent). They drive both alert
     surfaces and badge/chip styles.
       --status-{kind}     → background  (.bg-alert-{kind}, .bg-{kind})
       --status-{kind}-fg  → text accent (.text-alert-{kind})
     Status hues stay universal (red/green/blue/yellow) — these are
     not branded, the user's eye expects them to mean the same
     thing on every site. */

  /* --status-success / --status-success-fg
       Role:    confirmation banners, completed-state badges, money-
                in callouts. -fg is also reused by the rollover
                progress bar's "complete" state.
       Effect:  feedback color for positive outcomes */
  --status-success:      oklch(0.42 0.13 138);   /* tinted green bg */
  --status-success-fg:   oklch(0.88 0.27 132);   /* vivid green text */

  /* --status-warning / --status-warning-fg
       Role:    caution banners — pending KYC, low-balance alerts,
                soft errors that aren't blocking.
       Effect:  feedback color for "be careful" states */
  --status-warning:      oklch(0.45 0.1 95);     /* tinted gold bg */
  --status-warning-fg:   oklch(0.91 0.2 100);    /* vivid gold text */

  /* --status-danger / --status-danger-fg
       Role:    hard errors, validation failures, destructive
                actions. The -fg color also drives the solid red
                button background (--action-danger).
       Effect:  feedback color for failures and destructive UI */
  --status-danger:       oklch(0.42 0.14 25);    /* tinted red bg */
  --status-danger-fg:    oklch(0.72 0.2 25);     /* vivid red text */

  /* --status-info / --status-info-fg
       Role:    neutral informational banners — site notices, terms
                callouts, advisory messages.
       Effect:  feedback color for non-urgent information */
  --status-info:         oklch(0.46 0.13 270);   /* tinted blue bg */
  --status-info-fg:      oklch(0.84 0.08 270);   /* light blue text */


  /* ─── Brand-tuned hover overrides ─────────────────────────────
     By default, the base file derives action hovers via
       color-mix(in oklch, var(--brand-…), white 8-10%)
     which is a subtle perceptual lightening. Override these
     individually when the brand expects a *distinct* hover hue
     (e.g. mustard yellow → bright lemon yellow, rather than just
     a lighter shade of mustard).

     Setting these is purely optional — leave them out and the
     defaults kick in. */

  /* --action-primary-hover
       Used in: .bg-button-primary-hover (BaseButton primary hover) */
  --action-primary-hover:  oklch(0.94 0.22 100);  /* brighter yellow */

  /* --action-emphasis-hover
       Used in: .bg-button-emphasis-hover (BaseButton emphasis hover) */
  --action-emphasis-hover: oklch(0.93 0.3 130);   /* brighter lime */
}