/* ADE Scaffolding — Design Tokens
 * Brand colors derived from actual scaffold tubes (lime) + logo (yellow) + logo bg (black).
 * Industrial Brutalism aesthetic — safety signage meets hi-vis uniform.
 */

@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html, body { height: 100%; }
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  a { color: inherit; text-decoration: none; }
  button { background: none; border: none; cursor: pointer; padding: 0; }
  :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
}

@layer base {
  :root {
    /* ── Core palette (OKLCH for perceptual uniformity) ── */
    --lime: oklch(92% 0.25 130);         /* ~#CCFF00 — signature scaffold tube */
    --lime-hot: oklch(88% 0.28 130);     /* ~#A8FF00 — CTA */
    --lime-deep: oklch(62% 0.21 135);    /* ~#6BA800 — text on lime */
    --yellow: oklch(90% 0.18 95);        /* ~#FFD500 — logo accent */
    --yellow-warn: oklch(82% 0.20 80);   /* ~#F5B800 — warning stripe */

    /* Dark side */
    --black: oklch(10% 0 0);             /* ~#050505 — hero bg */
    --charcoal: oklch(18% 0 0);          /* ~#161616 — nav scrolled, footer */
    --gunmetal: oklch(26% 0.01 250);     /* ~#282d33 — dark surface */
    --steel: oklch(42% 0.01 250);        /* ~#525d66 — borders dark side */

    /* Light side */
    --bone: oklch(97% 0.008 85);         /* ~#F8F5ED — body bg (warm off-white) */
    --paper: oklch(99% 0.005 85);        /* ~#FEFCF7 — card bg */
    --concrete: oklch(92% 0.008 85);     /* ~#E8E4DB — subtle divider */
    --ink: oklch(18% 0.005 260);         /* ~#171a1f — body text */
    --ink-muted: oklch(44% 0.01 260);    /* ~#55606b — secondary text */

    /* Derived */
    --lime-glow: color-mix(in oklch, var(--lime) 55%, transparent);
    --lime-veil: color-mix(in oklch, var(--lime) 12%, transparent);
    --yellow-tint: color-mix(in oklch, var(--yellow) 18%, var(--bone));
    --shadow-card: 0 24px 50px -20px oklch(10% 0 0 / 0.25), 0 8px 16px -6px oklch(10% 0 0 / 0.12);
    --shadow-lime: 0 0 60px oklch(88% 0.28 130 / 0.4), 0 0 20px oklch(88% 0.28 130 / 0.6);

    /* Hazard stripe pattern (used in accents) */
    --hazard: repeating-linear-gradient(
      -45deg,
      var(--yellow) 0 14px,
      var(--black) 14px 28px
    );

    /* ── Typography ── */
    --font-display: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif;
    --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    --fs-mega: clamp(3.5rem, 10vw + 0.5rem, 9.5rem);   /* hero h1 */
    --fs-xl: clamp(2.25rem, 4vw + 0.5rem, 4.5rem);     /* section h2 */
    --fs-lg: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);     /* card titles */
    --fs-md: clamp(1.05rem, 0.5vw + 0.9rem, 1.2rem);   /* body */
    --fs-sm: 0.9rem;
    --fs-xs: 0.78rem;                                   /* labels */

    --lh-tight: 0.88;
    --lh-snug: 1.05;
    --lh-normal: 1.55;

    --ls-mega: -0.03em;
    --ls-tight: -0.015em;
    --ls-label: 0.18em;

    /* ── Layout ── */
    --page-pad: clamp(1.25rem, 5vw, 3rem);
    --page-max: 1400px;
    --section-y: clamp(5rem, 10vw, 9rem);
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 28px;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 180ms;
    --dur-med: 420ms;
    --dur-slow: 900ms;
  }

  html {
    background: var(--bone);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: var(--lh-normal);
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  body {
    font-size: var(--fs-md);
    overflow-x: clip;
  }

  ::selection {
    background: var(--lime);
    color: var(--black);
  }

  .font-display {
    font-family: var(--font-display);
    letter-spacing: var(--ls-mega);
    line-height: var(--lh-tight);
    text-transform: uppercase;
  }

  .font-mono {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0;
  }

  .label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  .wrap {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-pad);
  }

  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }
}