/* ============================================================
   PELORACO DESIGN TOKENS
   Premium exterior transformation. Edit brand values here.
   ============================================================ */

:root {

  /* Color: deep graphite base, crisp white, water cyan, chrome */
  --ink: #0E1114;
  --ink-2: #14181D;
  --ink-3: #1B2129;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --white: #FFFFFF;
  --paper: #F4F6F8;
  --mist: rgba(244, 246, 248, 0.72);
  --mute: rgba(244, 246, 248, 0.52);
  --faint: rgba(244, 246, 248, 0.34);

  --cyan: #22D3EE;
  --cyan-deep: #0E7490;
  --cyan-glow: rgba(34, 211, 238, 0.22);

  /* Warm chrome for epoxy premium moments */
  --chrome-1: #E8E4DC;
  --chrome-2: #B8AE9C;
  --chrome-3: #8A7F6A;
  --chrome-grad: linear-gradient(105deg, #F5F2EA 0%, #C9BFA9 38%, #FFFDF6 52%, #A99D85 74%, #E8E2D2 100%);

  /* Small nod to the Pelora umbrella */
  --pelora-lime: #B1FF2B;

  /* Type */
  --font-display: 'Clash Display', 'Archivo', Impact, sans-serif;
  --font-body: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Sentient', Georgia, serif;

  --fs-hero: clamp(2.6rem, 7.4vw, 6.4rem);
  --fs-h1: clamp(2.4rem, 5.6vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 4.2vw, 3.4rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-body-lg: clamp(1.06rem, 1.4vw, 1.22rem);
  --fs-body: 1rem;
  --fs-small: 0.86rem;
  --fs-micro: 0.72rem;

  --track-wide: 0.18em;
  --track-mid: 0.09em;

  /* Space and shape */
  --space-section: clamp(5rem, 11vw, 9.5rem);
  --space-block: clamp(2.4rem, 5vw, 4rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max-w: 1280px;
  --max-w-text: 46rem;

  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.7s;

  /* Elevation */
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 80px var(--cyan-glow);
}