/* --- load your font into the checkout context --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

/* =======================================================
   LAYER 1 — PALETTES (base tokens)
   Override on :root so the entire overlay picks them up
   ======================================================= */
:root {
  /* your brand */
  --brand-primary: #0D1321;  /* navy */
  --brand-secondary: #3E5C76;/* blue-grey */
  --brand-accent: #F0EBD8;   /* light cream */
  --brand-text: #1D2D44;     /* dark slate */
  --brand-white: #FFFFFF;

  /* map to Freemius’ palettes */
  /* neutrals drive text/background/borders */
  --fs-ds-neutral-10:  #F7F5EF;   /* ultra light background */
  --fs-ds-neutral-100: #F0EBD8;   /* = accent */
  --fs-ds-neutral-200: #E0DBC9;
  --fs-ds-neutral-300: #C9C4B4;
  --fs-ds-neutral-400: #A9A596;
  --fs-ds-neutral-500: #7C8799;   /* mid grey (slightly tinted) */
  --fs-ds-neutral-600: #5C7088;
  --fs-ds-neutral-700: #3E5C76;   /* = secondary (used for borders/links) */
  --fs-ds-neutral-800: #1D2D44;   /* = text */
  --fs-ds-neutral-900: #0D1321;   /* = primary (deep) */

  /* “freemius/blue” brand slots — we repurpose to your colors */
  --fs-ds-freemius-500: var(--brand-secondary);
  --fs-ds-blue-500:     var(--brand-secondary);

  /* semantic colors (keep contrast similar to defaults) */
  --fs-ds-green-500: #22A06B;
  --fs-ds-yellow-500:#F2A900;
  --fs-ds-red-500:   #D64545;

  /* white scale */
  --fs-ds-white-0:   var(--brand-white);
}

/* =======================================================
   LAYER 2 — THEMES (component-level tokens)
   Change “what feels primary/hover/text” across components
   ======================================================= */
:root {
  /* primary action color (buttons, active states) */
  --fs-ds-theme-primary-accent-color:        var(--brand-secondary);
  --fs-ds-theme-primary-accent-color-hover:  #2E4860; /* darker secondary */

  /* text + headings */
  --fs-ds-theme-text-color:                  var(--brand-text);
  --fs-ds-theme-heading-color:               var(--brand-primary);

  /* backgrounds & surfaces */
  --fs-ds-theme-page-bg-color:               var(--fs-ds-white-0);
  --fs-ds-theme-panel-bg-color:              var(--fs-ds-white-0);

  /* borders, dividers, subtle strokes */
  --fs-ds-theme-border-color:                var(--fs-ds-neutral-200);
  --fs-ds-theme-separator-color:             var(--fs-ds-neutral-200);

  /* links */
  --fs-ds-theme-link-color:                  var(--brand-secondary);
  --fs-ds-theme-link-color-hover:            #2E4860;

  /* inputs */
  --fs-ds-theme-input-bg-color:              var(--fs-ds-white-0);
  --fs-ds-theme-input-text-color:            var(--brand-text);
  --fs-ds-theme-input-border-color:          var(--brand-secondary);
  --fs-ds-theme-input-placeholder-color:     var(--fs-ds-neutral-600);
}

/* =======================================================
   TYPOGRAPHY & APPEARANCE (optional but nice)
   ======================================================= */
:root {
  --fs-ds-typography-font-family: "Cormorant Garamond", serif;
  --fs-ds-typography-heading-font-weight: 600;
  --fs-ds-typography-body-font-weight: 400;
  
  
  /* base font for body/text */
  --fs-ds-typography-font-base: "Cormorant Garamond", serif;

  /* headings (optional, if you want same family everywhere) */
  --fs-ds-typography-font-heading: "Cormorant Garamond", serif;

  /* radius / elevation / spacing */
  --fs-ds-appearance-border-radius: 8px;
  --fs-ds-appearance-input-border-radius: 6px;
  --fs-ds-appearance-button-border-radius: 8px;
}

/* =======================================================
   LIGHT TOUCH COMPONENT TWEAKS (no heavy overrides)
   Only a couple of rules to ensure the tokens show well
   ======================================================= */
.fs-checkout .fs-btn-primary {
  border: 0;
}

.fs-checkout .fs-btn-secondary {
  background: transparent;
  border: 2px solid var(--brand-secondary);
  color: var(--brand-secondary);
}

/* optional: make labels a touch bolder & primary-colored */
.fs-checkout .fs-input-container__label,
.fs-checkout .fs-input-container__label-text {
  color: var(--brand-primary);
  font-weight: 600;
}

/* focus rings consistent with your blue-grey */
.fs-checkout input:focus,
.fs-checkout select:focus,
.fs-checkout textarea:focus {
  box-shadow: 0 0 0 3px rgba(62, 92, 118, 0.2);
  outline: none;
}

/* valid icon tint */
.fs-checkout .fs-input-container__valid-icon .fs-svg--icon {
  fill: var(--brand-secondary);
}

/* =======================================================
   SDK-EMBEDDED CHECKOUT (inside WP dashboard)
   Scope theme tokens only when loaded in dashboard mode
   ======================================================= */
.dashboard-mode {
  --fs-ds-theme-primary-accent-color:       var(--brand-secondary);
  --fs-ds-theme-primary-accent-color-hover: #2E4860;
}