/* ============================================================
   EDGE GARAGE DOORS — Colors & Type
   Austin Metro · Garage Door Sales · Install · Repair
   ============================================================ */

/* Web fonts loaded via wp_enqueue_style in functions.php (not @import) */

:root {
  /* ============ COLORS ============ */

  /* Brand — pulled from the logo */
  --edge-navy:        #1B2A4A;   /* primary brand */
  --edge-navy-deep:   #121E38;   /* hover / pressed / headings on cream */
  --edge-navy-soft:   #2B3E66;   /* secondary surfaces */
  --edge-orange:      #E85D2C;   /* accent — "the wing" */
  --edge-orange-hot:  #D44E1F;   /* hover state for orange */
  --edge-orange-soft: #F2A07A;   /* tints / outlined display type */

  /* Neutral — warm cream + truck-stop gray */
  --cream:            #F5EFE3;   /* primary background — like Pink's */
  --cream-deep:       #ECE3D1;   /* alt section background */
  --paper:            #FFFFFF;
  --ink:              #14213D;   /* primary text on cream / white */
  --ink-2:            #4A5570;   /* secondary text */
  --ink-3:            #7B8499;   /* tertiary / labels */
  --hairline:         #1B2A4A22; /* borders, dividers */
  --concrete:         #B9B3A6;   /* tonal — driveway / siding */
  --concrete-dark:    #6F6A5E;

  /* Semantic */
  --success:          #2F7D5A;
  --warning:          #E8B23C;
  --danger:           #C0352B;

  /* Foreground / background tokens — use these by default */
  --bg-1:             var(--cream);
  --bg-2:             var(--cream-deep);
  --bg-3:             var(--paper);
  --bg-inverse:       var(--edge-navy);

  --fg-1:             var(--ink);
  --fg-2:             var(--ink-2);
  --fg-3:             var(--ink-3);
  --fg-on-navy:       var(--cream);
  --fg-on-orange:     var(--paper);

  --accent:           var(--edge-orange);
  --accent-hover:     var(--edge-orange-hot);

  /* ============ TYPE ============ */
  --font-display:  "Big Shoulders Display", "Bowlby One SC", "Impact", sans-serif;
  --font-retro:    "Bowlby One SC", "Big Shoulders Display", "Ultra", serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — pulled toward bold/condensed display */
  --fs-hero:    clamp(56px, 8vw, 128px);
  --fs-h1:      clamp(40px, 5vw, 72px);
  --fs-h2:      clamp(28px, 3.2vw, 48px);
  --fs-h3:      24px;
  --fs-eyebrow: 14px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --lh-tight:   0.92;
  --lh-display: 1.02;
  --lh-body:    1.55;

  --tracking-display: -0.01em;
  --tracking-caps:    0.08em;

  /* ============ SPACING / RADIUS / SHADOW ============ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 0 0 #1B2A4A14, 0 1px 2px 0 #1B2A4A12;
  --shadow-2: 0 6px 16px -4px #1B2A4A26;
  --shadow-3: 0 18px 40px -12px #1B2A4A40;
  --shadow-press: inset 0 2px 0 0 #00000018;

  /* ============ MOTION ============ */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap:  cubic-bezier(0.4, 1.4, 0.6, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============ Semantic typography ============ */
.eg-hero,
h1.eg-hero {
  font-family: var(--font-retro);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--edge-orange-soft);
  -webkit-text-stroke: 2px var(--edge-navy);
  text-transform: uppercase;
  margin: 0;
}

h1, .eg-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-transform: uppercase;
  margin: 0;
}

h2, .eg-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-transform: uppercase;
  margin: 0;
}

h3, .eg-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

.eg-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--edge-orange);
}

p, .eg-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}

small, .eg-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-3);
}

code, .eg-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Quick-utility nav link */
.eg-navlink {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--edge-navy);
  text-decoration: none;
}
.eg-navlink:hover { color: var(--edge-orange); }