/*
  ============================================================
  GEPVOLT Theme - Design Tokens
  ============================================================
  Single source for all CSS values. Do not hardcode any hex,
  px value or transition outside of this file.
  Load order: this file must be enqueued first.
  ============================================================
*/

:root {

  /* ===== Brand Core ===== */
  --gp-navy:         #1c3f5e;
  --gp-green:        #69af4b;
  --gp-green-hover:  #7dc45e;
  --gp-green-dark:   #3d8633;

  /* ===== Text ===== */
  --gp-text-heading: var(--gp-navy);
  --gp-text-body:    #3a4856;   /* 9.5:1 on white, WCAG AAA */
  --gp-text-muted:   #5a6b79;   /* 5.6:1 on white, WCAG AA */
  --gp-text-on-dark: #ffffff;

  /* ===== Backgrounds ===== */
  --gp-bg-white: #ffffff;
  --gp-bg-light: #f5f7f9;   /* theme.json "base" */
  --gp-bg-muted: #f4f4f4;   /* footer, neutral sections */
  --gp-bg-navy:  var(--gp-navy);

  /* ===== Borders ===== */
  --gp-border:        rgba(28, 63, 94, 0.14);
  --gp-border-field:  #c8d0d8;
  --gp-border-strong: rgba(28, 63, 94, 0.25);   /* strong divider (desktop nav) */
  --gp-border-soft:   rgba(28, 63, 94, 0.12);   /* subtle border (dropdown) */

  /* ===== Shadows ===== */
  --gp-shadow-header:   0 2px 8px rgba(28, 63, 94, 0.14);    /* sticky header */
  --gp-shadow-dropdown: 0 12px 28px rgba(28, 63, 94, 0.14);  /* desktop dropdown */

  /* ===== Accent Surfaces ===== */
  --gp-green-tint: rgba(105, 175, 75, 0.1);   /* submenu hover surface (green 10%) */

  /* ===== Form Fields (from concept PDF) ===== */
  --gp-field-bg:     #ffffff;  /* default field background (white per concept) */
  --gp-field-focus:  #ffffff;  /* field background on focus */
  --gp-field-border: #d4dae0;  /* resting field border (navy-tinted neutral) */

  /* ===== Overlay ===== */
  --gp-overlay: rgba(28, 63, 94, 0.55);   /* modal backdrop */

  /* ===== Status ===== */
  --gp-error:    #d0312d;
  --gp-error-bg: #fff5f5;

  /* ===== Typography ===== */
  --gp-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gp-topbar-fs: 0.85rem;   /* compact utility row (topbar) */

  /* ===== Icon Masks (data URIs, used by several components) =====
     Tinted via background-color + mask -> follow currentColor. */
  --gp-icon-mail:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --gp-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3a2 2 0 0 0-2 2c0 8.837 7.163 16 16 16a2 2 0 0 0 2-2v-2.5a1 1 0 0 0-.8-.98l-4-.8a1 1 0 0 0-1 .42l-1.2 1.6a13 13 0 0 1-5.96-5.96l1.6-1.2a1 1 0 0 0 .42-1l-.8-4A1 1 0 0 0 7.5 3H5Z'/%3E%3C/svg%3E");
  --gp-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18Z'/%3E%3C/svg%3E");
  /* Use-case icons (home "unsere Systeme" feature grid). Same 24x24 stroke set. */
  --gp-icon-industry:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M3 20V9l6 4V9l6 4V6l6 3v11'/%3E%3Cpath d='M9 20v-4M15 20v-4'/%3E%3C/svg%3E");
  --gp-icon-grid:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h3l2.5-7 4 16L16 8l2 4h3'/%3E%3C/svg%3E");
  --gp-icon-charge:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3M14 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1'/%3E%3Cpath d='M22 11v2'/%3E%3Cpath d='M11 7 8 12h3l-1 5 4-6h-3l1-4Z'/%3E%3C/svg%3E");
  --gp-icon-renewables:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
  /* Security-concept icons (investment "Mehrstufiges Sicherheitskonzept" tile grid).
     Same 24x24 stroke set; each maps to one collateral building block. */
  --gp-icon-commissioning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3.5-7.1'/%3E%3Cpath d='M21 4v5h-5'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --gp-icon-assignment:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19h4l3-9 4 14 3-9h4'/%3E%3Cpath d='m17 5 3 3-3 3'/%3E%3C/svg%3E");
  --gp-icon-landcharge:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V9l7-5 7 5v12'/%3E%3Crect x='10' y='13' width='4' height='8'/%3E%3C/svg%3E");
  --gp-icon-collateral:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E");
  --gp-icon-insurance:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 7.8 8 9 4.6-1.2 8-4.5 8-9V6l-8-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --gp-icon-permit:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='m8.5 15 1.5 1.5 3-3'/%3E%3C/svg%3E");
  --gp-icon-trustee:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v5c0 5 3.4 8.2 8 10 4.6-1.8 8-5 8-10V6l-8-3Z'/%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3Cpath d='M8.5 16a3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E");
  --gp-icon-yield:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V3'/%3E%3Cpath d='M3 21h18'/%3E%3Crect x='7' y='13' width='3' height='5'/%3E%3Crect x='12' y='9' width='3' height='9'/%3E%3Crect x='17' y='5' width='3' height='13'/%3E%3C/svg%3E");
  /* Document/file icon (download rows) + download-arrow action affordance. */
  --gp-icon-doc:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h8M8 9h2'/%3E%3C/svg%3E");
  --gp-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");

  /* ===== Spacing (mirrors theme.json spacingSizes) ===== */
  --gp-space-2xs: 0.25rem;   /* fine icon/glyph spacing (below the theme.json scale) */
  --gp-space-xs:  0.5rem;     /* compact button padding (below the theme.json scale) */
  --gp-space-s:   0.75rem;    /* spacing-20 */
  --gp-space-m:   1.25rem;    /* spacing-30 */
  --gp-space-l:   2rem;       /* spacing-40 */
  --gp-space-xl:  3rem;       /* spacing-50 */
  --gp-space-2xl: 4.5rem;     /* spacing-60 */
  --gp-space-3xl: 6rem;       /* spacing-70 */

  /* ===== Vertical section rhythm =====
     One fluid scale for the space between full-width page sections, applied
     site-wide via the .gp-section class (see gp-layout.css) instead of
     per-section inline padding. Ceilings match the values the pages used
     before (|60 = 4.5rem, |70 = 6rem), so desktop spacing is unchanged; the
     floors let sections breathe less on phones, where a fixed 4.5-6rem ate
     too much of the viewport. vw-driven so it scales smoothly with no media
     queries. */
  /* Space between a section heading (H2) and the content it introduces.
     UX rhythm: a heading owns the block below it, so the gap under the heading
     is generous while the eyebrow above stays tight (set on .gp-eyebrow). */
  --gp-heading-gap: clamp(1.75rem, 3.5vw, 2.75rem);

  --gp-section-space:          clamp(3rem, 7vw, 6rem);    /* default section */
  --gp-section-space-compact:  clamp(2.25rem, 5vw, 3.5rem); /* tight bands (intros) */
  --gp-section-space-tight:    clamp(1rem, 2.5vw, 1.75rem); /* slim icon strips (USP) */
  --gp-section-space-spacious: clamp(3.5rem, 8vw, 7rem);   /* statement sections */

  /* ===== Border Radii ===== */
  --gp-radius-sm:   4px;
  --gp-radius-md:   8px;
  --gp-radius-lg:   10px;
  --gp-radius-xl:   12px;
  --gp-radius-pill: 999px;

  /* ===== Transitions ===== */
  --gp-trans-fast: 180ms ease;
  --gp-trans-slow: 220ms ease;
  --gp-trans-btn:  background-color var(--gp-trans-fast),
                   border-color var(--gp-trans-fast),
                   color var(--gp-trans-fast);
  --gp-trans-move: transform 180ms ease, box-shadow 180ms ease;

  /* ===== Touch Target (WCAG 2.1 AA) ===== */
  --gp-touch: 44px;

  /* ===== Focus (consistent pattern across all elements) ===== */
  --gp-focus-color:  var(--gp-green);
  /* On light surfaces the brand green (~2.7:1 on white) fails WCAG 1.4.11/2.4.7
     for the focus indicator; use the darker green (~4.5:1) there. */
  --gp-focus-color-light: var(--gp-green-dark);
  --gp-focus-width:  2px;
  --gp-focus-offset: 3px;

  /* ===== Layout =====
     wide-width matches the box width of the production site (gepvolt.com),
     so alignwide sections (images, cards, features, product, docs, investment
     bands) get the same horizontal room. content-width stays narrow as the
     deliberate prose reading measure. Keep in sync with theme.json
     settings.layout (contentSize / wideSize). */
  --gp-content-width: 760px;
  --gp-wide-width:    1320px;

  /* Fluid page gutter (horizontal margin from the viewport edge).
     Scales with the viewport instead of a fixed value: 16px on the
     smallest phones, growing to 24px on larger screens. Floor matches
     Apple HIG / Material 3 compact, ceiling matches the comfortable
     reading inset on tablets and up. Replaces the former fixed
     spacing-30 (20px) root padding from theme.json. */
  --gp-gutter: clamp(1rem, 4vw, 1.5rem);

  /* ===== Breakpoints as custom props (for JS consistency) ===== */
  --bp-sm:  639px;
  --bp-md:  781px;
  --bp-lg:  1023px;
  --bp-xl:  1280px;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gp-trans-fast: 0ms;
    --gp-trans-slow: 0ms;
    --gp-trans-btn:  none;
    --gp-trans-move: none;
  }
}