/*
Theme Name: Stem Cell Research & Regenerative Labs
Theme URI: https://stemcelllabs.in
Author: Stem Cell Research Lab Team
Author URI: https://stemcelllabs.in
Description: A premier, clinical-grade WordPress theme for stem cell therapy, cell harvest labs, regenerative medicine, and biotechnology platforms. Pixel-perfect reproduction of the Next.js production platform.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stemcelllabs
Tags: clinical-theme, responsive-layout, cleanroom, dark-mode, custom-colors, full-width-template
*/

/* ============================================================
   DESIGN TOKENS & SYSTEM VARIABLES (Mirrors Next.js tailwind/globals)
   ============================================================ */
:root {
  --brand-primary: #E02020;
  --brand-primary-hover: #c41a1a;
  --brand-primary-soft: #fbe9e9;
  --brand-secondary: #1070B0;
  --brand-secondary-hover: #0c5a8c;
  --brand-secondary-soft: #e6f1f8;
  --brand-accent: #0EA5A5;

  --background: #fafbfc;
  --foreground: #0a0e1a;

  --ink-950: #070A14;
  --ink-900: #0A0E1A;
  --ink-800: #141A2B;
  --ink-700: #1F2839;
  --ink-600: #2E3A52;
  --ink-500: #475569;
  --ink-400: #64748B;
  --ink-300: #94A3B8;
  --ink-200: #CBD5E1;
  --ink-100: #E2E8F0;
  --ink-50:  #F1F5F9;

  --mist: #F7F9FC;
  --mist-soft: #FAFBFC;
  --mist-card: #FFFFFF;

  --radius: 0.75rem;

  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ease-apple-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-scientific: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-soft: 0 1px 2px rgba(10,14,26,0.04), 0 1px 3px rgba(10,14,26,0.06);
  --shadow-card: 0 2px 8px rgba(10,14,26,0.05), 0 8px 24px rgba(10,14,26,0.06);
  --shadow-lift: 0 8px 24px rgba(10,14,26,0.08), 0 20px 48px rgba(10,14,26,0.10);
  --shadow-glow: 0 0 0 1px rgba(224,32,32,0.12), 0 8px 32px rgba(224,32,32,0.18);
}

/* ============================================================
   BASE RESET & TYPOGRAPHY
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: var(--ink-100);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--mist-soft);
  color: var(--ink-800);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  font-feature-settings: 'ss01', 'cv01', 'cv03';
  overflow-x: hidden;
}

::selection {
  background-color: rgba(224, 32, 32, 0.18);
  color: var(--ink-900);
}

:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
  border-radius: 6px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink-900);
  text-wrap: balance;
  letter-spacing: -0.022em;
  font-weight: 700;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Container */
.container {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  .container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* Accessible Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only:focus,
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}