/* UP North theme: snow + pines + lake */
html[data-sb-theme="upnorth"]{
  /* ---- Brand palette (light) ---- */
  --sb-surface: #fbfcfe;              /* fresh snow */
  --sb-surface-2: #f3f6fb;            /* drift shadow */
  --sb-text: #0b1220;                 /* midnight */
  --sb-muted: rgba(11, 18, 32, .68);

  --sb-primary: #1f6f5b;              /* pine */
  --sb-primary-rgb: 31, 111, 91;

  --sb-accent: #0f4c81;               /* lake */
  --sb-accent-rgb: 15, 76, 129;

  --sb-blaze: #ff6a00;                /* blaze orange */

  --sb-border: rgba(11, 18, 32, .14);
  --sb-ring: rgba(15, 76, 129, .35);

  /* Nav + menus */
  --sb-nav-bg: rgba(250, 252, 255, .92);
  --sb-submenu-bg: #ffffff;
  --sb-subtle-hover: rgba(15, 76, 129, 0.08);
  --sb-active-bg: rgba(31, 111, 91, 0.14);
  --sb-active-rail: rgba(31, 111, 91, 0.95);

  --sb-control-border: rgba(11, 18, 32, .18);
  --sb-control-text: rgba(11, 18, 32, .92);

  /* Page vibe */
  --sb-page-grad-1: rgba(15, 76, 129, 0.10);
  --sb-page-grad-2: rgba(31, 111, 91, 0.10);
}

/* ---- Brand palette (dark) ---- */
html[data-sb-theme="upnorth"][data-bs-theme="dark"]{
  --sb-surface: #0d1218;              /* night snow */
  --sb-surface-2: #121a24;
  --sb-text: rgba(255,255,255,.92);
  --sb-muted: rgba(255,255,255,.70);

  --sb-border: rgba(255,255,255,.14);
  --sb-ring: rgba(125, 176, 255, .35);

  --sb-nav-bg: rgba(13, 18, 24, .90);
  --sb-submenu-bg: #101823;
  --sb-subtle-hover: rgba(255,255,255,0.08);

  /* keep pine/lake but a little brighter in dark */
  --sb-primary: #44b79a;
  --sb-primary-rgb: 68, 183, 154;

  --sb-accent: #7db0ff;
  --sb-accent-rgb: 125, 176, 255;

  --sb-active-bg: rgba(125, 176, 255, 0.16);
  --sb-active-rail: rgba(125, 176, 255, 0.95);

  --sb-control-border: rgba(255,255,255,.22);
  --sb-control-text: rgba(255,255,255,.92);
}

/* ============================================================
   Map UpNorth -> Bootstrap variables
   This is what makes the whole site actually look themed.
   ============================================================ */
html[data-sb-theme="upnorth"]{
  --bs-body-bg: var(--sb-surface);
  --bs-body-color: var(--sb-text);
  --bs-secondary-color: var(--sb-muted);

  --bs-border-color: var(--sb-border);

  --bs-primary: var(--sb-primary);
  --bs-link-color: rgb(var(--sb-accent-rgb));
  --bs-link-hover-color: rgba(var(--sb-accent-rgb), .85);

  --bs-primary-rgb: var(--sb-primary-rgb);

  /* Cards, dropdowns, etc. */
  --bs-card-bg: rgba(255,255,255,.78);
  --bs-card-border-color: rgba(11,18,32,.12);

  --bs-dropdown-bg: var(--sb-submenu-bg);
  --bs-dropdown-link-hover-bg: var(--sb-subtle-hover);
  --bs-dropdown-link-active-bg: var(--sb-active-bg);
  --bs-dropdown-link-active-color: var(--sb-text);

  /* Forms */
  --bs-form-control-bg: rgba(255,255,255,.92);
  --bs-form-control-color: var(--sb-text);
  --bs-form-control-border-color: var(--sb-control-border);
}

/* Dark tweaks for Bootstrap vars */
html[data-sb-theme="upnorth"][data-bs-theme="dark"]{
  --bs-card-bg: rgba(16,24,35,.72);
  --bs-card-border-color: rgba(255,255,255,.12);

  --bs-form-control-bg: rgba(16,24,35,.85);
  --bs-form-control-color: rgba(255,255,255,.92);
  --bs-form-control-border-color: rgba(255,255,255,.18);
}

/* ============================================================
   Snowy background + subtle “flakes”
   ============================================================ */
html[data-sb-theme="upnorth"] body{
  background:
    radial-gradient(1200px 700px at 15% -10%, var(--sb-page-grad-1), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, var(--sb-page-grad-2), transparent 55%),
    linear-gradient(var(--sb-surface), var(--sb-surface-2)) !important;
}

/* Micro-snow specks overlay (no images) */
html[data-sb-theme="upnorth"] body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .25;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 70%, rgba(255,255,255,.25) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.30) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 85%, rgba(255,255,255,.20) 0 1px, transparent 2px);
  background-size: 240px 240px, 300px 300px, 260px 260px, 340px 340px;
}

/* Make sure your app content sits above the flakes layer */
html[data-sb-theme="upnorth"] body > *{ position: relative; z-index: 1; }

/* ============================================================
   Frosted nav feel (works with your .navbar-accent rules in _Layout)
   ============================================================ */
html[data-sb-theme="upnorth"] .navbar-accent{
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11, 18, 32, 0.10) !important;
}
html[data-sb-theme="upnorth"][data-bs-theme="dark"] .navbar-accent{
  border-bottom-color: rgba(255,255,255,0.12) !important;
}

/* ============================================================
   Components: make it feel like a “trailhead UI”
   ============================================================ */
html[data-sb-theme="upnorth"] .card,
html[data-sb-theme="upnorth"] .table,
html[data-sb-theme="upnorth"] .alert{
  border-color: var(--sb-border) !important;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
}

/* Buttons: pine primary, lake outline */
    html[data-sb-theme="upnorth"] .btn-primary {
        background-color: #eaeaea !important;
        border-color: var(--sb-primary) !important;
    }
html[data-sb-theme="upnorth"] .btn-outline-primary{
  border-color: rgba(var(--sb-accent-rgb), .55) !important;
  color: rgb(var(--sb-accent-rgb)) !important;
}
html[data-sb-theme="upnorth"] .btn-outline-primary:hover{
  background-color: rgba(var(--sb-accent-rgb), .10) !important;
}

/* Links: lake */
    html[data-sb-theme="upnorth"] a {
        color: rgb(29 65 204);
    }
html[data-sb-theme="upnorth"] a:hover{ color: rgba(var(--sb-accent-rgb), .85); }

/* Focus ring (feels crisp on snow) */
html[data-sb-theme="upnorth"] .form-control:focus,
html[data-sb-theme="upnorth"] .form-select:focus,
html[data-sb-theme="upnorth"] .btn:focus{
  box-shadow: 0 0 0 .2rem var(--sb-ring) !important;
}

/* Optional blaze highlight for active submenu items */
html[data-sb-theme="upnorth"] .submenu .dropdown-item.active{
  box-shadow: inset 3px 0 0 var(--sb-blaze);
}