/* ============================================================
   ProxyN.ai — v2 "Warm Earth" theme override
   Loaded AFTER styles.css on /v2/ only.
   Content is untouched — this file re-skins the palette and type
   from the blue/tech system to the warm earth (ink → brass → ivory)
   system. Only design changes here.
   ============================================================ */

:root {
    /* Grounds */
    --bg-primary:    #1C1C1A;   /* ink */
    --bg-secondary:  #211F1B;
    --bg-card:       #2A2723;   /* graphite */
    --bg-card-hover: #36312A;
    --bg-surface:    #252220;

    /* Type — lifted for legibility on warm dark grounds */
    --text-primary:   #F7F3EA;  /* ivory */
    --text-secondary: #DBD3C5;  /* body copy on dark — was too dim */
    --text-muted:     #B7AD99;  /* labels/de-emphasised — was too dim */

    /* Accents (mapped onto warm earth) */
    --accent-blue:        #B68A3A;  /* brass — primary accent */
    --accent-blue-light:  #F1BF6A;  /* brass light */
    --accent-blue-glow:   rgba(241, 191, 106, 0.18);
    --accent-cyan:        #F1BF6A;  /* gold (was cyan) */
    --accent-green:       #93AC5E;  /* warm olive — positive */
    --accent-red:         #C0682E;  /* burnt orange — negative */
    --accent-purple:      #A66A3F;  /* terracotta */
    --accent-orange:      #B05A24;  /* brand orange */

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #F1BF6A 0%, #B68A3A 50%, #A66A3F 100%);
    --gradient-hero:    linear-gradient(135deg, #F1BF6A 0%, #B68A3A 100%);
    --gradient-subtle:  linear-gradient(135deg, rgba(241,191,106,0.12) 0%, rgba(166,106,63,0.10) 100%);

    /* Lines & shadows */
    --border-color: rgba(247, 243, 234, 0.10);
    --border-hover: rgba(247, 243, 234, 0.22);

    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.42);
    --shadow-glow: 0 0 40px rgba(241, 191, 106, 0.12);

    /* Fonts — Open Sans everywhere (mono aliased to the same family) */
    --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Belt-and-braces: anything that hardcoded a non-Open-Sans family */
body, button, input, select, textarea { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
.v-quote-mark { font-family: var(--font-sans); }

/* Slightly warmer heading rhythm for Open Sans */
h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* ---- Buttons ---- */
.btn-primary { color: #422C00; box-shadow: 0 4px 20px rgba(182, 138, 58, 0.32); }
.btn-primary:hover { box-shadow: 0 8px 30px rgba(182, 138, 58, 0.45); }

/* ---- Nav ---- */
.nav.scrolled { background: rgba(28, 28, 26, 0.92); }
.nav-cta { color: #422C00; }

/* ---- Hero ---- */
.hero-bg-grid {
    background-image:
        linear-gradient(rgba(241, 191, 106, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241, 191, 106, 0.04) 1px, transparent 1px);
}
.hero::before { background: radial-gradient(circle, rgba(241, 191, 106, 0.08) 0%, transparent 70%); }
.hero-orb-1 { background: radial-gradient(circle, #F1BF6A 0%, transparent 70%); }
.hero-orb-2 { background: radial-gradient(circle, #A66A3F 0%, transparent 70%); }
.hero-orb-3 { background: radial-gradient(circle, #B05A24 0%, transparent 70%); }

.hero-badge {
    background: rgba(241, 191, 106, 0.08);
    border-color: rgba(241, 191, 106, 0.24);
}
.hero-badge-dot { box-shadow: 0 0 12px rgba(241, 191, 106, 0.8); }

/* ---- Commitment card ---- */
.commitment-card {
    background: linear-gradient(180deg, rgba(42, 39, 35, 0.94) 0%, rgba(33, 31, 27, 0.94) 100%);
    border-color: rgba(247, 243, 234, 0.14);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(241, 191, 106, 0.10) inset;
}
.commitment-card-glow { background: radial-gradient(ellipse at center, rgba(241, 191, 106, 0.22) 0%, transparent 60%); }
.commitment-card-header { border-bottom-color: rgba(247, 243, 234, 0.10); }
.commitment-card-process {
    background: linear-gradient(135deg, rgba(241, 191, 106, 0.18) 0%, rgba(166, 106, 63, 0.18) 100%);
    border-color: rgba(241, 191, 106, 0.35);
    box-shadow: 0 0 20px rgba(241, 191, 106, 0.15);
}
.commitment-card-status {
    background: rgba(147, 172, 94, 0.12);
    border-color: rgba(147, 172, 94, 0.30);
}
.commitment-status-dot { box-shadow: 0 0 8px rgba(147, 172, 94, 0.9); }
.commitment-kpi-from { text-decoration-color: rgba(155, 142, 121, 0.6); }
.commitment-kpi-bar { box-shadow: 0 0 14px rgba(241, 191, 106, 0.55); }
.commitment-dot { background: rgba(247, 243, 234, 0.20); }
.commitment-dot-active { box-shadow: 0 0 10px rgba(241, 191, 106, 0.6); }

/* ---- Problem ---- */
.problem-icon-red   { background: rgba(192, 104, 46, 0.16); }
.problem-icon-green { background: rgba(147, 172, 94, 0.16); }
.problem-card-fail {
    background: rgba(192, 104, 46, 0.04);
    border-color: rgba(192, 104, 46, 0.16);
}
.problem-card-success {
    background: rgba(241, 191, 106, 0.04);
    border-color: rgba(241, 191, 106, 0.18);
}

/* ---- ASaaS ---- */
.asaas::before { background: radial-gradient(circle, rgba(166, 106, 63, 0.07) 0%, transparent 70%); }
.asaas-content h2 {
    background: linear-gradient(135deg, #F1BF6A 0%, #B68A3A 50%, #A66A3F 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.asaas-col-old {
    background: rgba(192, 104, 46, 0.04);
    border-color: rgba(192, 104, 46, 0.13);
}
.asaas-col-new {
    background: rgba(241, 191, 106, 0.06);
    border-color: rgba(241, 191, 106, 0.22);
    box-shadow: 0 0 40px rgba(241, 191, 106, 0.08);
}

/* ---- Blueprint ---- */
.blueprint-step-studio {
    background: linear-gradient(135deg, rgba(176, 90, 36, 0.07) 0%, rgba(166, 106, 63, 0.07) 100%);
    border-color: rgba(176, 90, 36, 0.22);
}
.blueprint-step-yours {
    background: linear-gradient(135deg, rgba(241, 191, 106, 0.07) 0%, rgba(182, 138, 58, 0.07) 100%);
    border-color: rgba(241, 191, 106, 0.22);
}
.blueprint-platforms-strip span {
    background: rgba(241, 191, 106, 0.10);
    border-color: rgba(241, 191, 106, 0.18);
}

/* ---- Why-us icons ---- */
.why-card-icon {
    background: rgba(241, 191, 106, 0.10);
    border-color: rgba(241, 191, 106, 0.18);
}

/* ---- Solutions / roles ---- */
.role-persona-tag { background: rgba(241, 191, 106, 0.10); }
.agent-dot { box-shadow: 0 0 8px rgba(147, 172, 94, 0.5); }

/* ---- Voice ---- */
.voice-bg-glow { background: radial-gradient(ellipse at center, rgba(241, 191, 106, 0.08) 0%, rgba(166, 106, 63, 0.05) 40%, transparent 70%); }
.voice-tag { background: rgba(241, 191, 106, 0.12); }
.voice-surface:hover {
    border-color: rgba(241, 191, 106, 0.32);
    box-shadow: 0 0 40px rgba(241, 191, 106, 0.10);
}
.voice-surface-embed:hover {
    border-color: rgba(166, 106, 63, 0.34);
    box-shadow: 0 0 40px rgba(166, 106, 63, 0.10);
}
.voice-check { background: rgba(241, 191, 106, 0.12); }
.voice-surface-embed .voice-check { background: rgba(166, 106, 63, 0.14); }
.voice-demo-dot-red   { box-shadow: 0 0 12px rgba(192, 104, 46, 0.5); }
.voice-demo-dot-green { box-shadow: 0 0 12px rgba(147, 172, 94, 0.5); }
.voice-callout {
    background: linear-gradient(135deg, rgba(241, 191, 106, 0.06) 0%, rgba(166, 106, 63, 0.06) 100%);
    border-color: rgba(241, 191, 106, 0.16);
}
.voice-callout-eyebrow {
    background: rgba(241, 191, 106, 0.08);
    border-color: rgba(241, 191, 106, 0.20);
}

/* ---- Platforms ---- */
.platform-badge {
    background: rgba(241, 191, 106, 0.10);
    border-color: rgba(241, 191, 106, 0.20);
}
.platform-badge-flagship {
    background: rgba(176, 90, 36, 0.12);
    border-color: rgba(176, 90, 36, 0.22);
}

/* ---- Locations / misc ---- */
.location-card-highlight {
    background: rgba(241, 191, 106, 0.05);
    border-color: rgba(241, 191, 106, 0.16);
}
.blog-card-type { background: rgba(182, 138, 58, 0.16); }

/* Mobile nav backdrop */
@media (max-width: 900px) {
    .nav-links { background: rgba(28, 28, 26, 0.98); }
}

/* ---- About / vision page extras (kept consistent) ---- */
.v-stream-icon { background: linear-gradient(135deg, rgba(241,191,106,0.16), rgba(166,106,63,0.10)); }
.about-hero-bg {
    background-image:
        linear-gradient(rgba(241, 191, 106, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241, 191, 106, 0.04) 1px, transparent 1px);
}
/* Brass icon tint inside paper bands so it reads on the light ground */
.ab-band-alt .v-stream-icon { background: linear-gradient(135deg, rgba(182,138,58,0.16), rgba(166,106,63,0.10)); }
.v-cta-bg { background: linear-gradient(135deg, #1C1C1A 0%, #211F1B 30%, rgba(241,191,106,0.08) 60%, rgba(166,106,63,0.08) 100%); }
.v-cta-bg::before { background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(241,191,106,0.15), transparent 70%); }


/* ============================================================
   ALTERNATING SECTIONS — ink (dark) <-> paper (light)
   The reference design contrasts dark and light sections.
   Dark sections keep the default :root palette. The sections
   below are re-scoped to a paper/ink palette, which cascades
   to every card, text run, border, badge and gradient inside
   them via the CSS custom properties — no markup changes.

   Rhythm:
     hero      DARK
     problem   LIGHT
     asaas     DARK
     blueprint LIGHT
     voice     DARK
     why-us    LIGHT
     solutions DARK
     platforms LIGHT
     process   DARK
     results   LIGHT
     locations DARK
     contact   LIGHT
     footer    DARK
   ============================================================ */
.problem,
.blueprint,
.why-us,
.platforms,
.results,
.contact,
.ab-band-alt {
    /* Grounds */
    --bg-primary:    #F3EDE1;
    --bg-secondary:  #EBE4D6;
    --bg-card:       #FFFDF8;
    --bg-card-hover: #FBF5EA;
    --bg-surface:    #FFFFFF;

    /* Type on paper — darkened so muted labels still pass contrast */
    --text-primary:   #1C1C1A;
    --text-secondary: #524A3B;
    --text-muted:     #6B6353;

    /* Accents tuned for contrast on paper */
    --accent-blue:        #B68A3A;
    --accent-blue-light:  #A9772E;
    --accent-blue-glow:   rgba(182, 138, 58, 0.14);
    --accent-cyan:        #A9772E;
    --accent-green:       #6B8E3C;
    --accent-red:         #B05A24;
    --accent-purple:      #A66A3F;
    --accent-orange:      #A85420;

    /* Darker gradients so clipped text reads on paper */
    --gradient-primary: linear-gradient(135deg, #B68A3A 0%, #A9772E 45%, #A66A3F 100%);
    --gradient-hero:    linear-gradient(135deg, #B68A3A 0%, #A66A3F 100%);
    --gradient-subtle:  linear-gradient(135deg, rgba(182,138,58,0.10) 0%, rgba(166,106,63,0.08) 100%);

    /* Lines & lift */
    --border-color: rgba(28, 28, 26, 0.10);
    --border-hover: rgba(28, 28, 26, 0.22);
    --shadow-card: 0 22px 50px -34px rgba(28, 28, 26, 0.45);
    --shadow-glow: 0 24px 60px -40px rgba(182, 138, 58, 0.55);

    background: #F3EDE1;
    color: var(--text-primary);
    border-color: rgba(28, 28, 26, 0.08);
}

/* Lift the white cards off the paper ground */
.problem .problem-card,
.blueprint .blueprint-step,
.why-us .why-card,
.platforms .platform-card,
.results .result-card,
.contact .contact-form-wrapper,
.ab-band-alt .ab-stat,
.ab-band-alt .ab-intel-stage,
.ab-band-alt .v-stream,
.ab-band-alt .ab-step,
.ab-band-alt .ab-trust-item,
.ab-band-alt .v-belief-card,
.ab-band-alt .location-card {
    box-shadow: var(--shadow-card);
}

/* Cards that paint their own tinted background — repaint for paper */
.problem .problem-card-fail {
    background: linear-gradient(0deg, rgba(176, 90, 36, 0.05), rgba(176, 90, 36, 0.05)), #FFFDF8;
    border-color: rgba(176, 90, 36, 0.28);
}
.problem .problem-card-success {
    background: linear-gradient(0deg, rgba(182, 138, 58, 0.06), rgba(182, 138, 58, 0.06)), #FFFDF8;
    border-color: rgba(182, 138, 58, 0.34);
}
.problem .problem-icon-red   { background: rgba(176, 90, 36, 0.14); }
.problem .problem-icon-green { background: rgba(143, 168, 91, 0.20); }

.blueprint .blueprint-step-studio {
    background: linear-gradient(0deg, rgba(176, 90, 36, 0.05), rgba(176, 90, 36, 0.05)), #FFFDF8;
    border-color: rgba(176, 90, 36, 0.28);
}
.blueprint .blueprint-step-yours {
    background: linear-gradient(0deg, rgba(182, 138, 58, 0.06), rgba(182, 138, 58, 0.06)), #FFFDF8;
    border-color: rgba(182, 138, 58, 0.34);
}
.blueprint .blueprint-platforms-strip span {
    background: rgba(182, 138, 58, 0.12);
    border-color: rgba(182, 138, 58, 0.28);
}

.why-us .why-card-icon { background: rgba(182, 138, 58, 0.14); }

.platforms .platform-badge {
    background: rgba(182, 138, 58, 0.14);
    border-color: rgba(182, 138, 58, 0.30);
}
.platforms .platform-badge-flagship {
    background: rgba(176, 90, 36, 0.14);
    border-color: rgba(176, 90, 36, 0.30);
}

/* Contact form on paper */
.contact .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A9772E' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Client logo wordmarks read darker on paper */
.results .client-logo { color: #5C5446; opacity: 0.55; }
.results .client-logo:hover { opacity: 0.9; }


/* ============================================================
   LEGIBILITY REINFORCEMENTS
   Senior-design pass on the spots that read too faint in the
   warm palette. Keeps the intended hierarchy (de-emphasised
   comparison columns) while clearing the contrast floor.
   ============================================================ */

/* ASaaS comparison (dark): readable "old" columns, dominant "new" */
.asaas-col-old h4,
.asaas-col-old li { color: #C6BCA8; }
.asaas-col-new li { color: var(--text-primary); }

/* Mono-style labels are now Open Sans — keep the spaced-caps look crisp
   and ensure they clear contrast on tinted cards */
.commitment-card-eyebrow,
.voice-demo-label,
.voice-surface-label,
.voice-callout-eyebrow,
.results-logos-label,
.process-duration { color: var(--text-muted); font-weight: 600; }

/* Italic pull-quotes across sections sit at body-contrast, not muted */
.asaas-quote p,
.blueprint-bottom-quote p,
.role-quote p { color: var(--text-secondary); }

