/* =====================================================================
   ISEKOI — Design tokens
   ---------------------------------------------------------------------
   Single source of truth for visual identity. Consumed by:
     - Astro hub (isekoi.com)        via global stylesheet
     - WooCommerce child theme       via wp_enqueue_style

   Contains: @font-face, CSS custom properties, shared keyframes,
   decorative utility classes. No reset, no component styles, no
   page composition — those live in each consumer's own CSS.

   Reference: mockup-v4-homepage.html (visual ground truth)
   ===================================================================== */


/* ---------------------------------------------------------------------
   Self-hosted display font
   .woff2 first for modern browsers, .woff fallback, .ttf last resort.
   `local()` lets a developer machine with the font installed skip the
   network request entirely during local work.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Neuropol X';
  src: local('Neuropol X'),
       url('../fonts/neuropol-x.woff2') format('woff2'),
       url('../fonts/neuropol-x.woff')  format('woff'),
       url('../fonts/neuropol-x.ttf')   format('truetype');
  font-display: swap;
  font-weight: 400 700;
  font-style: normal;
}

/* ---------------------------------------------------------------------
   TR-909 — used only for the brand wordmark (header) and hero title.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'TR-909';
  src: local('TR-909'),
       url('../fonts/TR-909.woff2') format('woff2'),
       url('../fonts/TR-909.woff')  format('woff'),
       url('../fonts/TR-909.ttf')   format('truetype');
  font-display: swap;
  font-weight: 400 700;
  font-style: normal;
}


/* ---------------------------------------------------------------------
   Custom properties
   --------------------------------------------------------------------- */
:root {

  /* --- Colors / Backgrounds (solid, for non-translucent contexts) --- */
  --bg-deep:          #020812;   /* near-black blue, page baseline */
  --bg-solid-deep:    #020812;   /* alias for shop CTAs and other solid needs */
  --bg-solid-panel:   #0D1B2C;   /* solid version of panel */

  /* --- Colors / Backgrounds (translucent, used over body bg image
         with backdrop-filter: blur saturate) --- */
  --bg-surface:       rgba(8, 17, 30, 0.82);
  --bg-panel:         rgba(13, 27, 44, 0.85);
  --bg-elevated:      rgba(18, 40, 67, 0.92);

  /* --- Colors / Lines and borders (cold blue, increasing intensity) --- */
  --line-faint:       rgba(80, 140, 220, 0.12);
  --line-soft:        rgba(110, 170, 230, 0.22);
  --line-medium:      rgba(130, 190, 240, 0.42);
  --line-bright:      rgba(125, 224, 255, 0.85);
  --line-white:       rgba(255, 255, 255, 0.85);   /* HUD step-frame stroke */

  /* --- Colors / Accents --- */
  --accent:           #3DA8FF;   /* primary cold electric blue */
  --accent-bright:    #7FE0FF;   /* highlight / hover / glow */
  --accent-deep:      #1B5FA8;   /* shadows / pressed states */
  --accent-warm:      #FF6B35;   /* RARE — live badge + shop CTA only */

  /* --- Colors / Text --- */
  --text-primary:     #D4DCE8;   /* main reading text */
  --text-secondary:   #8A9AAE;   /* labels, metadata */
  --text-muted:       #4A5868;   /* decorative IDs, technical stamps */
  --text-bright:      #FFFFFF;   /* peak emphasis, brand wordmark */

  /* --- Typography / Families --- */
  --font-display:     'Neuropol X', 'Audiowide', sans-serif;
  --font-body:        'IBM Plex Sans', sans-serif;
  --font-mono:        'JetBrains Mono', monospace;

  /* --- Spacing scale (8px base) --- */
  --space-2xs:        0.25rem;   /*   4px */
  --space-xs:         0.5rem;    /*   8px */
  --space-sm:         0.75rem;   /*  12px */
  --space-md:         1rem;      /*  16px */
  --space-lg:         1.5rem;    /*  24px */
  --space-xl:         2rem;      /*  32px */
  --space-2xl:        3rem;      /*  48px */
  --space-3xl:        5rem;      /*  80px */
  --space-4xl:        7rem;      /* 112px */

  /* --- Glows --- */
  --glow-cold:        0 0 20px rgba(125, 224, 255, 0.25);
  --glow-warm:        0 0 18px rgba(255, 107, 53, 0.35);
  --glow-white:       0 0 12px rgba(255, 255, 255, 0.4);

  /* --- Motion --- */
  --transition-fast:    120ms cubic-bezier(0.4, 0, 0.2, 1);   /* link hover, small UI tweaks */
  --transition-normal:  240ms cubic-bezier(0.4, 0, 0.2, 1);   /* module hovers, button states */
  --transition-slow:    480ms cubic-bezier(0.4, 0, 0.2, 1);   /* larger choreography */

  /* --- Topbar layout (shared so hub header and WC theme header match) --- */
  --topbar-height:        88px;
  --topbar-notch-height:  60%;   /* must equal the clip-path Y break value */
}


/* ---------------------------------------------------------------------
   Shared keyframes
   Defined unconditionally. Consumers wrap their `animation:` rules in
   @media (prefers-reduced-motion: no-preference) when appropriate.
   --------------------------------------------------------------------- */

/* Generic blue dot indicator (network-active style) */
@keyframes pulse-soft {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

/* Live "On air" badge — faster, more aggressive than pulse-soft */
@keyframes pulse-warm {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.4; transform: scale(0.7);  }
}

/* Audio waveform bars (consumers stagger animation-delay per bar) */
@keyframes wave-bounce {
  0%, 100% { transform: scaleY(0.2); opacity: 0.3;  }
  50%      { transform: scaleY(1);   opacity: 0.85; }
}

/* Module entrance on page load
   Consumers must define starting state on the target element:
     opacity: 0; transform: translateY(12px); */
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}


/* ---------------------------------------------------------------------
   Decorative utility classes
   --------------------------------------------------------------------- */

/* Small uppercase mono label — category / section markers */
.tech-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 500;
}

/* Tiny technical ID code — e.g. "SKU 0473-A", "REL 003", "RX 8110" */
.id-stamp {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Engineering-comment prefix — apply to titles for a "// " accent */
.slash-prefix::before {
  content: '// ';
  color: var(--accent);
  font-weight: 700;
}

/* Vertical mono text in page margins (e.g. "TRANSMISSION 0001") */
.rotated-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
}