/* static/base.css */

/* ########################## 1) Design tokens first ########################## */
/* @import url("css/tokens.css"); */
/* 1) Brand palette (from canva export) */
:root {
  /* Coral scale */
  --coral-50:  #fef7f5;
  --coral-100: #fdeee9;
  --coral-200: #fbd9d0;
  --coral-300: #f8baa8;
  --coral-400: #f49478;
  --coral-500: #ec6f4d; /* primary */
  --coral-600: #d95636;
  --coral-700: #b5432a;
  --coral-800: #963a28;
  --coral-900: #7c3426;

  /* Sand scale */
  --sand-50:  #faf9f7; /* body bg */
  --sand-100: #f5f3ef;
  --sand-200: #ebe6de;
  --sand-300: #ddd5c8;
  --sand-400: #c9bca8;
  --sand-500: #b5a38c;

  /* Charcoal scale */
  --charcoal-900: #1a1a1a; /* body text */
  --charcoal-800: #2d2d2d;
  --charcoal-700: #404040;
  --charcoal-600: #525252;

  /* Semantic aliases */
  --bg: var(--sand-50);
  --surface: #ffffff;
  --text: var(--charcoal-900);
  --muted: var(--charcoal-600);
  --border: var(--sand-200);

  /* Geometry + elevation */
  --radius-xs: 0.5rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 10px 30px rgba(236, 111, 77, 0.10);
  --shadow-lg: 0 18px 60px rgba(236, 111, 77, 0.18);

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-1: 140ms;
  --dur-2: 220ms;
}

/* 2) Bootstrap 5 theme mapping (works without Sass) */
:root {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);

  --bs-primary: var(--coral-500);
  --bs-secondary: var(--sand-500);
  --bs-dark: var(--charcoal-900);

  /* Bootstrap sometimes needs RGB vars for shadows/alpha usage */
  --bs-primary-rgb: 236, 111, 77;
  --bs-secondary-rgb: 181, 163, 140;
  --bs-dark-rgb: 26, 26, 26;

  --bs-body-font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* default rounding closer to your design */
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
}


/* ########################## 2) Component primitives ########################## */
/* @import url("css/components.css"); */
/* ---- Global base ---- */
body {
  background: var(--bg);
  color: var(--text);
  margin-top: var(--nav-offset); /* replaces hardcoded 5rem */
  font-family: var(--bs-body-font-family);
}

.row {
  padding-top: 6.5rem
}

h1,h2,h3,h4,h5,h6 { color: var(--text); }

/* ---- Navbar (re-skin your existing .bg-steel) ---- */
.bg-steel {
  /* repurpose: “glassy sand” navbar 
  background: rgba(250, 249, 247, 0.82) !important; /* sand-50 w/ alpha */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* border-bottom: 1px solid;
  border-color: var(--sand-200) */
  transition: box-shadow var(--dur-2) var(--ease-out);
}

.nav-container {
  padding-right: 5rem;
  padding-left: 5rem;
}

.navbar-title {
  font-weight: 600;
  color: var(--charcoal-900);
  font-size: 1.55rem;
  line-height: 1.75rem;
}

.site-header .navbar-nav .nav-link {
  color: var(--charcoal-700);
  font-weight: 400;
  font-size: 1.05rem;
  padding-left: 0.75rem;
  padding-right: 1.25rem;
}

.site-header .navbar-nav .nav-link:hover {
  color: var(--coral-500);
}

.site-header .navbar-nav .nav-link:active {
  color: var(--charcoal-900);
  /* font-weight: 800; */
}

/* Add/remove this class via JS on scroll */
.site-header .navbar .is-scrolled {
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.08);
}

/* ---- Buttons: make Bootstrap buttons match Canva feel ---- */
.btn {
  border-radius: var(--radius-md);
  padding-top: .35rem;
  padding-bottom: .475rem;
  padding-left: .75rem;
  padding-right: .75rem;
}

.btn:hover {
  color: #fff
}

.btn-primary {
  color: var(--coral-500);
  background: var(--sand-50);
  background-color: var(--sand-50);
  border-color: var(--coral-500);
}

.btn-primary:hover, 
.btn-primary:active, 
.btn-primary:focus, 
.btn-primary:focus-visible {
  background: var(--coral-500);
  border-color: var(--coral-500);
  box-shadow: 0 0 0 .25rem rgba(244, 148, 120, 0.25);
}

.btn-outline-info {
  color: var(--charcoal-800);
  background: var(--sand-50);
  background-color: var(--sand-50);
  border-color: var(--charcoal-800);
}

.btn-outline-info:hover, 
.btn-outline-info:active, 
.btn-outline-info:focus, 
.btn-outline-info:focus-visible {
  background: var(--charcoal-600);
  border-color: var(--charcoal-600);
  box-shadow: 0 0 0 .25rem rgba(134, 183, 254, 0.25);
}


.btn-secondary {
  background-color: var(--charcoal-600);
}

.btn-secondary:hover{
  background-color: var(--charcoal-700);
}

.btn-pill { border-radius: var(--radius-pill); }

/* ---- Cards / content sections (bridge your existing .content-section) ---- */
.content-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

/* Optional “lift on hover” utility */
.card-lift {
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ---- Footer: you already have structure; just make it match palette if desired ---- */
.footer-bottom {
  background: var(--surface);
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ---- Scope control (optional but recommended) ---- */
.scope-marketing .content-section {
  border-radius: 2rem; /* marketing can be “rounder” without affecting app pages */
}

/* ---- Icon Stylings ---- */
.icon-sm {
  padding: 0.45rem;
}
.icon-sm-div {
  background: var(--coral-500);
  border-color: var(--coral-500);
  border-radius: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.55rem;
}

/* ---- Form Stylings ---- */
.form-control:focus{
  border-color: var(--coral-500);
  box-shadow: 0 0 0 .25rem rgba(244, 148, 120, 0.25)
}

/* ########################## 3) Legacy bridge / app-specific existing rules ##########################
  (your current base.css goes here)
  Keep these at the bottom so they can be gradually refactored to tokens/components. */

ul {
  margin: 0;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

/** button group styles **/
.buttongroup {
  display: flex;
  align-items: center;
}

.buttongroup label{
  padding-top: .35rem;
  padding-bottom: .475rem;
  padding-left: .75rem;
  padding-right: .75rem;
  border-radius: 1rem;
  color: var(--coral-500);
  background: var(--sand-50);
  background-color: var(--sand-50);
  border: 1px solid;
  border-color: var(--coral-500);
  /* text-decoration: none; */
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 0.75rem;
}

/* .buttongroup label:not(:first-of-type){
  border-left: 1px solid;
} */

.buttongroup label:hover{
  background-color: var(--coral-500);
  color: #fff;
}

/* .buttongroup p{
  color: var(--charcoal-600);
} */

@media(max-width:767px) {
  h1{
      font-size:40px;
      text-align:center;
  }
}

/* ##################################################
### Footer: Newsletter and Links
################################################## */

/* Footer */
.site-footer {
  margin-top: 3rem;
}

/* Top newsletter section */
.footer-top {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

.footer-title {
  letter-spacing: 0.2px;
}

.footer-subtitle {
  max-width: 52ch;
  opacity: 0.85;
}

.newsletter-form .input-group .form-control,
.newsletter-form .input-group .btn {
  border-radius: 0; /* clean, “shopify-ish” look like Dokudu */
}

.newsletter-form .form-control {
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.newsletter-form .btn {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Bottom links section */
.footer-copy {
  opacity: 0.9;
}

/* Footer bottom: single centered line, wraps on small screens */
.footer-inline {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;   /* responsive: allows multiple lines on small screens */
  gap: 0;            /* no gaps */
  margin: 0;
  padding: 0;
  font-size: 0.875rem; /* slightly smaller */
}

.footer-inline li {
  margin: 0;
  padding: 0;
  white-space: nowrap; /* keeps each item intact; wrapping happens between items */
}

/* separators like Dokudu */
.footer-inline li + li::before {
  content: "·";
  opacity: 0.6;
  padding-right:0.75rem;
  padding-left:0.75rem;
}

/* link styling */
.footer-inline a {
  text-decoration: none;
  color: inherit;
  opacity: 0.9;
}

.footer-inline a:hover {
  text-decoration: underline;
  opacity: 1;
}