/* ============================================================
   EVISION INFOSERVE — Design System Tokens (2026 revamp)
   Premium "Design & Rank" studio system.
   Two co-equal pillars, each with its own accent:
     · Design & Build  → Violet   (--pillar-design)
     · Rank & Grow/SEO → Amber     (--pillar-seo)
   Token NAMES are kept stable so every page (incl. generated
   service pages) inherits the new look automatically.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {

  /* ── BASE COLOR PALETTE ─────────────────────────────────── */
  /* "Navy" tokens re-tuned to a deep indigo-ink for a modern,
     high-contrast studio feel. */
  --color-navy-900:   #05070F;   /* deepest bg */
  --color-navy-800:   #0A0E1C;   /* primary dark bg (ink) */
  --color-navy-700:   #111730;   /* secondary dark bg */
  --color-navy-600:   #232B4A;   /* card/panel borders on dark */
  --color-navy-400:   #3B456E;   /* muted accent on dark */

  /* Primary accent = VIOLET (Design & Build pillar) — mapped onto
     the historical "blue" token slots so links/accents shift site-wide. */
  --color-blue-500:   #6D5EFB;   /* violet — primary accent */
  --color-blue-400:   #8B7DFF;   /* lighter violet, links */
  --color-blue-300:   #B7ADFF;   /* subtle violet on dark */

  /* Secondary accent = AMBER (Rank & Grow / SEO pillar) — kept in the
     historical "gold" slots. */
  --color-gold-500:   #F5B62B;   /* amber — SEO highlight */
  --color-gold-400:   #FFCF5C;   /* lighter amber */
  --color-gold-600:   #C98A00;   /* deeper amber, text on light */

  --color-orange-500: #FF6A3D;   /* coral — urgency / secondary CTA */
  --color-orange-400: #FF8A63;   /* hover state */
  --color-orange-600: #E5502A;   /* pressed state */

  --color-red-500:    #F0453D;   /* alert / danger */
  --color-red-400:    #F4655E;
  --color-red-100:    #FEECEB;   /* light red bg tint */

  --color-white:      #FFFFFF;
  --color-gray-50:    #F6F7FB;   /* subtle warm-cool off-white */
  --color-gray-100:   #EDEFF6;
  --color-gray-200:   #DDE1EC;
  --color-gray-400:   #8A92A8;
  --color-gray-600:   #545C74;
  --color-gray-800:   #1B2138;

  --color-green-500:  #16B364;   /* success / checkmarks */
  --color-green-100:  #D6F5E3;

  /* Extra accents for the redesign */
  --color-violet-500: #6D5EFB;
  --color-violet-100: #EEEBFF;
  --color-cyan-500:   #22C7E0;   /* subtle secondary tech accent */

  /* ── PILLAR SEMANTIC TOKENS ─────────────────────────────── */
  --pillar-design:      #6D5EFB;   /* violet  — Web Design & Development */
  --pillar-design-soft: #EEEBFF;
  --pillar-seo:         #F5B62B;   /* amber   — SEO & Growth */
  --pillar-seo-soft:    #FFF3D6;

  /* ── SEMANTIC COLOR TOKENS ──────────────────────────────── */

  /* Backgrounds */
  --bg-dark:          var(--color-navy-800);
  --bg-dark-secondary:var(--color-navy-700);
  --bg-light:         var(--color-white);
  --bg-subtle:        var(--color-gray-50);
  --bg-callout-gold:  var(--color-gold-500);
  --bg-callout-navy:  var(--color-navy-700);

  /* Foregrounds */
  --fg-on-dark:       var(--color-white);
  --fg-on-light:      #0A0E1C;
  --fg-muted-dark:    #AEB6CC;
  --fg-muted-light:   var(--color-gray-600);
  --fg-accent:        var(--color-blue-500);
  --fg-link:          var(--color-blue-400);
  --fg-danger:        var(--color-red-500);

  /* Borders */
  --border-dark:      var(--color-navy-600);
  --border-gold:      var(--color-gold-500);
  --border-light:     var(--color-gray-200);

  /* Buttons — primary now VIOLET */
  --btn-primary-bg:         var(--color-blue-500);
  --btn-primary-bg-hover:   var(--color-blue-400);
  --btn-primary-bg-press:   #5B4CE0;
  --btn-primary-fg:         var(--color-white);

  --btn-secondary-bg:       var(--color-gold-500);
  --btn-secondary-bg-hover: var(--color-gold-400);
  --btn-secondary-fg:       var(--color-navy-800);

  --btn-ghost-border:       var(--color-white);
  --btn-ghost-fg:           var(--color-white);
  --btn-ghost-bg-hover:     rgba(255,255,255,0.12);

  /* ── TYPOGRAPHY SCALE ───────────────────────────────────── */

  /* Font Families — modern studio pairing */
  --font-display:     'Space Grotesk', 'Segoe UI', sans-serif;
  --font-headline:    'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:        'Inter', 'Segoe UI', sans-serif;
  --font-mono:        'JetBrains Mono', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-hero:  84px;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Line Heights */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter Spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.16em;

  /* ── SEMANTIC TYPE ROLES ────────────────────────────────── */

  --type-hero-font:        var(--font-display);
  --type-hero-size:        var(--text-hero);
  --type-hero-weight:      var(--weight-bold);
  --type-hero-leading:     var(--leading-tight);
  --type-hero-tracking:    var(--tracking-tight);
  --type-hero-transform:   none;

  --type-h1-font:          var(--font-headline);
  --type-h1-size:          var(--text-4xl);
  --type-h1-weight:        var(--weight-bold);
  --type-h1-leading:       var(--leading-tight);
  --type-h1-tracking:      var(--tracking-tight);
  --type-h1-transform:     none;

  --type-h2-font:          var(--font-headline);
  --type-h2-size:          var(--text-3xl);
  --type-h2-weight:        var(--weight-bold);
  --type-h2-leading:       var(--leading-snug);
  --type-h2-transform:     none;

  --type-h3-font:          var(--font-headline);
  --type-h3-size:          var(--text-xl);
  --type-h3-weight:        var(--weight-semi);
  --type-h3-leading:       var(--leading-snug);

  --type-h4-font:          var(--font-body);
  --type-h4-size:          var(--text-lg);
  --type-h4-weight:        var(--weight-semi);
  --type-h4-leading:       var(--leading-normal);

  --type-p-font:           var(--font-body);
  --type-p-size:           var(--text-base);
  --type-p-weight:         var(--weight-regular);
  --type-p-leading:        var(--leading-relaxed);

  --type-small-font:       var(--font-body);
  --type-small-size:       var(--text-sm);
  --type-small-weight:     var(--weight-regular);
  --type-small-leading:    var(--leading-normal);

  --type-label-font:       var(--font-body);
  --type-label-size:       var(--text-xs);
  --type-label-weight:     var(--weight-semi);
  --type-label-tracking:   var(--tracking-wider);
  --type-label-transform:  uppercase;

  --type-code-font:        var(--font-mono);
  --type-code-size:        var(--text-sm);
  --type-code-weight:      var(--weight-regular);

  /* ── SPACING SCALE ──────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ── BORDER RADIUS ──────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ── SHADOWS (indigo-tinted, softer) ────────────────────── */
  --shadow-sm:  0 1px 3px rgba(16,20,45,0.06);
  --shadow-md:  0 8px 24px rgba(16,20,45,0.09);
  --shadow-lg:  0 20px 48px rgba(16,20,45,0.14);
  --shadow-card:0 6px 22px rgba(16,20,45,0.07);
  --shadow-glow-gold: 0 0 24px rgba(245,182,43,0.35);
  --shadow-glow-violet: 0 12px 40px rgba(109,94,251,0.30);

  /* ── EMAIL-SPECIFIC ─────────────────────────────────────── */
  --email-max-width:    600px;
  --email-padding-x:    28px;
  --email-section-py:   40px;
  --email-border-radius:var(--radius-lg);
}

/* ── UTILITY CLASSES ──────────────────────────────────────── */

.evision-hero {
  font-family: var(--type-hero-font);
  font-size: var(--type-hero-size);
  font-weight: var(--type-hero-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.evision-h1 {
  font-family: var(--type-h1-font);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.evision-h2 {
  font-family: var(--type-h2-font);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--leading-snug);
}

.evision-h3 {
  font-family: var(--type-h3-font);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--leading-snug);
}

.evision-body {
  font-family: var(--type-p-font);
  font-size: var(--type-p-size);
  font-weight: var(--type-p-weight);
  line-height: var(--leading-relaxed);
}

.evision-label {
  font-family: var(--type-label-font);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.evision-accent { color: var(--color-blue-500); }
.evision-danger { color: var(--color-red-500); }
.evision-muted  { color: var(--fg-muted-dark); }

.bg-dark    { background: var(--bg-dark); }
.bg-navy    { background: var(--bg-dark-secondary); }
.bg-gold    { background: var(--color-gold-500); color: var(--color-navy-800); }
.bg-orange  { background: var(--color-orange-500); color: #fff; }