/* ============================================================
   BHOOMIVISTA DESIGN SYSTEM — CORE v7.2
   ------------------------------------------------------------
   Purpose:
     Universal foundation for BhoomiVista’s design language.
     Powers all theme families (Spark, Light, Echo, Terra, Freedom, Nature).
   ============================================================ */


/* ============================================================
   [1] FOUNDATION TOKENS (:root)
   ============================================================ */
:root {
  /* === Base Colors === */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bg-light: #F7F1EA;   /* Alpine beige */
  --color-bg-dark: #0F0F0F;
  --color-text-main: #2B2B2B;
  --color-text-invert: #F7F1EA;

  /* === Brand Core === */
  --brand-primary:   #B45F4B;  /* Spark copper */
  --brand-highlight: #D7B67A;  /* Golden tone */
  --brand-accent:    #2A5250;  /* Deep teal */
  --brand-success:   #7EB3E6;  /* Echo light blue */
  --brand-warning:   #DCA85C;
  --brand-error:     #C44A4A;
  --brand-neutral:   #8B857C;
  --brand-info:      #7AA9D6;

  /* === Extended Tokens (for future themes) === */
  --brand-secondary: #A17B4F;
  --brand-tertiary:  #62837A;
  --color-bg-accent: #FBF8F3;
  --color-bg-alt:    #EDEAE4;

  /* === Typography === */
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Lato', sans-serif;
  --font-alt:     'Inter', system-ui, sans-serif;

  /* Fluid Type Scale */
  --font-scale-xxl: clamp(2.8rem, 5vw, 3.4rem);
  --font-scale-xl:  clamp(2rem, 3vw, 2.4rem);
  --font-scale-lg:  clamp(1.5rem, 2vw, 1.8rem);
  --font-scale-md:  1.125rem;

  /* === Layout & Radius === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --container-max: 1200px;
  --space-unit: 20px;

  /* === Shadows & Depth === */
  --shadow-soft:   0 2px 6px  rgba(0,0,0,0.05);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-strong: 0 8px 24px rgba(0,0,0,0.15);

  /* === Motion Timing === */
  --motion-fast:   0.3s ease;
  --motion-medium: 0.6s ease;
  --motion-slow:   1.2s ease;
  --motion-snap:   cubic-bezier(0.33, 1, 0.68, 1);

  /* === Accessibility === */
  --a11y-focus-outline: 2px solid var(--brand-highlight);
  --a11y-focus-offset: 3px;

  /* === Responsive Breakpoints === */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  
  /* Nature — Calm Green Earth */

  --nature-base:   #3C8C5A;
  --nature-hover:  #52A36F;
  --nature-glow:   rgba(60,140,90,0.25);
  --nature-bg-tint:rgba(60,140,90,0.06);


}

/* ============================================================
   [2] THEME FAMILY VARIABLES
   ============================================================ */

/* Spark — Warm Fire */
:root {
  --spark-base:    var(--brand-primary);
  --spark-light:   var(--brand-highlight);
  --spark-glow:    rgba(180,95,75,0.25);
  --spark-bg-tint: rgba(180,95,75,0.06);

  /* Button state tokens */
  --spark-hover:   var(--brand-highlight); /* warm golden hover */
  --spark-active:  color-mix(in srgb, var(--spark-base) 85%, black 15%);
  --spark-focus:   var(--brand-highlight);
  --spark-disabled: color-mix(in srgb, var(--spark-base) 60%, #ccc 40%);
}

/* Light — Golden Sun */
:root {
  --light-base:    var(--brand-highlight);
  --light-light:   #FFF7E1;
  --light-glow:    rgba(215,182,122,0.25);
  --light-bg-tint: rgba(215,182,122,0.07);

  /* Button state tokens */
  --light-hover:   color-mix(in srgb, var(--light-base) 80%, #000 10%); /* darker yellow hover */
  --light-active:  color-mix(in srgb, var(--light-base) 70%, #000 20%);
  --light-focus:   var(--light-hover);
  --light-disabled: color-mix(in srgb, var(--light-base) 60%, #ccc 40%);
}

/* Echo — Deep Blue / Sea Reflection */
:root {
  --echo-base:     #315E8C;
  --echo-light:    var(--brand-success);
  --echo-glow:     rgba(49,94,140,0.25);
  --echo-bg-tint:  rgba(49,94,140,0.06);

  /* Button state tokens */
  --echo-hover:   color-mix(in srgb, var(--echo-base) 80%, #fff 20%);
  --echo-active:  color-mix(in srgb, var(--echo-base) 90%, #000 10%);
  --echo-focus:   var(--echo-hover);
  --echo-disabled: color-mix(in srgb, var(--echo-base) 60%, #ccc 40%);
}

/* Freedom — Calm Teal Earth */
:root {
  --freedom-base:    #2A5250;
  --freedom-light:   #4C7F78;
  --freedom-glow:    rgba(42,82,80,0.25);
  --freedom-bg-tint: rgba(42,82,80,0.06);

  /* Button state tokens */
  --freedom-hover:   color-mix(in srgb, var(--freedom-base) 80%, var(--brand-highlight) 20%); /* warmer hover */
  --freedom-active:  color-mix(in srgb, var(--freedom-base) 85%, black 15%);
  --freedom-focus:   var(--freedom-hover);
  --freedom-disabled: color-mix(in srgb, var(--freedom-base) 60%, #ccc 40%);
}

/* Terra — Warm Neutral */
:root {
  --earth-base: #EFE5DA;
  --earth-edge: #DBC8B7;
  --earth-ink:  #3B332C;
  --mist-base:  #F4F6F8;
  --mist-edge:  #E8ECF0;
  --mist-ink:   #2E3237;
  --night-base: #101214;
  --night-edge: #171A1D;
  --night-ink:  #EDEFF2;
  --terra-accent:   #B45F4B;
  --terra-accent-2: #D7B67A;
  --terra-accent-3: #2A5250;

  /* Button state tokens */
  --terra-hover:   color-mix(in srgb, var(--terra-accent) 85%, #fff 15%);
  --terra-active:  color-mix(in srgb, var(--terra-accent) 85%, black 15%);
  --terra-focus:   var(--terra-hover);
  --terra-disabled: color-mix(in srgb, var(--terra-accent) 60%, #ccc 40%);
}

/* BV Default (global copper) */
:root {
  --bv-base:    var(--brand-primary);
  --bv-hover:   var(--brand-highlight); /* golden hover */
  --bv-active:  color-mix(in srgb, var(--brand-primary) 90%, black 10%);
  --bv-focus:   var(--brand-highlight);
  --bv-disabled: color-mix(in srgb, var(--brand-primary) 60%, #aaa 40%);
}

/* Nature — Green Earth (Future Theme) */
:root {
  --nature-base:    #2F8C4B;
  --nature-light:   #3CA35A;
  --nature-glow:    rgba(47,140,75,0.25);
  --nature-bg-tint: rgba(47,140,75,0.07);

  /* Button state tokens */
  --nature-hover:   color-mix(in srgb, var(--nature-base) 80%, #fff 15%);
  --nature-active:  color-mix(in srgb, var(--nature-base) 85%, black 15%);
  --nature-focus:   var(--nature-hover);
  --nature-disabled: color-mix(in srgb, var(--nature-base) 60%, #ccc 40%);
}


/* ============================================================
   [2A] BUTTON SYSTEM CORE FRAMEWORK — Motion & Focus Tokens
   ============================================================ */
:root {
  --btn-transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
  --btn-hover-translate: -2px;
  --btn-active-translate: 0;
  --btn-focus-outline-width: 2px;
  --btn-focus-outline-style: solid;
}


/* ============================================================
   [3] SITE MODES (LIGHT / DARK)
   ============================================================ */
body.bv-theme-light {
  --surface-bg: var(--color-bg-light);
  --surface-text: var(--color-text-main);
}
body.bv-theme-dark {
  --surface-bg: var(--color-bg-dark);
  --surface-text: var(--color-text-invert);
}


/* ============================================================
   [4] TYPOGRAPHY BASE
   ============================================================ */
.bv-site,
.editor-styles-wrapper {
  font-family: var(--font-body);
  color: var(--surface-text, var(--color-text-main));
  background: var(--surface-bg, var(--color-bg-light));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bv-site h1, .bv-site h2, .bv-site h3, .bv-site h4, .bv-site h5, .bv-site h6,
.editor-styles-wrapper h1, .editor-styles-wrapper h2,
.editor-styles-wrapper h3, .editor-styles-wrapper h4,
.editor-styles-wrapper h5, .editor-styles-wrapper h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-primary);
}

/* Fluid headings */
.bv-site h1.bv-fluid, .editor-styles-wrapper h1.bv-fluid { font-size: var(--font-scale-xxl); }
.bv-site h2.bv-fluid, .editor-styles-wrapper h2.bv-fluid { font-size: var(--font-scale-xl); }
.bv-site h3.bv-fluid, .editor-styles-wrapper h3.bv-fluid { font-size: var(--font-scale-lg); }

/* Paragraphs */
.bv-site p, .bv-site li,
.editor-styles-wrapper p, .editor-styles-wrapper li {
  font-size: 1rem;
  font-family: var(--font-body);
  margin-bottom: 1em;
  line-height: 1.75;
}

/* Accessibility: readable zoom scaling */
html { font-size: 100%; }
@media (max-width: 480px) {
  html { font-size: 95%; }
}


/* ============================================================
   [5] LAYOUT & RADIUS
   ============================================================ */
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;

  /* Standardized button size tokens — Action 2 */
  --btn-font-sm: 0.85rem;
  --btn-font-md: 1rem;
  --btn-font-lg: 1.125rem;
  --btn-pad-sm: 0.5rem 1rem;
  --btn-pad-md: 0.75rem 1.5rem;
  --btn-pad-lg: 1rem 2rem;
  --btn-radius-sm: 0.25rem;
  --btn-radius-md: 0.4rem;
  --btn-radius-lg: 0.6rem;
}

.bv-site .container,
.bv-site .elementor-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-unit);
}

/* Responsive section padding */
.bv-site section, .bv-site .elementor-section {
  padding: clamp(50px, 8vw, 80px) 0 clamp(40px, 6vw, 60px);
}

/* iOS Safe area */
body {
  padding-bottom: env(safe-area-inset-bottom);
}


/* ============================================================
   [6] DEPTH & MOTION TOKENS
   ============================================================ */
:root {
  --shadow-soft:   0 2px 6px  rgba(0,0,0,0.05);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-strong: 0 8px 24px rgba(0,0,0,0.15);
  --motion-fast:   0.3s ease;
  --motion-medium: 0.6s ease;
  --motion-slow:   1.2s ease;
  --motion-snap:   cubic-bezier(0.33, 1, 0.68, 1);
}


/* ============================================================
   [7] GLOBAL HELPERS & RESPONSIVE UTILITIES
   ============================================================ */
.bv-site { --_scope: 1; }
.editor-styles-wrapper { --_scope: 1; }

/* Focus & Accessibility */
:focus-visible {
  outline: var(--a11y-focus-outline);
  outline-offset: var(--a11y-focus-offset);
}

/* Touch & Motion Optimization */
a, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Hover guards (no hover on touch devices) */
@media (hover: hover) {
  .hover-lift:hover { transform: translateY(-4px); }
}

/* Background tone helpers */
.bv-bg-surface-dark  { background: var(--color-bg-dark);  color: var(--color-white); }
.bv-bg-surface-light { background: var(--color-bg-light); color: var(--color-text-main); }

/* Container Queries (Future-Ready) */
@container (min-width: 700px) {
  .bv-responsive-text { font-size: 1.2em; }
}

/* Responsive typography overrides */
@media (max-width: 992px) {
  .bv-site h1, .editor-styles-wrapper h1 { font-size: 2rem; }
  .bv-site h2, .editor-styles-wrapper h2 { font-size: 1.75rem; }
  .bv-site h3, .editor-styles-wrapper h3 { font-size: 1.4rem; }
}
@media (max-width: 480px) {
  .bv-site h1, .editor-styles-wrapper h1 { font-size: 1.7rem; }
  .bv-site p, .editor-styles-wrapper p { font-size: 0.95rem; }
}

/* WP Core Variable Sync */
:root {
  --wp--preset--color--primary:    var(--brand-primary);
  --wp--preset--color--secondary:  var(--brand-accent);
  --wp--preset--color--foreground: var(--color-text-main);
  --wp--preset--color--background: var(--color-bg-light);
  --wp--preset--color--contrast:   var(--color-white);
}


/* ============================================================
   END OF FILE — core.css v7.2
   Next: motion.css → keyframes & animation utilities
   ============================================================ */