/* ============================================================
   DIU by GFA — Design Tokens
   Exact values extracted from the approved prototype.
   Paste into your theme (Astra: Customizer → Additional CSS,
   or your child theme's stylesheet). Use the variables so every
   component matches the prototype 1:1.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --diu-blue:        #2E5C8A;  /* GFA primary blue — links, primary buttons, icons */
  --diu-blue-hover:  #27517A;  /* primary button hover */
  --diu-accent:      #3DA5D9;  /* data-blue accent — hero CTA, badges, highlights */
  --diu-navy:        #16304D;  /* headings, dark blocks */
  --diu-navy-deep:   #0B1A2B;  /* hero background */
  --diu-navy-deep-2: #0F2438;  /* contact section background */
  --diu-grey-bg:     #F2F4F6;  /* alternating light section background */
  --diu-tint:        #EEF4FA;  /* pale blue — icon chips, pills, hover tints */
  --diu-text:        #1A1A1A;  /* body text on light */
  --diu-text-soft:   #5B6B7B;  /* secondary/paragraph text */
  --diu-text-mute:   #8A97A3;  /* captions, meta labels */
  --diu-border:      #E6EBF0;  /* card & divider borders */
  --diu-border-2:    #EEF1F4;  /* lighter inner dividers */
  --diu-img-ph:      #DDE6EE;  /* image placeholder background */

  /* ---- Typography ---- (family: Inter, all weights) */
  --diu-font: 'Inter', system-ui, -apple-system, sans-serif;

  --diu-h1:        800 64px/1.04 var(--diu-font);   /* hero headline; letter-spacing -.03em */
  --diu-h2:        800 42px/1.10 var(--diu-font);   /* section heading; letter-spacing -.025em */
  --diu-h3:        700 22px/1.25 var(--diu-font);   /* card title */
  --diu-lead:      400 22px/1.50 var(--diu-font);   /* hero sub-headline */
  --diu-body:      400 16px/1.60 var(--diu-font);   /* body / card text */
  --diu-body-lg:   400 18px/1.60 var(--diu-font);   /* intro paragraphs */
  --diu-label:     600 13px/1.00 var(--diu-font);   /* eyebrow/label; letter-spacing .10em; UPPERCASE; color var(--diu-blue) */
  --diu-meta:      600 12px/1.00 var(--diu-font);   /* card meta; letter-spacing .05em; UPPERCASE; color var(--diu-text-mute) */

  /* ---- Radius ---- */
  --diu-r-card:   16px;  /* cards, articles, figures */
  --diu-r-lg:     22px;  /* feature blocks (Smart City), contact form panel (18px) */
  --diu-r-chip:   12px;  /* icon chips, inner list items */
  --diu-r-btn:     9px;  /* buttons */
  --diu-r-input:   9px;  /* form fields */
  --diu-r-pill:  999px;  /* pills / badges */

  /* ---- Spacing scale (px) ---- */
  --diu-space-section-y: 104px; /* vertical padding top of major sections (bottom 96px) */
  --diu-space-card-pad:   34px; /* service card padding */
  --diu-gap-cards:        20px; /* 2-col service grid gap */
  --diu-gap-grid:         22px; /* 3-col project/news grid gap */
  --diu-container:      1200px; /* max content width; side padding 40px */

  /* ---- Shadow ---- */
  --diu-shadow-card-hover: 0 10px 30px rgba(22,48,77,.06);
  --diu-shadow-cta:        0 8px 24px rgba(61,165,217,.30);
  --diu-shadow-nav:        0 1px 12px rgba(22,48,77,.05);
}

/* ============================================================
   COMPONENT RECIPES (copy the declarations you need)
   ============================================================ */

/* Primary button (blue) */
.diu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--diu-blue); color: #fff;
  font: 600 15px/1 var(--diu-font);
  padding: 15px 28px; border-radius: var(--diu-r-btn);
  border: none; cursor: pointer; text-decoration: none;
  transition: background .2s;
}
.diu-btn:hover { background: var(--diu-blue-hover); }

/* Accent CTA (used on dark backgrounds — hero, contact) */
.diu-btn-accent {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--diu-accent); color: var(--diu-navy-deep);
  font: 700 16px/1 var(--diu-font);
  padding: 17px 30px; border-radius: var(--diu-r-btn);
  text-decoration: none; box-shadow: var(--diu-shadow-cta);
}

/* Ghost button (outline on dark) */
.diu-btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; font: 600 16px/1 var(--diu-font);
  padding: 17px 20px; border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--diu-r-btn); text-decoration: none;
}

/* Card (service / project / news / testimonial) */
.diu-card {
  background: #fff; border: 1px solid var(--diu-border);
  border-radius: var(--diu-r-card); padding: var(--diu-space-card-pad);
  transition: border-color .2s, box-shadow .2s;
}
.diu-card:hover { border-color: #BCD2E6; box-shadow: var(--diu-shadow-card-hover); }

/* Icon chip (inside cards) */
.diu-icon-chip {
  width: 52px; height: 52px; border-radius: var(--diu-r-chip);
  background: var(--diu-tint);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
/* SVG icons: 26px, stroke var(--diu-blue), stroke-width 2, round caps/joins */

/* Pill / badge */
.diu-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--diu-tint); border: 1px solid #CFE0F0;
  color: var(--diu-blue); font: 600 13px/1 var(--diu-font);
  padding: 11px 15px; border-radius: var(--diu-r-pill);
}

/* Eyebrow label above section headings */
.diu-eyebrow {
  font: var(--diu-label); letter-spacing: .10em; text-transform: uppercase;
  color: var(--diu-blue); margin-bottom: 14px;
}

/* Form field */
.diu-input {
  width: 100%; font: 400 15px/1 var(--diu-font); color: var(--diu-text);
  padding: 13px 14px; border: 1px solid #D8DFE6;
  border-radius: var(--diu-r-input); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.diu-input:focus { border-color: var(--diu-blue); box-shadow: 0 0 0 3px rgba(46,92,138,.12); }

/* Section wrapper */
.diu-section { padding: var(--diu-space-section-y) 0 96px; }
.diu-section--alt { background: var(--diu-grey-bg); }
.diu-container { max-width: var(--diu-container); margin: 0 auto; padding: 0 40px; }