/* ==========================================================================
   Venova Energy — Design Tokens
   Derived from the Venova Energy brand mark (navy wing / green wing).
   Single source of truth for color, type, spacing, radius, shadow, motion.
   ========================================================================== */

:root{

  /* ---------- Brand color (sampled from the supplied logo) ---------- */
  --navy-900:#01162E;
  --navy-800:#02244A;   /* core brand navy */
  --navy-700:#0A3363;
  --navy-600:#154480;
  --navy-500:#2C5B9A;

  --green-700:#026634;
  --green-600:#027E3F;  /* core brand green */
  --green-500:#0E9A48;
  --green-400:#1CB458;
  --green-300:#4FCB79;
  --green-100:#E4F7EA;

  /* ---------- Neutrals ---------- */
  --ink:#0D1420;
  --slate-900:#131B27;
  --slate-700:#3D4756;
  --slate-500:#68748A;
  --slate-300:#AEB8C4;
  --slate-200:#D7DEE6;
  --slate-100:#EDF1F5;
  --mist:#F5F8FA;
  --white:#FFFFFF;

  /* ---------- Semantic ---------- */
  --color-success:var(--green-500);
  --color-warning:#B4750E;
  --color-warning-bg:#FCF3E3;
  --color-danger:#C4392B;
  --color-danger-bg:#FBEAE8;

  /* ---------- Surface roles ---------- */
  --bg-page:var(--white);
  --bg-subtle:var(--mist);
  --bg-dark:var(--navy-900);
  --bg-dark-raised:var(--navy-800);
  --border-default:var(--slate-200);
  --border-dark:rgba(255,255,255,.12);

  --text-primary:var(--ink);
  --text-secondary:var(--slate-700);
  --text-muted:var(--slate-500);
  --text-on-dark:#F3F6FA;
  --text-on-dark-muted:#9FADC2;

  /* ---------- Typography ---------- */
  --font-display:"Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:"Inter", "Segoe UI", system-ui, sans-serif;

  --fs-2xs:.75rem;      /* 12px */
  --fs-xs:.8125rem;     /* 13px */
  --fs-sm:.9375rem;     /* 15px */
  --fs-md:1rem;         /* 16px */
  --fs-lg:1.125rem;     /* 18px */
  --fs-xl:1.375rem;     /* 22px */
  --fs-2xl:1.75rem;     /* 28px */
  --fs-3xl:2.25rem;     /* 36px */
  --fs-4xl:3rem;        /* 48px */
  --fs-5xl:3.75rem;     /* 60px */
  --fs-6xl:4.75rem;     /* 76px */

  --lh-tight:1.08;
  --lh-snug:1.25;
  --lh-normal:1.5;
  --lh-relaxed:1.7;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:.75rem;
  --sp-4:1rem;
  --sp-5:1.25rem;
  --sp-6:1.5rem;
  --sp-8:2rem;
  --sp-10:2.5rem;
  --sp-12:3rem;
  --sp-16:4rem;
  --sp-20:5rem;
  --sp-24:6rem;
  --sp-32:8rem;

  --container-max:1280px;
  --container-pad:clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Radius ---------- */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-xl:32px;
  --radius-full:999px;

  /* ---------- Shadow (navy-tinted for cohesion) ---------- */
  --shadow-sm:0 1px 2px rgba(2,20,45,.06), 0 1px 1px rgba(2,20,45,.04);
  --shadow-md:0 8px 24px -8px rgba(2,20,45,.16), 0 2px 6px rgba(2,20,45,.06);
  --shadow-lg:0 24px 48px -16px rgba(2,20,45,.24), 0 4px 12px rgba(2,20,45,.08);
  --shadow-glow-green:0 0 0 1px rgba(14,154,72,.16), 0 12px 32px -8px rgba(14,154,72,.35);

  /* ---------- Gradients ---------- */
  --grad-brand:linear-gradient(135deg, var(--green-600) 0%, var(--green-400) 100%);
  --grad-navy:linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  --grad-mesh-light:radial-gradient(60% 60% at 15% 10%, rgba(14,154,72,.08) 0%, rgba(14,154,72,0) 60%),
                    radial-gradient(50% 50% at 100% 0%, rgba(2,36,74,.06) 0%, rgba(2,36,74,0) 60%);

  /* ---------- Motion ---------- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --dur-fast:180ms;
  --dur-base:320ms;
  --dur-slow:600ms;
  --dur-cinematic:1200ms;

  /* ---------- Z-index ---------- */
  --z-header:100;
  --z-overlay:200;
  --z-modal:300;
  --z-toast:400;
}

@media (max-width:768px){
  :root{
    --fs-6xl:3rem;
    --fs-5xl:2.5rem;
    --fs-4xl:2.125rem;
    --fs-3xl:1.75rem;
    --fs-2xl:1.5rem;
    --container-pad:1.25rem;
  }
}