/* ==========================================================================
   EASTWORKS STUDIO — design tokens for the agency showcase site.
   Separate from the client template system (template/css/tokens.css).
   Rename the brand later via find/replace: "Eastworks Studio".

   v2 typography: "level 3" font pairing — two families from different
   foundries that contrast on width. Instrument Serif is the ANCHOR (condensed
   display serif, sets the personality, goes big); Geist is the support
   (wide, technical sans) — the widths pull against each other without the
   pair feeling unrelated.
   ========================================================================== */

:root {
  /* ----- Palette: near-black canvas, one electric accent ----- */
  --a-bg:        #0A0B0D;   /* page canvas */
  --a-bg-raise:  #121417;   /* raised panels, cards */
  --a-bg-glass:  rgba(18, 20, 23, 0.55);  /* glass panels (pair with blur) */
  --a-ink:       #F4F3EE;   /* primary text on dark */
  --a-line:      rgba(244, 243, 238, 0.10);
  --a-accent:    #C6FF4A;   /* electric chartreuse — CTAs, highlights, sparingly */
  --a-accent-ink:#0A0B0D;   /* text on accent */

  /* Text hierarchy by OPACITY, not by picking new greys: same ink, three
     emphasis levels (Material's 87/60 practice). The eye reads 100% first,
     skims 72%, and only reaches 55% when it actually needs it. */
  --a-ink-hi:  rgba(244, 243, 238, 0.87);  /* leads, subheads, body */
  --a-ink-mid: rgba(244, 243, 238, 0.72);  /* supporting copy */
  --a-ink-dim: rgba(244, 243, 238, 0.55);  /* labels, captions, metadata */

  /* Portfolio card palettes mirror the actual demo sites */
  --a-demo-plumber-1: #0E3A5D; --a-demo-plumber-2: #E8642C; --a-demo-plumber-3: #F6F4EF;
  --a-demo-sparks-1:  #08090B; --a-demo-sparks-2:  #F5B301; --a-demo-sparks-3:  #F3F2ED;
  --a-demo-roofer-1:  #17181A; --a-demo-roofer-2:  #B33A2B; --a-demo-roofer-3:  #D9D4C9;
  --a-demo-garden-1:  #2E4B34; --a-demo-garden-2:  #C77E3C; --a-demo-garden-3:  #F3F1E7;
  --a-demo-builder-1: #26241F; --a-demo-builder-2: #D9A441; --a-demo-builder-3: #EFEBE2;
  --a-demo-barber-1:  #1C1A18; --a-demo-barber-2:  #B08D57; --a-demo-barber-3:  #EFE9DF;

  /* ----- Typography -----
     Instrument Serif ships in ONE weight (400 + italic) — fine, the size does
     the shouting. Geist covers 400/500/600 for body and UI. */
  --a-font-display: "Instrument Serif", Georgia, serif;
  --a-font-body: "Geist", "Segoe UI", sans-serif;

  --a-fs-mega: clamp(2.9rem, 4.6vw + 1.1rem, 5.9rem);  /* hero headline */
  --a-fs-1: clamp(2rem, 3.4vw + 0.7rem, 3.6rem);        /* section headings */
  --a-fs-2: clamp(1.35rem, 1.2vw + 1rem, 1.8rem);       /* card headings */
  --a-fs-3: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);      /* leads */
  --a-fs-4: 1rem;
  --a-fs-5: 0.85rem;
  --a-fs-num: clamp(2.6rem, 5vw, 4.2rem);               /* stat numerals */

  /* ----- Rhythm / shape ----- */
  --a-space-section: clamp(5rem, 12vw, 10rem);
  --a-pad: clamp(1.25rem, 4vw, 3rem);
  --a-radius: 14px;
  --a-radius-sm: 8px;
  --a-maxw: 78rem;

  /* ----- Depth ----- */
  /* Film-grain noise as an inline SVG (no network request, no asset file).
     Painted once on a fixed body overlay at low opacity. */
  --a-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --a-glow: 0 0 80px rgba(198, 255, 74, 0.14);
  --a-shadow-lift: 0 18px 50px rgba(0, 0, 0, 0.5);
}