/* ==========================================================================
   VivreFR Core Framework Stylesheet - Version 1.0.0
   Design Tokens & Core Styling Variables
   ========================================================================== */

:root {
  --vf-bg:               #f6f2ec;     /* Warm beige background */
  --vf-brand-beige:      #dcd6cc;     /* Warm brand neutral accent */
  --vf-surface:          #ffffff;     /* Card background */
  --vf-surface-soft:     #ece6de;     /* Muted background surface */
  --vf-navy:             #1c3281;     /* Primary brand color */
  --vf-navy-dark:        #14245c;     /* Hover state brand color */
  --vf-navy-deep:        #0c1a40;     /* Extra deep contrast text/titles */
  --vf-red-ui:           #c8321a;     /* Negative values / high cost */
  --vf-red-flag:         #e1000f;     /* Alert warnings */
  --vf-green-ui:         #16a34a;     /* Positive value / accessible cost */
  --vf-orange-ui:        #ea580c;     /* Moderate cost/comfort rating */
  --vf-ink:              #080f1e;     /* High contrast body text */
  --vf-muted:            #64748b;     /* Slate gray secondary text */
  --vf-espresso:         #6b5e4e;     /* Neutral secondary color */
  --vf-line:             rgba(0,0,0,0.08);  /* Soft borders */
  --vf-line-strong:      rgba(0,0,0,0.12);  /* High contrast borders */
  --vf-shadow:           0 10px 30px rgba(0,0,0,0.06);     /* Default clean box shadow */
  --vf-shadow-hover:     0 18px 50px rgba(28,50,129,0.10);  /* Soft navy glow on hover */
  --vf-hero-panel-start: rgba(28,50,129,0.96);             /* Gradient starting value */
  --vf-hero-panel-end:   rgba(20,36,92,0.98);               /* Gradient ending value */
  
  /* Border Radii */
  --vf-r-sm:             10px;
  --vf-r-md:             18px;
  --vf-r-lg:             26px;
  --vf-r-xl:             36px;
  
  /* Fonts */
  --vf-display:          "Plus Jakarta Sans", sans-serif;
  --vf-body:             "Plus Jakarta Sans", sans-serif;
}

/* Base Wrapper Fonts Integration */
.vf-framework-wrapper {
  font-family: var(--vf-body);
  color: var(--vf-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vf-framework-wrapper *,
.vf-framework-wrapper *::before,
.vf-framework-wrapper *::after {
  box-sizing: border-box;
}

/* ----------------------
   VivreFR Master Layout Wrapper (pp- styles)
---------------------- */
.pp-page-wrapper {
    box-sizing: border-box;
}

.pp-page-wrapper *, 
.pp-page-wrapper *::before, 
.pp-page-wrapper *::after { 
    box-sizing: border-box;
}

.pp-container { 
    max-width: 900px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

.pp-hero { 
    text-align: center; 
    margin-bottom: 50px; 
}

.pp-main-title { 
    font-family: var(--vf-display); 
    color: var(--vf-navy); 
    font-size: clamp(2.5rem, 5vw, 3.5rem); 
    font-weight: 500; 
    margin-bottom: 15px; 
    line-height: 1.15; 
    letter-spacing: -0.02em; 
}

.pp-meta { 
    color: var(--vf-muted); 
    font-size: 1rem; 
    display: flex; 
    justify-content: center; 
    gap: 12px; 
    align-items: center; 
    font-weight: 500;
}

.pp-brand { 
    color: var(--vf-red-ui); 
    font-weight: 700; 
}

.pp-divider { 
    color: var(--vf-line); 
}

.pp-card { 
    background: var(--vf-surface); 
    border: 1px solid var(--vf-line); 
    border-radius: var(--vf-r-lg); 
    padding: 50px; 
    box-shadow: var(--vf-shadow); 
    transition: box-shadow 0.3s ease;
}

.pp-card:hover {
    box-shadow: var(--vf-shadow-hover);
}

.pp-intro { 
    font-size: 1.05rem; 
    margin-bottom: 40px; 
    color: var(--vf-ink); 
    line-height: 1.6;
}