/*
Theme Name: Everblue Consulting
Theme URI:
Description: Custom WordPress theme for Everblue Consulting — built pixel-perfect from Figma design.
Version: 1.1
Author:
Text Domain: everblue
*/

:root {
  /* === Colors (from figma-audit.json → colors[]) === */
  --color-white:           #FFFFFF;
  --color-navy-950:        #020E1A; /* New darker navy */
  --color-navy-900:        #00101E; /* Hero, Footer, Projekte section bg */
  --color-navy-800:        #0F1C44; /* Karriere hero emblem ring (solid form of navy-overlay) */
  --color-blue-gray:       #2F3B45; /* New blue gray */
  --color-blue-800:        #004B82; /* New deeper blue */
  --color-blue-700:        #004079; /* Operate Kreis circle, Teaser card bg */
  --color-blue-500:        #006ED3; /* Bright accent blue */
  --color-text-dark:       #101820; /* New dark text color */
  --color-blue-400:        #2080D9; /* Leistung Zielbild diagram dot fills */
  --color-blue-300:        #61B1F9; /* Light accent blue */
  --color-slate-700:       #33404B; /* Teaser card alt bg */
  --color-gray-50:         #F1F1F1; /* Twin-cards section bg */
  --color-gray-30:         #FBFBFB; /* Leistung Zielbild outer ring bg */
  --color-gray-25:         #FAFAFA; /* Leistung Zielbild concentric ring bg */
  --color-navy-overlay:    rgba(15, 28, 68, 0.2); /* Image-circle overlay */

  /* === Typography (from figma-audit.json → typography[]) === */
  --font-sans:             'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Hero mega heading (split sizes) */
  --fs-h1-mega-1:          150px;     /* "What if", "technology" */
  --lh-h1-mega-1:          165px;
  --fs-h1-mega-2:          90px;      /* "worked for your business?" */
  --lh-h1-mega-2:          99px;

  /* Section headings */
  --fs-h2-let-talk:        44px;      /* "Let's talk" footer */
  --lh-h2-let-talk:        57.2px;
  --fs-h2-section:         42px;      /* "Projekte & Insights" */
  --lh-h2-section:         54.6px;
  --fs-h2-card:            42px;      /* "operate", "For companies that", etc. */
  --lh-h2-card:            46.2px;

  /* Body & supporting */
  --fs-lede:               32px;
  --lh-lede:               41.6px;
  --fs-card-title-l:       28px;
  --lh-card-title-l:       30.8px;
  --fs-card-title-m:       26px;
  --lh-card-title-m:       28.6px;
  --fs-body-l:             20px;
  --lh-body-l:             28px;
  --fs-body-m:             18px;
  --lh-body-m:             25.2px;
  --fs-nav:                16px;
  --lh-nav:                22.4px;
  --fs-label-uc:           14px;
  --lh-label-uc:           19.6px;

  /* Insights Übersicht — page-specific roles */
  --fs-h1-insights:        110px;     /* "Projekte & Insights" hero H1 — also reused by Leistung hero "transform" */
  --lh-h1-insights:        110px;
  --fs-filter-label:       18px;      /* Dropdown chip label */
  --lh-filter-label:       19.8px;
  --fs-filter-tag:         16px;      /* Selected filter tag label */
  --lh-filter-tag:         17.6px;

  /* Leistung — page-specific roles */
  --fs-step-num:           52px;      /* 5-Phasen-Prozess step numbers ("1", "2", ...) */
  --lh-step-num:           57.2px;
  --fs-card-body:          18px;      /* Leistung service-card title (tighter lh than --fs-body-m) */
  --lh-card-body:          23.4px;

  /* Insight Detailseite — page-specific roles */
  --fs-h1-article:         62px;      /* CPT single article title H1 (71:3467) */
  --lh-h1-article:         68.2px;

  /* Weights */
  --fw-regular:            400;
  --fw-medium:             500;
  --fw-semibold:           600;

  /* === Border Radius (from figma-audit.json → border_radius.tokens[]) === */
  --radius-pill:           24px;      /* Icon-Buttons (social), Leistung service cards, Slider arrows */
  --radius-card-50:        50px;      /* Leistung Slider Teaser & Contact CTA card containers */
  --radius-circle:         9999px;    /* Hero/Footer Video frames, Kreis circles */

  /* === Layout === */
  --design-width:          1440px;
  --content-max:           1320px;    /* twin-cards / karriere / cards inner column */
  --gutter:                60px;      /* (1440 - 1320) / 2 */
  --header-height:         96px;

  /* === Transitions ===
     Single global timing per Phase 1 audit — all hover SMART_ANIMATE 300ms EASE_OUT */
  --transition-default:    all 300ms ease-out;

  /* === Effects === */
  --shadow-blue-glow:      0 0 150px 0 rgba(0, 110, 211, 0.45); /* Hero/Footer circle DROP_SHADOW r=150 */
}