/* ============================================================
   Envirops Automation — Design Tokens
   Visual language adapted from Mastercard's editorial system,
   retuned for an environmental-consulting B2B service.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@400;500;600;700&display=swap");

:root {
  /* ===================== COLOR ===================== */

  /* Surfaces */
  --canvas-cream:  #F3F0EE;   /* default page background — warm putty */
  --lifted-cream:  #FCFBFA;   /* nested raised surface */
  --whisper-cream: #E8E2DA;   /* ghost-watermark / cream-on-cream type */
  --white:         #FFFFFF;   /* nav pill, satellite CTAs, modal cards */
  --soft-bone:     #F4F4F4;   /* cool-gray alternate surface (rare) */

  /* Ink / text */
  --ink-black:     #141413;   /* primary text, primary CTAs, footer */
  --charcoal:      #262627;   /* alt heading */
  --granite:       #555555;   /* deeper body accent */
  --graphite:      #565656;   /* link alt */
  --slate-gray:    #696969;   /* muted secondary text */
  --dust-taupe:    #D1CDC7;   /* whisper / disabled text */

  /* Brand accent */
  --signal-orange:       #CF4500;  /* consent / legal / eyebrow dot */
  --light-signal-orange: #F37338;  /* orbital decorative arcs */
  --clay-brown:          #9A3A0A;  /* rust secondary link-style */

  /* Envirops-specific quiet secondary */
  --field-sage:    #5C7A66;   /* muted forest green — environmental category */
  --field-sage-50: #E4ECE6;   /* tint for status pills */

  /* Semantic */
  --link-blue:     #3860BE;
  --success:       #2E7D52;
  --warning:       #B26B00;
  --danger:        #B12A1A;

  /* ===================== TYPOGRAPHY ===================== */

  --font-sans: "Sofia Sans", "MarkForMC", system-ui, -apple-system, Arial, sans-serif;
  /* MarkForMC is proprietary; Sofia Sans is the closest open-source match. */

  /* Sizes */
  --fs-h1:        64px;
  --fs-h2:        36px;
  --fs-h3:        24px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-eyebrow:   14px;
  --fs-micro:     12px;
  --fs-display:   96px;   /* ghost watermark scale */

  /* Line heights */
  --lh-tight:    1.0;
  --lh-display:  1.05;
  --lh-heading:  1.2;
  --lh-body:     1.4;

  /* Letter spacing */
  --ls-headline:  -0.02em;
  --ls-button:    -0.03em;
  --ls-eyebrow:    0.04em;

  /* Weights — 450 is load-bearing for body */
  --fw-body:    450;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ===================== SPACING ===================== */

  --space-1:    8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   48px;
  --space-6:   64px;
  --space-7:   96px;
  --space-8:  128px;

  /* ===================== RADIUS ===================== */

  --r-xs:    4px;
  --r-btn:  20px;     /* primary + secondary body CTAs */
  --r-pill: 24px;     /* consent / orange pill */
  --r-card: 40px;     /* hero media + large cards */
  --r-full: 999px;    /* nav, chips, pill cards */
  --r-circle: 50%;

  /* ===================== SHADOW ===================== */

  --shadow-1: 0 4px 24px 0 rgba(0, 0, 0, 0.04);   /* floating nav pill */
  --shadow-2: 0 24px 48px 0 rgba(0, 0, 0, 0.08);  /* elevated media */
  --shadow-3: 0 70px 110px 0 rgba(0, 0, 0, 0.25); /* rare feature tile */

  /* ===================== TRANSITION ===================== */

  --t-fast:    120ms ease;
  --t-default: 150ms ease;
  --t-slow:    320ms ease;

  /* ===================== LAYOUT ===================== */

  --max-content: 1280px;
  --gutter-desktop: 48px;
  --gutter-mobile:  20px;
}

/* ============================================================
   Semantic element defaults
   ============================================================ */

body {
  background: var(--canvas-cream);
  color: var(--ink-black);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-headline);
  color: var(--ink-black);
  margin: 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: var(--fw-bold); }

p { margin: 0 0 var(--space-2) 0; }

a {
  color: var(--link-blue);
  text-decoration: none;
  transition: opacity var(--t-default);
}
a:hover { opacity: 0.7; }

small, .small { font-size: var(--fs-small); color: var(--slate-gray); }

/* Eyebrow label — the signature category signal */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-black);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-orange);
  display: inline-block;
}

/* Ghost watermark heading */
.ghost-headline {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-headline);
  line-height: var(--lh-display);
  color: var(--whisper-cream);
}

/* ============================================================
   Button system
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button);
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--r-btn);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: opacity var(--t-default), transform 80ms ease, background var(--t-default);
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--ink-black);
  color: var(--canvas-cream);
  border-color: var(--ink-black);
}
.btn--primary:hover { opacity: 0.88; }

.btn--secondary {
  background: var(--white);
  color: var(--ink-black);
  border-color: var(--ink-black);
  font-weight: var(--fw-body);
}
.btn--secondary:hover { background: var(--lifted-cream); }

.btn--orange {
  background: var(--signal-orange);
  color: var(--white);
  border: 0;
  padding: 12px 30px;
  border-radius: var(--r-pill);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Satellite micro-CTA — circular arrow button docked to a portrait */
.satellite {
  width: 56px;
  height: 56px;
  border-radius: var(--r-circle);
  background: var(--white);
  color: var(--ink-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-default);
}
.satellite:hover { transform: translate(2px, -2px); }