/* AINNA Network — shared design tokens (Fasa 2 G1) */
:root {
  --ainna-accent: #667eea;
  --ainna-accent-2: #764ba2;
  --ainna-cyan: #00d4ff;
  --ainna-blue: #0071e3;
  --ainna-radius-card: 20px;
  --ainna-radius-card-compact: 12px;
  --ainna-radius-card-hero: 24px;
  --ainna-radius-pill: 999px;
  --ainna-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  --ainna-shadow-hover: 0 12px 32px rgba(102, 126, 234, 0.18);
  --ainna-section-pad: 80px;
  --ainna-card-hover: translateY(-6px);
  --ainna-gradient: linear-gradient(135deg, var(--ainna-accent), var(--ainna-accent-2));
  --ainna-bg: #ffffff;
  --ainna-bg-alt: #f5f5f7;
  --ainna-text: #1a1a2e;
  --ainna-text-muted: #64748b;
  --ainna-border: rgba(0, 0, 0, 0.08);
  --ainna-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*
   * Dock stack — Cyberpunk Globe Lite + cookie cutout + footer cutout
   * X: viewport center · Y: fixed bottom · hole ≈ globe + breathing room
   */
  --ainna-dock-x: 50%;
  /* clear iOS home indicator + fixed dock */
  --ainna-dock-bottom: max(20px, calc(12px + env(safe-area-inset-bottom, 0px)));
  --ainna-dock-globe: 60px;
  --ainna-dock-cutout-d: 60px;   /* match globe size for sepusat alignment */
  --ainna-dock-cutout-r: 30px;
  --ainna-dock-cutout-cy: 30px;  /* hole centre from bottom edge (= globe/2) */

  /* Aliases used by cookie / footer CSS */
  --ainna-cookie-cutout-d: var(--ainna-dock-cutout-d);
  --ainna-cookie-cutout-r: var(--ainna-dock-cutout-r);
  --ainna-cookie-cutout-cy: var(--ainna-dock-cutout-cy);
  --ainna-footer-cutout-d: var(--ainna-dock-cutout-d);
  --ainna-footer-cutout-r: var(--ainna-dock-cutout-r);
}

[data-theme="dark"] {
  --ainna-bg: #0f172a;
  --ainna-bg-alt: #1e293b;
  --ainna-text: #f8fafc;
  --ainna-text-muted: #94a3b8;
  --ainna-border: rgba(255, 255, 255, 0.1);
  --ainna-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
  :root { --ainna-section-pad: 56px; }
}

/* Match cyberpunk-globe-lite mobile globe size (max-width: 480px) */
@media (max-width: 480px) {
  :root {
    --ainna-dock-globe: 45px;
    --ainna-dock-cutout-d: 45px;   /* match globe size for sepusat */
    --ainna-dock-cutout-r: 22.5px;
    --ainna-dock-cutout-cy: 22.5px;
  }
}

/* ── Smooth day/night theme transition (light on/off effect) ── */
html[data-theme] body,
html[data-theme] .page,
html[data-theme] .glass,
html[data-theme] .card,
html[data-theme] .panel,
html[data-theme] .hero,
html[data-theme] .section,
html[data-theme] header,
html[data-theme] footer,
html[data-theme] .topbar,
html[data-theme] .navbar,
html[data-theme] .site-header,
html[data-theme] section,
html[data-theme] article,
html[data-theme] .story,
html[data-theme] .briefing,
html[data-theme] .metric-card,
html[data-theme] .route-card,
html[data-theme] .builder-output,
html[data-theme] .audience-cloud span,
html[data-theme] .story__media,
html[data-theme] .promo-banner,
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4, html[data-theme] h5,
html[data-theme] p, html[data-theme] li,
html[data-theme] .story__title,
html[data-theme] .story__excerpt,
html[data-theme] .story__meta,
html[data-theme] .section__head,
html[data-theme] .category-section,
html[data-theme] .archive-grid .story,
html[data-theme] .desk-list .story,
html[data-theme] .category-grid .story {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease;
}

/* ── Accessibility: 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;
  }
}

/* ── Accessibility: keyboard focus outlines ── */
:focus-visible {
  outline: 2px solid var(--ainna-accent, #667eea);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}