/* tokens.css — design tokens for the Skyframe home page.
   Colors, type stacks, spacing, z-layers, easing + duration vocabulary.
   Loaded first; every other home/ module may reference these. */

:root {
  --ink: #090c0b;
  --charcoal: #0d100e;
  --panel: #111512;
  --panel-raised: #161b17;
  --paper: #eef2eb;
  --paper-soft: #c7cec5;
  --muted: #8e978e;
  --phosphor: #b7f774;
  --phosphor-soft: rgba(183, 247, 116, 0.16);
  --phosphor-faint: rgba(183, 247, 116, 0.07);
  --hairline: rgba(238, 242, 235, 0.14);
  --hairline-soft: rgba(238, 242, 235, 0.07);
  --page-gutter: clamp(1.25rem, 3.2vw, 3.5rem);
  --display: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --z-substrate: 0;
  --z-lattice: 1;
  --z-media: 2;
  --z-routes: 3;
  --z-nodes: 4;
  --z-content: 5;
  --z-nav: 6;
  --z-modal: 7;

  /* Duration scale — the exact values used across the home modules. */
  --dur-1: 180ms; /* micro interactions: color shifts, arrow nudges */
  --dur-2: 220ms; /* underline sweeps, small surface fades */
  --dur-3: 240ms; /* header + panel surface changes */
  --dur-4: 260ms; /* service card hover + accent line */
  --dur-5: 300ms; /* media filter fades, padding ease */
  --dur-6: 360ms; /* system body slide-in */
  --dur-7: 560ms; /* principles carousel glide, mobile accordion height */
  --dur-8: 620ms; /* systems accordion flex */
  --dur-9: 800ms; /* service media zoom */
  --dur-marquee: 34s; /* proof marquee + lattice drift */

  /* Easing vocabulary */
  --ease-standard: ease;
  --ease-linear: linear;
  --ease-glide: cubic-bezier(0.2, 0.72, 0.18, 1); /* accordions, carousel */
  --ease-media: cubic-bezier(0.2, 0.7, 0.2, 1); /* slow media zoom */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* reserved for the motion pass */
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* reserved for the motion pass */

  /* Channel triplets for composing translucent washes without new hex */
  --ink-rgb: 9, 12, 11;
  --paper-rgb: 238, 242, 235;
  --phosphor-rgb: 183, 247, 116;
}

@media (max-width: 760px) {
  :root {
    --page-gutter: 1.1rem;
  }
}