/*
 * pantryos-tokens.css - THE PantryOS brand seam (single source of truth).
 * Source: docs/ThemeingDocs/PantryOS_Official_UI_UX_Brand_System.pdf (sec 3, 5, 9).
 *
 * TO REBRAND (new colors / radius / font): edit ONLY the --pos-* block below.
 *
 * Everything else maps those official tokens onto the whole app:
 *   2. legacy aliases  - the older --app- and --color- names component CSS uses
 *   3. Bootstrap 5.3   - the --bs-* variables that reskin every button, badge,
 *                        alert, link, and bg/text/border utility at once
 *   4. base treatments - headings navy, Inter font, brand button/card/input look
 *
 * Loaded LAST on both the admin (Phoenix, head.ejs) and public (Sparrow,
 * publicHead.ejs) stacks so it wins over both themes and the older token files.
 */

:root {
  /* 1. OFFICIAL PANTRYOS TOKENS - EDIT HERE TO REBRAND */
  --pos-navy:       #0D2B45; /* primary brand / navigation / headings */
  --pos-navy-700:   #16456B; /* navy hover / darker structure */
  --pos-green:      #2E7D32; /* primary CTA / success / positive */
  --pos-green-700:  #24631F; /* green hover */
  --pos-blue:       #1565C0; /* links / info / analytics */
  --pos-blue-700:   #0F4C92; /* link hover */
  --pos-bg:         #F2F4F7; /* app background / quiet surfaces */
  --pos-surface:    #FFFFFF; /* cards / forms / modal surfaces */
  --pos-text:       #333F48; /* body text */
  --pos-text-muted: #6B7280; /* secondary text / metadata */
  --pos-border:     #D9E0E6; /* borders / dividers */
  --pos-warning:    #D9A43A; /* warnings / attention */
  --pos-danger:     #D94732; /* errors / destructive actions */

  --pos-navy-rgb:    13, 43, 69;
  --pos-green-rgb:   46, 125, 50;
  --pos-blue-rgb:    21, 101, 192;
  --pos-warning-rgb: 217, 164, 58;
  --pos-danger-rgb:  217, 71, 50;

  --pos-radius-sm: 8px;  /* inputs / buttons */
  --pos-radius-md: 12px; /* cards */
  --pos-radius-lg: 16px;
  --pos-shadow: 0 4px 16px rgba(13, 43, 69, .08);

  --pos-font: 'Inter', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* 2. Legacy semantic aliases (older component CSS references these) */
  --app-primary-900: var(--pos-navy);
  --app-primary-700: var(--pos-green);
  --app-primary-500: var(--pos-blue);
  --app-accent:      var(--pos-green);
  --app-accent-soft: #A5D6A7;
  --app-ink-900:     #0B0F14;
  --app-ink-700:     var(--pos-text);
  --app-ink-500:     var(--pos-text-muted);
  --app-ink-300:     #A9B2BB;
  --app-rule:        var(--pos-border);
  --app-bg:          var(--pos-bg);
  --app-surface:     var(--pos-surface);

  --color-primary:       var(--pos-green);
  --color-primary-hover: var(--pos-green-700);
  --color-accent:        var(--pos-green);
  --color-bg:            var(--pos-bg);
  --color-surface:       var(--pos-surface);
  --color-text:          var(--pos-text);
  --color-text-muted:    var(--pos-text-muted);
  --color-border:        var(--pos-border);
  --color-success:       var(--pos-green);
  --color-danger:        var(--pos-danger);
  --color-warning:       var(--pos-warning);
  --color-info:          var(--pos-blue);

  /* 3. Bootstrap 5.3 mapping (reskins every component at once) */
  --bs-primary:       var(--pos-green);       /* primary CTA button = green */
  --bs-primary-rgb:   var(--pos-green-rgb);
  --bs-secondary:     var(--pos-navy);        /* secondary button = navy */
  --bs-secondary-rgb: var(--pos-navy-rgb);
  --bs-success:       var(--pos-green);
  --bs-success-rgb:   var(--pos-green-rgb);
  --bs-info:          var(--pos-blue);
  --bs-info-rgb:      var(--pos-blue-rgb);
  --bs-warning:       var(--pos-warning);
  --bs-warning-rgb:   var(--pos-warning-rgb);
  --bs-danger:        var(--pos-danger);
  --bs-danger-rgb:    var(--pos-danger-rgb);
  --bs-light:         var(--pos-bg);
  --bs-light-rgb:     242, 244, 247;
  --bs-dark:          var(--pos-navy);
  --bs-dark-rgb:      var(--pos-navy-rgb);

  --bs-link-color:           var(--pos-blue);
  --bs-link-color-rgb:       var(--pos-blue-rgb);
  --bs-link-hover-color:     var(--pos-blue-700);
  --bs-link-hover-color-rgb: 15, 76, 146;

  --bs-body-bg:        var(--pos-bg);
  --bs-body-color:     var(--pos-text);
  --bs-body-color-rgb: 51, 63, 72;
  --bs-border-color:   var(--pos-border);
  --bs-emphasis-color: var(--pos-navy);       /* text-body-emphasis -> navy */
}

/* 4. Base treatments (brand typography + components) */
body {
  font-family: var(--pos-font);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--pos-navy);
  font-weight: 700;
}
.text-body-emphasis { color: var(--pos-navy) !important; }

/* Primary button = Fresh Green CTA; darker green on hover. */
.btn-primary {
  --bs-btn-bg: var(--pos-green);
  --bs-btn-border-color: var(--pos-green);
  --bs-btn-hover-bg: var(--pos-green-700);
  --bs-btn-hover-border-color: var(--pos-green-700);
  --bs-btn-active-bg: var(--pos-green-700);
  --bs-btn-active-border-color: var(--pos-green-700);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
/* Secondary button = Deep Navy. */
.btn-secondary {
  --bs-btn-bg: var(--pos-navy);
  --bs-btn-border-color: var(--pos-navy);
  --bs-btn-hover-bg: var(--pos-navy-700);
  --bs-btn-hover-border-color: var(--pos-navy-700);
  --bs-btn-active-bg: var(--pos-navy-700);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}
/* Outline button = navy border/text, light navy hover. */
.btn-outline-primary {
  --bs-btn-color: var(--pos-navy);
  --bs-btn-border-color: var(--pos-navy);
  --bs-btn-hover-bg: var(--pos-navy);
  --bs-btn-hover-border-color: var(--pos-navy);
  --bs-btn-hover-color: #fff;
}

/* Cards: brand radius + hairline border. */
.card {
  --bs-card-border-color: var(--pos-border);
  --bs-card-border-radius: var(--pos-radius-md);
  --bs-card-cap-bg: transparent;
}

/* Inputs: navy/blue focus ring. */
.form-control:focus,
.form-select:focus {
  border-color: var(--pos-blue);
  box-shadow: 0 0 0 0.2rem rgba(var(--pos-blue-rgb), 0.15);
}

/* Badges default to brand structure colors. */
.badge.bg-primary { background-color: var(--pos-green) !important; }
.badge.bg-secondary { background-color: var(--pos-navy) !important; }

/* 5. Phoenix admin theme mapping.
   The Phoenix admin theme drives its components off its OWN --phoenix-* tokens
   (not --bs-*), so we remap those too. Confirmed via computed style that
   .btn-primary reads --phoenix-btn-bg. */
:root {
  --phoenix-primary:        var(--pos-green);
  --phoenix-primary-rgb:    var(--pos-green-rgb);
  --phoenix-primary-hover:  var(--pos-green-700);
  --phoenix-secondary:      var(--pos-navy);
  --phoenix-secondary-rgb:  var(--pos-navy-rgb);
  --phoenix-success:        var(--pos-green);
  --phoenix-success-rgb:    var(--pos-green-rgb);
  --phoenix-info:           var(--pos-blue);
  --phoenix-info-rgb:       var(--pos-blue-rgb);
  --phoenix-warning:        var(--pos-warning);
  --phoenix-warning-rgb:    var(--pos-warning-rgb);
  --phoenix-danger:         var(--pos-danger);
  --phoenix-danger-rgb:     var(--pos-danger-rgb);
  --phoenix-link-color:       var(--pos-blue);
  --phoenix-link-color-rgb:   var(--pos-blue-rgb);
  --phoenix-link-hover-color: var(--pos-blue-700);
}
/* Primary button = green (Phoenix per-button vars). */
.btn-primary {
  --phoenix-btn-bg: var(--pos-green);
  --phoenix-btn-border-color: var(--pos-green);
  --phoenix-btn-hover-bg: var(--pos-green-700);
  --phoenix-btn-hover-border-color: var(--pos-green-700);
  --phoenix-btn-active-bg: var(--pos-green-700);
  --phoenix-btn-active-border-color: var(--pos-green-700);
  --phoenix-btn-disabled-bg: var(--pos-green);
  --phoenix-btn-disabled-border-color: var(--pos-green);
}
/* Secondary button = navy. */
.btn-secondary {
  --phoenix-btn-bg: var(--pos-navy);
  --phoenix-btn-border-color: var(--pos-navy);
  --phoenix-btn-hover-bg: var(--pos-navy-700);
  --phoenix-btn-hover-border-color: var(--pos-navy-700);
  --phoenix-btn-active-bg: var(--pos-navy-700);
}
/* Outline-primary = navy outline. */
.btn-outline-primary {
  --phoenix-btn-color: var(--pos-navy);
  --phoenix-btn-border-color: var(--pos-navy);
  --phoenix-btn-hover-bg: var(--pos-navy);
  --phoenix-btn-hover-border-color: var(--pos-navy);
  --phoenix-btn-active-bg: var(--pos-navy);
}

/* 6. Deep-navy persistent left navigation (brand sec 5 signature).
   Phoenix drives the vertical navbar off --phoenix-navbar-vertical-* vars
   (confirmed). Set the background navy and lift link/label colors to read on it;
   direct overrides back up the hover/active/label states. The horizontal TOP
   bar stays white ("restrained top utility bar"). */
.navbar-vertical {
  --phoenix-navbar-vertical-bg-color: var(--pos-navy);
  --phoenix-navbar-vertical-link-color: rgba(255, 255, 255, 0.72);
  --phoenix-navbar-vertical-link-hover-color: #ffffff;
  --phoenix-navbar-vertical-link-active-color: #ffffff;
  --phoenix-navbar-vertical-label-color: rgba(255, 255, 255, 0.5);
  --phoenix-navbar-vertical-border-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.navbar-vertical .navbar-collapse { border-color: rgba(255, 255, 255, 0.1) !important; }
.navbar-vertical .nav-link { color: rgba(255, 255, 255, 0.72) !important; }
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus { color: #ffffff !important; }
.navbar-vertical .nav-link.active { color: #ffffff !important; font-weight: 600; }
/* Green accent bar on the active item (brand green for the current location). */
.navbar-vertical .navbar-vertical-content .nav-link.active {
  box-shadow: inset 3px 0 0 var(--pos-green);
}
.navbar-vertical .navbar-vertical-label,
.navbar-vertical .nav-link-text-label { color: rgba(255, 255, 255, 0.5) !important; }
/* The pantry name / brand sits in the navy nav header -> keep it white. */
.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-brand * { color: #ffffff !important; }
/* "Collapsed View" toggle + any bottom controls read light on navy. */
.navbar-vertical .navbar-vertical-footer,
.navbar-vertical .navbar-vertical-footer * { color: rgba(255, 255, 255, 0.72) !important; }

/* Masked beneficiary phone: keep the show/hide eye subtle, not link-blue. */
.phone-reveal .phone-toggle { color: var(--pos-text-muted); text-decoration: none; }
.phone-reveal .phone-toggle:hover,
.phone-reveal .phone-toggle:focus { color: var(--pos-navy); }

/* Dark mode: brighten navy-heavy tokens so they stay legible. */
[data-bs-theme="dark"] {
  --bs-link-color: #5FA8FF;
  --bs-link-color-rgb: 95, 168, 255;
  --bs-emphasis-color: #E8EEF4;
}
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .text-body-emphasis { color: #E8EEF4; }