/* AIVeNautics — Design Tokens
 * Source of truth for color, type, spacing, radius, shadow, breakpoint.
 * Extracted from Astro tailwind.config.mjs + src/styles/global.css.
 * Do not introduce inline colors anywhere else — reference variables only.
 */

:root {
  color-scheme: dark;

  /* ───────── Color ───────── */
  /* Deep navy family — backgrounds, footer, header */
  --c-navy-950: #06122E; /* page outermost / footer */
  --c-navy-900: #0A1A4A; /* primary background, header */
  --c-navy-800: #0D2157; /* card background */
  --c-navy-700: #122B6A; /* elevated card */

  /* Blue accents */
  --c-sky-500: #4FC3F7;     /* CTA primary, category labels, accent links */
  --c-marine-500: #1E50B4;  /* deep accent (NightNav With card) */

  /* Neutral on dark */
  --c-slatey-400: #8EA3C7;  /* body sub text, soft border */
  --c-slatey-500: #5A7099;  /* muted, placeholder, divider */

  /* On-light + utility */
  --c-white: #FFFFFF;
  --c-white-90: rgba(255, 255, 255, 0.90);
  --c-white-85: rgba(255, 255, 255, 0.85);
  --c-white-75: rgba(255, 255, 255, 0.75);
  --c-white-50: rgba(255, 255, 255, 0.50);
  --c-white-10: rgba(255, 255, 255, 0.10);
  --c-white-05: rgba(255, 255, 255, 0.05);
  --c-black: #000000;

  /* ───────── Typography ───────── */
  --font-sans: 'Inter', 'Pretendard', 'Noto Sans KR', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Display sizes — mobile-first; larger via @media (min-width:768px) below */
  --fs-display-xl: 44px;
  --fs-display-lg: 36px;
  --fs-display-md: 28px;
  --lh-display: 1.05;
  --ls-display: -0.02em;

  --fs-display-xl-lg: 72px;
  --fs-display-lg-lg: 56px;
  --fs-display-md-lg: 44px;

  --fs-label: 12px;
  --lh-label: 1.4;
  --ls-label: 0.15em;

  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-meta: 12px;
  --fs-meta-xs: 11px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ───────── Layout ───────── */
  --max-page: 1440px;
  --max-content: 1200px;
  --max-narrow: 880px;

  --h-header: 72px;

  --side-pad-sm: 24px;   /* mobile */
  --side-pad-md: 40px;   /* tablet */
  --side-pad-lg: 120px;  /* desktop */

  --section-py-sm: 64px;
  --section-py: 80px;
  --section-py-lg: 96px;
  --section-py-md: 112px;     /* md+ for section-py */
  --section-py-lg-md: 144px;  /* md+ for section-py-lg */

  /* ───────── Radius ───────── */
  --radius-card: 16px;
  --radius-card-lg: 24px;
  --radius-pill: 999px;
  --radius-sm: 8px;
  --radius-md: 12px;

  /* ───────── Shadow ───────── */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-pop: 0 20px 40px -10px rgba(6, 18, 46, 0.6);

  /* ───────── Motion ───────── */
  --tx-fast: 150ms;
  --tx-base: 200ms;
  --tx-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ───────── Z-index ───────── */
  --z-header: 50;
  --z-mobile-menu: 60;
  --z-skip-link: 100;
}

/* Desktop type ramp */
@media (min-width: 768px) {
  :root {
    --fs-display-xl: var(--fs-display-xl-lg);
    --fs-display-lg: var(--fs-display-lg-lg);
    --fs-display-md: var(--fs-display-md-lg);
  }
}