/* ==========================================================================
   Gifter Global Styles
   Author: Tom Stout (12bytes)
   Description: Global styles, color system, light mode, dark mode.
   Mobile-first.
   ========================================================================== */

/* ------------------------------
   0. Reset-ish helpers
   ------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

html {
  scroll-behavior: smooth;
}

/* ------------------------------
   1. Theme Variables
   LIGHT MODE defaults live on :root
   DARK MODE overrides live on body.dark-mode
   ------------------------------ */

:root {
  /* Brand */
  --color-primary: #2a9d8f;   /* teal */
  --color-secondary: #264653; /* deep blue/green */
  --color-success: #e9c46a;   /* gold */
  --color-danger:  #d62828;   /* red */
  --color-emphasis:#f4a261;   /* orange */
  --color-link:    #e76f51;   /* coral */

  /* LIGHT MODE SURFACES */
  --bg-page: #f8f9fa;                /* app background */
  --bg-card: #ffffff;                /* cards/forms */
  --bg-card-alt: rgba(0,0,0,0.03);   /* subtle headers */
  --bg-soft: rgba(0,0,0,0.04);       /* small info blocks */
  --bg-navbar: var(--color-secondary);

  /* BORDERS / SHADOWS */
  --border-color-soft: rgba(0,0,0,0.08);
  --shadow-card-rest: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 6px 12px rgba(0,0,0,0.08);

  /* TEXT COLORS */
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #6c757d;
  --text-inverse: #ffffff; /* use on dark navbar, etc. */

  /* FORM COLORS */
  --form-bg: #ffffff;
  --form-border: rgba(0,0,0,0.15);
  --form-focus-ring: rgb(42 157 143 / 20%);

  /* LIST ITEM */
  --list-item-bg: #ffffff;

  /* RADII */
  --radius-card: 0.75rem;
  --radius-input: 0.375rem;

  /* TYPOGRAPHY */
  --font-family-base: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --line-height-base: 1.5;
  --font-size-base: 16px;
}

/* DARK MODE OVERRIDES
   We redefine the same tokens so the rest of the CSS doesn't change.
*/
body.dark-mode {
  --bg-page: #0f1a1a;
  --bg-card: #1f2a2a;
  --bg-card-alt: rgba(255,255,255,0.03);
  --bg-soft: rgba(255,255,255,0.05);
  --bg-navbar: #1f2f36;

  --border-color-soft: rgba(255,255,255,0.12);
  --shadow-card-rest: 0 8px 24px rgba(0,0,0,0.9);
  --shadow-card-hover: 0 10px 32px rgba(0,0,0,1);

  --text-primary: #f5f5f5;
  --text-secondary: #d0d0d0;
  --text-muted: #9ba4a4;
  --text-inverse: #ffffff;

  --form-bg: #1f2a2a;
  --form-border: rgba(255,255,255,0.2);
  --form-focus-ring: rgb(42 157 143 / 35%);

  --list-item-bg: #1f2a2a;
}

/* ------------------------------
   2. Global Page / Typography
   ------------------------------ */

body {
  margin: 0;
  padding: 0;

  background-color: var(--bg-page);
  color: var(--text-primary);

  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);

  transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }

@media (min-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
}

p {
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

/* ------------------------------
   3. Layout helpers
   ------------------------------ */

.container {
  padding-left: 1rem;
  padding-right: 1rem;
}

.section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ------------------------------
   4. Navbar
   ------------------------------ */

.navbar {
  background-color: var(--bg-navbar) !important;
  color: var(--text-inverse) !important;
  border-bottom: 1px solid var(--border-color-soft);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text,
.navbar .navbar-toggler {
  color: var(--text-inverse) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  opacity: 0.85;
  color: var(--color-success) !important;
}

/* Brand logo invert in dark mode */
body.dark-mode #navbar-logo {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* Theme toggle button; we dynamically flip btn-outline-light / dark in JS,
   but we also make sure text stays legible in dark mode. */
body.dark-mode #theme-toggle.btn {
  color: #f5f5f5;
  border-color: #f5f5f5;
}
body.dark-mode #theme-toggle.btn:hover {
  background-color: var(--color-emphasis);
  color: #000;
}

/* ------------------------------
   5. Links
   ------------------------------ */

a,
a:visited {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--color-emphasis);
  text-decoration: underline;
}

/* ------------------------------
   6. Cards / Surfaces
   ------------------------------ */

.card {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-rest);
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.2s ease,
              transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.card-header {
  background-color: var(--bg-card-alt);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color-soft);
  font-weight: 600;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease;
}

.card-footer {
  background-color: var(--bg-card-alt);
  color: var(--text-muted);
  border-top: 1px solid var(--border-color-soft);
  font-size: 0.9rem;
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease;
}

/* Soft info block (like Private Notes) */
.bg-soft {
  background-color: var(--bg-soft);
  border-radius: var(--radius-card);
  padding: 1rem;
  color: var(--text-primary);
  transition: background-color 0.3s ease,
              color 0.3s ease;
}

/* Wishlist list-group items */
.list-group-item {
  background-color: var(--list-item-bg);
  color: var(--text-primary);
  border-color: var(--border-color-soft);
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease;
}

/* ------------------------------
   7. Forms
   ------------------------------ */

input,
select,
textarea {
  border-radius: var(--radius-input) !important;
  border: 1px solid var(--form-border) !important;
  background-color: var(--form-bg) !important;
  color: var(--text-primary) !important;

  font-size: 1rem !important;
  line-height: 1.4 !important;
  padding: 0.5rem 0.75rem !important;
  width: 100%;

  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
  box-shadow: 0 0 0 0.2rem var(--form-focus-ring);
  border-color: var(--color-primary) !important;
  background-color: var(--form-bg) !important;
  color: var(--text-primary) !important;
}

.form-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.form-text {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ------------------------------
   8. Buttons / Badges / Alerts
   We align Bootstrap buttons + your brand colors.
   ------------------------------ */

/* Primary (teal) */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  transition: all 0.2s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(0.9);
  color: #fff !important;
}

/* Secondary (deep blue/green) */
.btn-secondary {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: #fff !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  filter: brightness(0.9);
  color: #fff !important;
}

/* Danger (red) */
.btn-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #fff !important;
}

/* Call-to-action / emphasis (orange) */
.btn-emphasis {
  background-color: var(--color-emphasis) !important;
  border-color: var(--color-emphasis) !important;
  color: #000 !important;
  font-weight: 600;
  border-radius: var(--radius-input);
  padding: 0.5rem 0.75rem;
  line-height: 1.4;
}
.btn-emphasis:hover,
.btn-emphasis:focus {
  filter: brightness(0.95);
}

/* Parent role badge in navbar */
.badge.bg-emphasis {
  background-color: var(--color-emphasis) !important;
  color: #000 !important;
  font-weight: 600;
}

/* Alerts */
.alert {
  border-radius: var(--radius-input);
  border: none;
  font-weight: 500;
  color: #000;
}
.alert-success {
  background-color: var(--color-success);
}
.alert-danger,
.alert-error {
  background-color: var(--color-danger);
  color: #fff;
}

/* ------------------------------
   9. Footer
   ------------------------------ */
footer {
  text-align: center;
  padding: 1rem 0;
  background-color: var(--color-secondary);
  color: #fff;
  font-size: 0.9rem;
  border-top: 1px solid var(--border-color-soft);
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease;
}

/* ------------------------------
   10. Transitions
   ------------------------------ */
body,
.navbar,
.card,
.card-header,
.card-footer,
.list-group-item {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}


body.dark-mode #theme-toggle.btn {
  color: #f5f5f5;
  border-color: #f5f5f5;
}
body.dark-mode #theme-toggle.btn:hover {
  background-color: var(--color-emphasis);
  color: #000;
}

#theme-toggle.btn.btn-outline-light {
  color: #ffffff;
  border-color: #ffffff;
}

#theme-toggle.btn.btn-outline-dark {
  color: #1a1a1a;
  border-color: #1a1a1a;
}