/* ============================================================================
   Ohmyfin brand tokens + Bootstrap 5 theme remap  (SINGLE SOURCE OF TRUTH)
   Full reference & usage rules: docs/design-system.md

   Load order: linked AFTER /css/bootstrap.min.css so the remap wins the
   cascade. Bundled Bootstrap is 5.3+, so buttons/badges are driven by local
   --bs-* CSS variables; remapping the variables recolours every component at
   once (no need to touch 150+ blade files).

   GOVERNING RULE
   --------------
   Brand orange + ink navy + neutrals carry ALL visual identity and emphasis.
   The semantic colours (--success / --warning / --danger / --info) are used
   ONLY to communicate status. Never reach for them as decoration. Decorative
   emphasis (badges, "popular", "save X%", highlights) = brand, via the helper
   classes at the bottom of this file.

   Never hard-code a hex in a blade view. Use a token (var(--brand)) or a
   Bootstrap class. New colour? Add it here first, then reference it.
   ============================================================================ */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --brand:        #f15600;  /* Ohmyfin orange: primary CTA, active, brand mark */
  --brand-strong: #d64d00;  /* hover / pressed / darker orange               */
  --brand-bright: #ff8c42;  /* light accent, gradient partner                */
  --brand-tint:   #fff3e6;  /* soft orange wash: featured headers, soft pills */
  --brand-tint-2: #ffe1c4;  /* border on top of --brand-tint                 */

  /* ---- Ink / dark sections --------------------------------------------- */
  --ink:        #1b1b2f;    /* canonical dark navy: footer, heroes, cookie bar */
  --ink-2:      #2a2a48;    /* gradient partner for dark sections            */
  --ink-line:   #2e2e45;    /* hairline border on dark                       */
  --on-ink:     #c8c8d4;    /* body text on dark sections                    */
  --on-ink-dim: #9e9eb3;    /* muted text on dark sections                   */

  /* ---- Neutrals / text / surfaces -------------------------------------- */
  --text:      #1a1a1a;     /* primary body text                            */
  --muted:     #6c757d;     /* secondary text                               */
  --line:      #e9ecef;     /* default borders                              */
  --surface:   #ffffff;
  --surface-2: #f8f9fa;     /* subtle panels / table stripes                */

  /* ---- Semantic status  (USE ONLY TO COMMUNICATE STATE) ---------------- */
  --success: #198754;       /* positive / confirmed                          */
  --warning: #ffc107;       /* caution / review                             */
  --danger:  #dc3545;       /* error / block                                */
  --info:    #17a2b8;       /* neutral notice / monitor                     */

  /* ---- Reserved accents  (intentional one-offs, do NOT reuse generally) - */
  --accent-gold: #d4af37;   /* credits / coins icon                          */
  --accent-vip:  #6f42c1;   /* VIP crown                                     */
  --accent-link: #0a66c2;   /* "this is an article" / external cue           */

  /* ---- Bootstrap 5 theme remap: primary => brand orange ---------------- */
  --bs-primary:          #f15600;
  --bs-primary-rgb:      241, 86, 0;
  --bs-link-color:       #f15600;
  --bs-link-color-rgb:   241, 86, 0;
  --bs-link-hover-color: #d64d00;
  --bs-link-hover-color-rgb: 214, 77, 0;
}

/* btn-primary => brand. Bootstrap 5.3 buttons read these component-scoped
   variables, so this is all that's needed for solid primary buttons. */
.btn-primary {
  --bs-btn-bg:                  var(--brand);
  --bs-btn-border-color:        var(--brand);
  --bs-btn-hover-bg:            var(--brand-strong);
  --bs-btn-hover-border-color:  var(--brand-strong);
  --bs-btn-active-bg:           var(--brand-strong);
  --bs-btn-active-border-color: var(--brand-strong);
  --bs-btn-disabled-bg:         var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb:    241, 86, 0;
}

/* btn-outline-primary => brand. Setting --bs-btn-active-bg here ALSO fixes the
   `.btn-check:checked + .btn-outline-primary` toggle state (it reads the same
   variable). That checked state was the source of the blue "Monthly" leak: the
   previous override only patched `.active`, not the btn-check sibling. */
.btn-outline-primary {
  --bs-btn-color:                 var(--brand);
  --bs-btn-border-color:          var(--brand);
  --bs-btn-hover-bg:              var(--brand);
  --bs-btn-hover-border-color:    var(--brand);
  --bs-btn-active-bg:             var(--brand);
  --bs-btn-active-border-color:   var(--brand);
  --bs-btn-disabled-color:        var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb:      241, 86, 0;
}

/* ---- Brand helper classes  (decorative emphasis -> brand, not semantic) -- */

/* Solid brand pill: the single loudest marker on a view ("Popular"/"Best"). */
.badge-brand {
  background-color: var(--brand);
  color: #fff;
}

/* Soft savings/promo pill: pale orange wash, brand text. Subtle on purpose so
   it never competes with the solid-orange buy buttons. Use for "Save X%". */
.badge-savings {
  background-color: var(--brand-tint);
  color: var(--brand-strong);
  border: 1px solid var(--brand-tint-2);
  font-weight: 600;
}

/* Badge sitting ON a solid-brand surface (e.g. an orange card header):
   invert to a white pill with brand text so it stays legible. */
.badge-on-brand {
  background-color: #fff;
  color: var(--brand);
}

/* Inline brand emphasis text (savings copy, "Save $X / year"). Uses the darker
   orange so it stays legible at body-text size. Replaces decorative text-success. */
.text-brand { color: var(--brand-strong) !important; }

/* Featured-card header wash (e.g. the "Popular" plan column). */
.surface-brand-tint { background-color: var(--brand-tint); }

/* Standard dark section (heroes, footers, banners). One canonical navy. */
.section-ink {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--on-ink);
}