/* ==========================================================================
   DAP Design System, Tokens
   Single source of truth for colors, type, spacing, radii.

   Two namespaces live in here:
     --dap-*       → Deck / audit system (dark bg, Lato, JetBrains Mono)
     --dap-web-*   → Web surfaces system (light bg, Cerebri Sans → Inter,
                     Maastricht-blue heroes, signature orange-glow CTA)

   Both share the same brand DNA (navy + orange + numbers-forward voice).
   Pick a namespace per surface; do not cross-pollinate within a single page.

   Sources:
     deck system  → dap-branding skill v1 (existing audit decks)
     web system   → digitalauthority.me live DOM, May 2026 audit
                    → see brand/design-system.md, brand/tokens.json
   ========================================================================== */

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

:root {
  /* ===== CORE BRAND COLORS ===== */
  --dap-navy:        #061C2C;  /* Primary dark, slide bg, headers */
  --dap-orange:      #F2501E;  /* "DAP red", dominant accent */
  --dap-blue:        #4285F4;  /* Secondary accent, links, secondary data */
  --dap-cyan:        #00B4D8;  /* Tertiary accent, competitor color, info */

  /* ===== CONTENT BLOCK FILLS ===== */
  --dap-slate:       #364D5D;  /* General-purpose card */
  --dap-dark-teal:   #1E3342;  /* Secondary panel */
  --dap-deep-navy:   #052236;  /* Deepest panel */
  --dap-purple:      #644CA5;  /* AI/GEO section, highlight */
  --dap-green:       #70AD47;  /* Positive / success */

  /* ===== AUDIT-SPECIFIC SHADES (from existing HTMLs) ===== */
  --dap-card:        #0D2A3F;  /* Audit card bg */
  --dap-card-2:      #102F46;  /* Audit alt card bg */
  --dap-border:      #1A3A4F;  /* Subtle border */
  --dap-deep:        #041824;  /* Section alt bg */

  /* ===== SEMANTIC ===== */
  --dap-yellow:      #F5B30B;  /* Warning */
  --dap-red:         #E04040;  /* Critical / negative */

  /* Soft variants (for tinted backgrounds) */
  --dap-orange-soft: rgba(242, 80, 30, 0.12);
  --dap-cyan-soft:   rgba(0, 180, 216, 0.12);
  --dap-green-soft:  rgba(118, 192, 67, 0.15);
  --dap-yellow-soft: rgba(245, 179, 11, 0.15);
  --dap-red-soft:    rgba(224, 64, 64, 0.15);
  --dap-purple-soft: rgba(100, 76, 165, 0.20);

  /* ===== TEXT ===== */
  --dap-white:       #FFFFFF;
  --dap-muted:       #B0BEC5;       /* Body on dark */
  --dap-dim:         rgba(255, 255, 255, 0.55);
  --dap-text-dark:   #1A1A2E;       /* Body on light */

  /* ===== LIGHT-MODE SURFACES ===== */
  --dap-bg-light:    #FFFFFF;
  --dap-bg-subtle:   #F5F5F5;
  --dap-callout-bg:  #FFF0EB;       /* Light callout (orange-tinted) */

  /* ===== TYPOGRAPHY ===== */
  --dap-font:        'Lato', 'Calibri', system-ui, -apple-system, sans-serif;
  --dap-font-mono:   'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Lato weights: 300 light, 400 regular, 700 bold, 900 black */

  /* ===== RADII ===== */
  --dap-radius-sm:   4px;
  --dap-radius:      8px;
  --dap-radius-lg:   14px;
  --dap-radius-pill: 999px;

  /* ===== SHADOWS ===== */
  --dap-shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.15);
  --dap-shadow:      0 8px 24px rgba(0, 0, 0, 0.25);
  --dap-shadow-lg:   0 20px 48px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Base reset (use on every DS page; not auto-applied to consumer pages)
   ========================================================================== */
.dap-reset *,
.dap-reset *::before,
.dap-reset *::after { box-sizing: border-box; }

.dap-reset {
  margin: 0;
  padding: 0;
  font-family: var(--dap-font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* ==========================================================================
   Utility, orange punch word.
   Mandatory on every headline. Wrap key data points.
   ========================================================================== */
.hl, .punch {
  color: var(--dap-orange);
  font-weight: 900;
}

/* CTA-section override: orange-on-orange = invisible.
   When .hl/.punch lives inside an orange CTA bg, scope this override: */
.cta-orange .hl,
.cta-orange .punch {
  color: var(--dap-navy);
  background: #fff;
  padding: 0 14px;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12);
}


/* ==========================================================================
   --dap-web-*, Web surface tokens
   Source: digitalauthority.me live DOM (May 2026), brand/design-system.md
   Use on consumer-facing web pages, landing pages, marketing surfaces.
   ========================================================================== */
:root {
  /* Web brand colors (note: orange is #F4511E, NOT the deck #F2501E) */
  --dap-web-maastricht:    #041C2C;   /* Hero background, primary brand dark */
  --dap-web-prussian:      #033748;   /* Inset cards on dark hero */
  --dap-web-orange:        #F4511E;   /* CTAs, links, accents */
  --dap-web-orange-hover:  #D63D0F;   /* CTA hover */
  --dap-web-charcoal:      #1F2A33;   /* Body section bg, secondary dark */

  /* Neutrals */
  --dap-web-white:         #FFFFFF;
  --dap-web-body:          #263238;   /* Default paragraph color */
  --dap-web-black:         #000000;   /* H2/H3 on light */
  --dap-web-border:        #D7D7D7;   /* Secondary button border */
  --dap-web-input-border:  #AFAFAF;
  --dap-web-card-shadow:   #E6E6E6;
  --dap-web-bg-grey:       #F5F5F5;   /* "dap-grey-bg" sections */
  --dap-web-muted:         rgba(255,255,255,0.78);

  /* Signature orange-glow shadow, preserve in any redesign */
  --dap-web-glow:          12px 12px 24px 0px rgba(244, 81, 30, 0.64);
  --dap-web-glow-soft:     8px 8px 18px 0px rgba(244, 81, 30, 0.42);
  --dap-web-card-soft:     1px 1px 20px 2px rgb(230, 230, 230);

  /* Type, Cerebri Sans (commercial, paid). Inter is the open-source fallback. */
  --dap-web-font:          'Cerebri Sans', 'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (desktop ≥1024px), from live computed CSS */
  --dap-web-h1:            55px;
  --dap-web-h1-lh:         66px;
  --dap-web-h2:            36.8px;
  --dap-web-h2-lh:         48px;
  --dap-web-h3:            30px;
  --dap-web-h3-lh:         36px;
  --dap-web-h4:            25px;     /* Orange eyebrow */
  --dap-web-body-size:     16px;
  --dap-web-body-lh:       26px;
  --dap-web-body-lg:       20px;
  --dap-web-small:         15px;

  /* Radii */
  --dap-web-r-input:       10px;
  --dap-web-r-card:        0px;       /* Cards rely on shadow, not radius */
  --dap-web-r-pill:        30px;
  --dap-web-r-pill-lg:     45px;
  --dap-web-r-pill-full:   1000px;

  /* Layout */
  --dap-web-container:     1320px;    /* Bootstrap container-xxl */
  --dap-web-section-y:     48px;
  --dap-web-section-y-lg:  96px;
}