/* ============================================================
   Cookisoft — Base layer
   Shared reset, design tokens & utilities for both brand modes.
   Professional palette + Arcade palette taken from the brand books.
   ============================================================ */

:root {
  /* --- Professional palette ("The Byte") --- */
  --espresso: #1A130B;   /* Ink · primary text */
  --caramel:  #C68A42;   /* Accent · the chip  */
  --caramel-deep: #A86E2C;
  --cocoa:    #6B4E2E;   /* Secondary text     */
  --dough:    #F1E7D2;   /* Surface · tint     */
  --paper:    #FBF7EE;   /* Background         */
  --paper-2:  #FFFFFF;

  /* --- Arcade palette --- */
  --arc-dough:   #F4BC4A;
  --arc-toast:   #E59A33;
  --arc-chip:    #4A2C18;
  --arc-screen:  #161020;
  --arc-screen-2:#1F1733;
  --arc-purple:  #8A6BFF;
  --arc-blue:    #4DA6FF;
  --arc-green:   #5FD17A;

  /* --- Typography --- */
  --font-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-pixel-display: "Pixelify Sans", "Hanken Grotesk", sans-serif;
  --font-pixel-ui: "Press Start 2P", "JetBrains Mono", monospace;

  /* --- Rhythm --- */
  --radius: 16px;
  --radius-lg: 28px;
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 9vw, 130px);

  --shadow-sm: 0 1px 2px rgba(26,19,11,.06), 0 4px 14px rgba(26,19,11,.06);
  --shadow-md: 0 10px 30px rgba(26,19,11,.10), 0 2px 8px rgba(26,19,11,.06);
  --shadow-lg: 0 28px 70px rgba(26,19,11,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

body {
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--caramel); outline-offset: 3px; border-radius: 4px; }

/* --- Layout utilities --- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}
.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;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--espresso); color: var(--paper); padding: 12px 18px;
  border-radius: 10px; font-family: var(--font-mono); font-size: .85rem;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* --- Reveal on scroll --- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }