/* ============================================================================
   Loopa brand layer — loopa tenant only.
   ============================================================================

   WHY THIS FILE EXISTS. Before 2026-08-16 the Loopa web app rendered in the
   shared platform "light" theme and carried none of its own brand. Measured on
   the live site, not asserted: `--color-primary` was #2563eb (blue),
   `--color-bg-body` #f0f0f0 (neutral grey), `--color-text-primary` #1a1a1a.
   Midnight, Cream and Violet appeared ZERO times in the served stylesheet. The
   only brand colour present was Amber — the one colour with a usage
   restriction, and it was being used as text on white cards at 2.15:1.

   Meanwhile the iOS and Android apps have a fully worked brand system with
   measured contrast on every token. So the web was not just off-brand, it was
   off-brand from its own apps.

   HOW IT WORKS. This redefines the EXISTING token names under
   `[data-tenant="loopa"]`, so the several thousand rules already consuming
   --color-* pick the brand up without rewriting 1.7MB of CSS, and no other
   tenant is touched. Scoping is the whole design: the selector is the tenant
   isolation.

   THE SEMANTIC, which is the part worth keeping. Amber measures, Violet acts.
   Amber carries progress and measurement and NEVER speaks — it is not a text
   colour on light surfaces (#FF7A00 on white is 2.15:1, which is why the rule
   exists). Violet is interaction — buttons, links, focus, selection — and never
   encodes a value. The apps already work this way; this is the web agreeing
   with them about meaning rather than only about hex.

   Every ratio below is computed against the actual surface it renders on.
   ========================================================================= */

[data-tenant="loopa"] {

  /* ── Ground ──────────────────────────────────────────────────────────────
     The tint is on the PAGE and the cards are white. White cards on a white
     page leave the hairline doing all the work and the app reads flat; a tinted
     field lets every card lift on its own. Matches LoopaTheme.surface in the
     apps exactly.

     `--loopa-cream` is deliberately NOT the same colour. Its job is to stay
     VISIBLE against a white card — badges, chips, progress tracks — and the
     wash is 1.07:1 on white, which would erase every one of them. #E6ECFA is
     1.18:1, the separation the old Cream had at 1.11. */
  --loopa-wash:        #F4F7FF;   /* page */
  --loopa-card:        #FFFFFF;   /* card face — Deep Ink 15.97:1 */
  --loopa-input:       #F8FAFF;   /* inputs and raised panels */
  --loopa-cream:       #E6ECFA;   /* badges, chips, on-accent labels */

  /* ── Ink ─────────────────────────────────────────────────────────────────
     Midnight and two derived tiers. The percentages are flattened to hex here
     because the platform's tokens are consumed as solid colours in places
     where an alpha would composite against the wrong backdrop. */
  --loopa-ink:         #14213D;   /* 15.97:1 on card, 14.90:1 on wash */
  --loopa-ink-2:       #464F63;   /* Midnight 80% — 7.66:1 on card */
  --loopa-ink-3:       #5F687B;   /* Midnight 68% — 5.21:1 on card, AA.
                                     Do NOT lighten: 62% lands at 4.33:1 and
                                     fails, which the apps also record. */

  /* ── Interaction ─────────────────────────────────────────────────────────
     Violet is 10.95:1 on white. Cream on Violet is 9.84:1. Midnight on Violet
     is 1.34:1 — the worst pairing in the palette, never do it. */
  --loopa-violet:      #6C3BFF;
  --loopa-violet-hover:#5527D6;
  --loopa-on-violet:   #E6ECFA;

  /* ── Measurement ─────────────────────────────────────────────────────────
     True Amber for fills, tracks, rings and rank badges — anywhere the colour
     is an area rather than a glyph. `--loopa-amber-text` is the ONLY amber
     permitted on type or icons over a light surface: 5.02:1 on white where
     raw Amber is 2.15:1. Same shape as the platform's existing -a11y tokens. */
  --loopa-amber:       #FF7A00;
  --loopa-amber-text:  #9A4A00;

  /* ── Mapped onto the platform's token names ─────────────────────────────
     Everything below is an alias. Existing components change appearance with
     no rule changes, which is what keeps this a single system instead of a
     per-page skin. */
  --color-bg-body:        var(--loopa-wash);
  --color-bg-card:        var(--loopa-card);
  --color-bg-elevated:    var(--loopa-input);
  --color-bg-input:       var(--loopa-input);
  --color-bg-sidebar:     var(--loopa-wash);
  --color-bg-hover:       #EAF0FF;
  --color-bg-table-alt:   #F8FAFF;
  --color-bg-subtle:      var(--loopa-input);
  --color-bg-modal-overlay: rgba(20, 33, 61, 0.55);   /* Midnight, not black */

  --color-text-primary:   var(--loopa-ink);
  --color-text-secondary: var(--loopa-ink-2);
  --color-text-muted:     var(--loopa-ink-3);
  --color-text-inverse:   var(--loopa-on-violet);

  --color-primary:        var(--loopa-violet);
  --color-primary-hover:  var(--loopa-violet-hover);
  --color-accent:         var(--loopa-violet);
  --color-border:         #DDE5F5;                    /* warm hairline */
  --color-border-bright:  #C7D2E8;
  --color-border-input:   #8B9AB8;                    /* 3:1 against input */
  --color-border-focus:   var(--loopa-violet);

  /* Amber is the WARNING colour, but --color-warning is consumed as text in
     places. Point the token at the readable amber and expose the true hue
     separately for fills, so a warning chip can still be Amber-faced. */
  --color-warning:        var(--loopa-amber-text);
  --color-warning-fill:   var(--loopa-amber);
  --color-warning-hover:  #7A3B00;

  --color-toast-warning-bg: #FFF1E3;
  --color-toast-success-bg: #E9F6EF;
  --color-toast-error-bg:   #FDEDEA;
  --color-toast-info-bg:    #EDE9FE;
}

/* ── mobile-v2 token system ───────────────────────────────────────────────
   Phones render templates/mobile/base.php, which is an iOS-flavoured shell
   with its OWN token names (--m-*) rather than the --color-* set above. Its
   default accent is #20C820, a green that appears nowhere in Loopa's brand.
   Mapping this second set is what keeps the phone and the desktop the same
   product; skipping it would have left the brand applying only on the surface
   fewer people use. */
[data-tenant="loopa"] {
  --m-bg:          var(--loopa-wash);
  --m-card:        var(--loopa-card);
  --m-text:        var(--loopa-ink);
  --m-text-sec:    var(--loopa-ink-3);
  --m-separator:   #DDE5F5;
  --m-accent:      var(--loopa-violet);
  --m-accent-text: var(--loopa-violet);
  --m-warning:     var(--loopa-amber-text);
  --m-chrome-bg:   rgba(244, 247, 255, 0.82);
  --m-tint:        var(--loopa-violet);
  --m-ink:         var(--loopa-ink);
  --m-ink-2:       var(--loopa-ink-2);
  --m-ink-3:       var(--loopa-ink-3);
}

/* The phone shell also reads the OS colour scheme. Loopa is a light app on
   every surface it ships (the apps have no dark mode), so pin the tokens
   rather than letting a dark-mode phone render a half-inverted product. */
@media (prefers-color-scheme: dark) {
  [data-tenant="loopa"] {
    --m-bg:        var(--loopa-wash);
    --m-card:      var(--loopa-card);
    --m-text:      var(--loopa-ink);
    --m-text-sec:  var(--loopa-ink-3);
    --m-separator: #DDE5F5;
    --m-chrome-bg: rgba(244, 247, 255, 0.82);
  }
}

/* ── Progress and measurement keep TRUE Amber ──────────────────────────────
   These are areas, not glyphs, so the 4.5:1 text bar does not apply; they need
   3:1 against their track, which Amber clears. Listed explicitly rather than
   left to inheritance so the semantic is legible in the code: these are the
   places Loopa is allowed to be Amber. */
[data-tenant="loopa"] progress::-webkit-progress-value,
[data-tenant="loopa"] .progress-bar__fill,
[data-tenant="loopa"] .health-ring__value,
[data-tenant="loopa"] .streak-flame,
[data-tenant="loopa"] .ach-leader-rank.is-gold,
[data-tenant="loopa"] .stat-leader-rank.is-gold {
  background-color: var(--loopa-amber);
}

/* Amber as a glyph or label on a light surface is the one pairing the brand
   forbids. Where the shared stylesheet sets an amber `color:` for icons and
   values, redirect it to the readable amber. Fills above are unaffected. */
[data-tenant="loopa"] .fd-trending-header__title i,
[data-tenant="loopa"] .mk-stat-card--star .mk-stat-card__value,
[data-tenant="loopa"] .usr-notice--warn .usr-notice__icon {
  color: var(--loopa-amber-text);
}

/* ── Focus ────────────────────────────────────────────────────────────────
   One visible focus treatment for the whole app. Violet ring plus a Cream
   halo so it stays visible on both white cards and the wash. Keyboard users
   only — :focus-visible, so a mouse press does not leave a ring behind. */
[data-tenant="loopa"] :focus-visible {
  outline: 2px solid var(--loopa-violet);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Motion ───────────────────────────────────────────────────────────────
   Honour the OS setting rather than assuming everyone wants movement. */
@media (prefers-reduced-motion: reduce) {
  [data-tenant="loopa"] *,
  [data-tenant="loopa"] *::before,
  [data-tenant="loopa"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Touch targets ────────────────────────────────────────────────────────
   Below the tablet breakpoint every control gets a 44px minimum box. The web
   app is used on phones and was inheriting desktop-sized hit areas. */
@media (max-width: 768px) {
  [data-tenant="loopa"] button,
  [data-tenant="loopa"] .btn,
  [data-tenant="loopa"] input[type="checkbox"],
  [data-tenant="loopa"] input[type="radio"],
  [data-tenant="loopa"] .tab-bar a,
  [data-tenant="loopa"] .mb-rail a {
    min-height: 44px;
  }
}