/*
Theme Name: IKONG Peptides
Theme URI: https://ikong.example
Author: DevBytes
Description: Premium modern science / luxury ecommerce theme for IKONG Peptides. Built for WooCommerce. Dark UI, electric science blue accents, large geometric typography.
Version: 0.2.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ikong
Tags: e-commerce, custom-colors, custom-menu, custom-logo, featured-images, full-width-template
*/

/* ==========================================================================
   Design tokens — sourced from discovery.md visual spec.
   ========================================================================== */

:root {
  /* Backgrounds — never flat black. */
  --ikong-bg: #05070C;
  --ikong-bg-edge: #08111F;

  /* Accents */
  --ikong-blue: #1E7BFF;
  --ikong-cyan: #56B5FF;

  /* Text (contrast-checked on #05070C for WCAG AA) */
  --ikong-text: #FFFFFF;            /* 19:1  */
  --ikong-text-secondary: #C2CDDE;  /* ~11:1 */
  --ikong-text-muted: #93A0B5;      /* ~6.5:1 — passes AA for normal text */

  /* Radii */
  --ikong-radius-card: 16px;
  --ikong-radius-btn: 12px;

  /* Fluid spacing rhythm — scales continuously with viewport width.
     Tuned down so stacked section top+bottom padding doesn't double up. */
  --ikong-section-pad: clamp(40px, 5vw, 72px);
  --ikong-nav-height: 90px;
  --ikong-utility-height: 34px;

  /* Layout */
  --ikong-max-width: 1440px;
  --ikong-content-width: 1280px;

  /* Typography */
  --ikong-font-head: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --ikong-font-body: "Inter", system-ui, -apple-system, sans-serif;
}

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--ikong-bg-edge) 0%, var(--ikong-bg) 55%) fixed;
  color: var(--ikong-text);
  font-family: var(--ikong-font-body);
  font-size: clamp(16px, 0.6vw + 0.7rem, 18px); /* fluid body */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* guard against any horizontal bleed at odd widths */
}

h1, h2, h3, h4 {
  font-family: var(--ikong-font-head);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

a { color: var(--ikong-blue); text-decoration: none; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--ikong-cyan); outline-offset: 2px; border-radius: 4px; }

/* Inner-page content wrapper (.container is defined in assets/css/ikong.css). */
.ikong-page { padding-block: clamp(48px, 7vw, 90px); min-height: 50vh; }

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