/* ============================================================
   PSYONARA — Spacing, radius, layout tokens
   Hard 4px grid. White space is a "buffer zone", not emptiness.
   ============================================================ */

:root {
  /* ── Base grid unit (4px) ────────────────────────────────── */
  --space-unit: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* gutter — the workhorse */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;  /* desktop margin */
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Semantic spacing ────────────────────────────────────── */
  --gutter: 16px;            /* internal content padding */
  --margin-mobile: 16px;
  --margin-desktop: 40px;
  --container-max: 1440px;
  --content-max: 1280px;

  /* ── Radii — "Soft (1)": precision-machined 4px base ─────── */
  --radius-sm: 0.125rem;   /* 2px */
  --radius: 0.25rem;       /* 4px — DEFAULT, almost everything */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-full: 9999px;

  /* ── Borders — depth via strokes, never soft shadow ──────── */
  --border-width: 1px;     /* structural containers */
  --border-width-bold: 2px;/* active / emphasis / nav + footer rules */

  /* ── "Elevation" — Psyonara rejects ambient shadow.
        Depth = tonal layers + bold borders. The only glow allowed
        is the orange illumination on interactive focus. ──────── */
  --glow-orange-soft: 0 0 16px rgba(255, 107, 0, 0.20);
  --glow-orange: 0 0 24px rgba(255, 107, 0, 0.35);
  --glow-orange-inset: inset 0 0 12px rgba(255, 107, 0, 0.20);

  /* ── Motion — engineered, never bouncy ───────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --dur-fast: 200ms; /* @kind other */
  --dur-base: 300ms; /* @kind other */
  --dur-slow: 500ms; /* @kind other */

  /* ── Chamfer geometry (clipped corners for primary actions) ── */
  --chamfer: 10px;
}

/* ── Signature surface treatments ───────────────────────────── */

/* Hazard stripes — 45° orange/black caution pattern */
.psy-hazard-stripes {
  background: repeating-linear-gradient(
    45deg,
    var(--color-primary-container),
    var(--color-primary-container) 10px,
    #000000 10px,
    #000000 20px
  );
}

/* Clipped (chamfered) corners — for primary CTAs & status chips */
.psy-clip-corner {
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer)
  );
}

/* Neon orange text glow — hero headlines only, use sparingly */
.psy-neon-glow {
  text-shadow:
    0 0 10px var(--color-primary-container),
    0 0 20px var(--color-primary-container),
    0 0 40px var(--color-primary-container);
}

/* Film-grain overlay — apply to a fixed full-bleed layer at z>content.
   2% opacity fractal noise: softens digital perfection into something
   physically manufactured. */
.psy-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.02"/%3E%3C/svg%3E');
}