/*
 Theme Name:   Astra Child - CyberException
 Theme URI:    https://cyberexception.com
 Description:  Child theme of Astra for CyberException. Includes light/dark theme design tokens and fonts.
 Author:       CyberException
 Template:     astra
 Version:      1.8.0
 Text Domain:  astra-child
*/

/* ============================================
   CYBEREXCEPTION — GLOBAL SETUP (with Light/Dark theme support)
   Paste this into: Astra → Customize → Additional CSS
   (or your astra-child style.css)
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---------- DARK THEME (default) ---------- */
:root,
html[data-theme="dark"] {
  --ce-bg: #0B0D10;
  --ce-bg-alt: #0D0F13;
  --ce-bg-footer: #080A0D;
  --ce-bg-card: #0F1318;
  --ce-avatar-bg: #161B22;
  --ce-border: #1A1F28;
  --ce-border-soft: #141820;
  --ce-heading: #F0EEE8;
  --ce-text: #EDEBE5;
  --ce-text-muted: #5C6370;
  --ce-text-dim: #6D7380;
  --ce-text-faint: #4A5060;
  --ce-text-faint2: #3A4050;
  --ce-text-faint3: #2A3040;
  --ce-text-faint4: #1E2330;
  --ce-accent: #2AE87A;
  --ce-accent-ink: #0B0D10;
  --ce-body: #B9BFCC;
}

/* ---------- LIGHT THEME ---------- */
html[data-theme="light"] {
  --ce-bg: #FFFFFF;
  --ce-bg-alt: #F5F6F8;
  --ce-bg-footer: #EEF0F3;
  --ce-bg-card: #F7F8FA;
  --ce-avatar-bg: #ECEEF1;
  --ce-border: #E2E5EA;
  --ce-border-soft: #ECEEF1;
  --ce-heading: #14161A;
  --ce-text: #1E2126;
  --ce-text-muted: #565D6B;
  --ce-text-dim: #6B7280;
  --ce-text-faint: #7B8291;
  --ce-text-faint2: #8B92A0;
  --ce-text-faint3: #9AA0AC;
  --ce-text-faint4: #ADB3BE;
  --ce-accent: #18B863;
  --ce-accent-ink: #FFFFFF;
  --ce-body: #363B45;
}

body {
  background: var(--ce-bg) !important;
  color: var(--ce-text);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}

.ce-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--ce-heading);
}

.ce-section {
  padding: 112px 0;
  background: var(--ce-bg);
}
.ce-section.ce-alt { background: var(--ce-bg-alt); border-top: 1px solid var(--ce-border-soft); }

.ce-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}

/* ---------- THEME TOGGLE BUTTON ---------- */
.ce-theme-toggle {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--ce-border); background: var(--ce-bg-card);
  cursor: pointer; margin-left: 20px; flex-shrink: 0; padding: 0;
  transition: border-color .2s, background .25s;
  outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.ce-theme-toggle:hover { border-color: var(--ce-accent); }
.ce-theme-toggle:focus, .ce-theme-toggle:active { outline: none; box-shadow: none; }
.ce-theme-toggle:focus-visible { outline: 2px solid var(--ce-accent); outline-offset: 2px; }
.ce-theme-toggle svg { width: 19px; height: 19px; fill: none; }
.ce-theme-toggle .ce-icon-sun { stroke: var(--ce-accent); display: block; }
.ce-theme-toggle .ce-icon-moon { stroke: var(--ce-heading); display: none; }
html[data-theme="light"] .ce-theme-toggle .ce-icon-sun { display: none; }
html[data-theme="light"] .ce-theme-toggle .ce-icon-moon { display: block; }

@media (max-width: 920px) {
  .ce-container { padding: 0 24px; }
  .ce-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .ce-grid-2, .ce-grid-3 { grid-template-columns: 1fr !important; }
  .ce-nav-links { display: none !important; }
  .ce-theme-toggle { margin-left: 12px; }
}
@media (max-width: 520px) {
  .ce-grid-4 { grid-template-columns: 1fr !important; }
}

/* ============================================
   READABILITY — body text tuned per theme
   ============================================ */
.ce-hero-sub,
.ce-service-card p,
.ce-testi-text,
.ce-case-text,
.ce-story-text p,
.ce-ab-hero p,
.ce-why-item-text,
.ce-team-bio,
.ce-value-text,
.ce-footer-desc,
.ce-services-sub,
.ce-svc-row-desc,
.ce-svc-hero p,
p.ce-case-text {
  color: var(--ce-body) !important;
}