/*
Theme Name: Digital Dad Defence
Theme URI: https://digitaldaddefence.com
Description: Official WordPress theme for Digital Dad Defence — Caribbean digital safety for families. Child theme of Hello Elementor.
Version: 1.2.3
Author: The Flipside of Technology
Author URI: https://flipsideoftech.com
Template: hello-elementor
Text Domain: digital-dad-defence
Tags: elementor, caribbean, family, digital-safety, custom-colors, custom-fonts
*/

/* ================================================
   DDD Design System — CSS Custom Properties
   ================================================ */
:root {
  /* Brand colours */
  --navy:       #0E2238;
  --navy-700:   #16314f;
  --navy-300:   #3a5274;
  --cream:      #F4EBDD;
  --cream-100:  #FBF6EC;
  --cream-200:  #EDE0CC;
  --shield:     #89A77B;
  --shield-700: #5F7E54;
  --shield-900: #3a5132;
  --orange:     #F39A3D;
  --orange-700: #D87B1A;
  --blue:       #3D8BFF;
  --ink:        #1A1A1A;
  --muted:      #6B6256;

  /* Parent brand */
  --forest: #1F4D32;
  --mint:   #9CC9A4;

  /* Typography */
  --display: "Poppins", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Border radius */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 32px;

  /* Shadows */
  --shadow-card: 0 1px 0 #00000010, 0 10px 30px -12px #0e223826;
  --shadow-pop:  0 2px 0 var(--navy), 6px 8px 0 var(--navy);
  --shadow-soft: 0 20px 50px -20px #0e223830;

  /* Borders */
  --line:        #0E22381a;
  --line-strong: #0E223833;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
h1 { font-weight: 800; font-size: clamp(40px, 6vw, 84px); }
h2 { font-weight: 800; font-size: clamp(30px, 4vw, 56px); }
h3 { font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); }
h4 { font-weight: 700; font-size: 18px; }
p  { margin: 0; line-height: 1.55; color: var(--navy-700); }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }