/* ==========================================================
   SAHAJ SKIN — Self-contained (Fonts + Colors)
   - No dependency on theme's skin files
   - Includes Google Fonts (Poppins, Montserrat, Libre Baskerville)
   - Sets color tokens and minimal component hooks
   ========================================================== */

/* 1) Fonts (Google Fonts import) */
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Montserrat:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap");

/* 2) Variables (work even if theme skin is removed) */
:root,
html[data-theme-color],
html[data-theme-color="skin-8"],
[data-bs-theme="light"] {
  /* ----- Typography tokens (from your current skin) ----- */
  --font-family-base: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  --font-family-title: "Libre Baskerville", Georgia, "Times New Roman", serif !important;
  --bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;

  /* Apply them explicitly so it works without theme skin */
  /* Body & general text */
  --bs-font-sans-serif: var(--bs-body-font-family);
  /* Optional: you can keep headings on Poppins or use title font below */

  /* ----- Sahaj brand colors ----- */
  --bs-body-color: #496A77;          /* calm text (like your uploaded skin) */
  --bs-heading-color: #11516A;       /* deep teal for headings */
  --bs-heading-color-rgb: 17, 81, 106;

  --bs-primary:   #0077C8;           /* Sahaj blue */
  --bs-secondary: #031B4E;           /* deep navy */
  --bs-info:      #00BDE0;           /* sky blue highlight */
  --bs-warning:   #FFD200;           /* yellow accent */
  --bs-success:   #31A56D;
  --bs-danger:    #D23636;
  --bs-light:     #F4F9FC;
  --bs-dark:      #1A1F36;

  --bs-primary-rgb:   0,119,200;
  --bs-secondary-rgb: 3,27,78;
  --bs-info-rgb:      0,189,224;
  --bs-light-rgb:     244,249,252;

  --bs-primary-text-emphasis:   #004C97;
  --bs-secondary-text-emphasis: #031B4E;
  --bs-info-text-emphasis:      #005B99;
  --bs-light-text-emphasis:     #606665;

  --bs-primary-bg-subtle:   #D6EBF7;
  --bs-secondary-bg-subtle: #D0EDED;
  --bs-light-bg-subtle:     #FCFFFF;
  --bs-primary-border-subtle:#D1EDEC;
  --bs-secondary-border-subtle:#CFDCE1;
  --bs-light-border-subtle: #F2F5F8;

  /* Nice button hovers (taken from your skin style) */
  --bs-primary-btn-hover-bg:    #004C97;
  --bs-primary-btn-hover-border-color: #004C97;

  --bs-focus-ring-color: rgba(0, 189, 224, 0.25);
  --bs-border-color: #E1EBF1;
}

/* Dark theme tokens */
[data-bs-theme="dark"] {
  --bs-body-color: #dee2e6;
  --bs-body-bg: #212529;
  --bs-secondary-bg: #343a40;

  --bs-primary:   #00BDE0;
  --bs-secondary: #031B4E;
  --bs-warning:   #FFD200;
  --bs-danger:    #D23636;
  --bs-light:     #F4F9FC;
  --bs-dark:      #1A1F36;

  --bs-link-color:       #00BDE0;
  --bs-link-hover-color: #66D9F0;

  --bs-primary-bg-subtle: #002C44;
  --bs-info-bg-subtle:    #00354C;
  --bs-warning-bg-subtle: #4D4000;

  --bs-border-color: #495057;
}

/* 3) Base font application (keeps your chosen families even w/o theme skin) */
body {
  font-family: var(--bs-body-font-family);
  color: var(--bs-body-color);
}
h1, h2, h3, h4, h5, h6 {
  /* If you prefer Poppins for headings, change to var(--bs-body-font-family) */
  font-family: var(--font-family-title);
  color: var(--bs-heading-color);
}

/* 4) Common component color hooks (no layout changes) */
a { color: var(--bs-link-color, #0077C8); }
a:hover { color: var(--bs-link-hover-color, #005B99); }

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-btn-hover-bg);
  --bs-btn-hover-border-color: var(--bs-primary-btn-hover-border-color);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
}

.badge.bg-warning,
.badge.text-bg-warning { background-color: var(--bs-warning) !important; }

.alert-primary { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.alert-info    { background-color: var(--bs-info-bg-subtle, #D6F6FC); color: var(--bs-info-text-emphasis); }
.alert-warning { background-color: var(--bs-warning-bg-subtle, #FFF7D6); color: var(--bs-warning-text-emphasis, #8A6C00); }

.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
  border-color: rgba(var(--bs-info-rgb), .6);
}

/* 5) Example: keep your SVG arrow accent (optional) */
html[data-theme-color] .site-header.style-2 .nav > li.menu-item-has-children.active > a:after,
html[data-theme-color] .site-header.style-2 .nav > li.menu-item-has-children:hover > a:after,
html[data-theme-color] .site-header.style-2 .nav > li.sub-menu-down.active > a:after,
html[data-theme-color] .site-header.style-2 .nav > li.sub-menu-down:hover > a:after {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6 0L7.69706 4.30294L12 6L7.69706 7.69706L6 12L4.30294 7.69706L0 6L4.30294 4.30294L6 0Z' fill='%2300BDE0'/></svg>");
}

.site-footer,
.site-footer p,
.site-footer a,
.site-footer h2,
.site-footer h6,
.site-footer li,
.site-footer span {
  color: #fff !important;
}

.site-footer a:hover {
  color: #FFD200 !important; /* optional: yellow accent on hover */
}