/* ========================================
   Fairy Life Sciences — Design Tokens
   Clinical Precision Aesthetic
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== COLOR SYSTEM ===== */
:root {
  /* Brand — Deep Sapphire */
  --brand-900: #0a1628;
  --brand-800: #0f2044;
  --brand-700: #1b3a6b;
  --brand-600: #2450a0;
  --brand-500: #3a73d4;
  --brand-400: #6b93e6;
  --brand-300: #a3bdf2;
  --brand-200: #d4e2f8;
  --brand-100: #eef3fc;

  /* Jewel — Emerald (fluorescent microscope accent) */
  --jewel-900: #022c16;
  --jewel-800: #044a26;
  --jewel-700: #067a3a;
  --jewel-600: #0da34d;
  --jewel-500: #10b981;
  --jewel-400: #3dd4a7;
  --jewel-300: #8ee6ca;
  --jewel-200: #c5f4e2;
  --jewel-100: #e8fcf5;

  /* Neutral — Clinical Bone & Titanium */
  --bone-50: #fafbfc;
  --bone-100: #f4f6f8;
  --bone-200: #e8ecf0;
  --bone-300: #d0d7de;
  --bone-400: #9ca3af;
  --titan-600: #6b7280;
  --titan-700: #4b5563;
  --titan-800: #374151;
  --titan-900: #1f2937;

  /* Semantic surfaces */
  --surface-page: var(--bone-50);
  --surface-elevate: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --surface-inset: rgba(0, 0, 0, 0.04);
  --ink: var(--brand-900);
  --text-primary: var(--titan-900);
  --text-secondary: var(--titan-700);
  --text-muted: var(--titan-600);
  --text-inverse: var(--bone-50);
  --border-subtle: var(--bone-200);
  --border-default: var(--bone-300);

  /* Accent — jewel on dark, brand on light */
  --accent: var(--jewel-500);
  --accent-hover: var(--jewel-400);
  --accent-muted: var(--jewel-100);
  --accent-foreground: var(--bone-50);

  /* Backward-compat aliases */
  --brand: var(--brand-700);
  --brand-600-alias: var(--brand-600);
  --page-accent: var(--brand-500);
  --accent-primary: var(--brand-500);
  --accent-secondary: var(--jewel-500);
  --text-main: var(--text-primary);
  --text-sub: var(--text-secondary);
  --text-tertiary: var(--text-muted);
  --bg-primary: var(--bone-50);
  --bg-secondary: var(--bone-100);
  --bg-accent: var(--bone-200);
  --bg-dark: var(--brand-900);
  --border-color: var(--border-subtle);

  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Fluid type scale */
  --text-display: clamp(3rem, 5vw, 6rem);    /* 48-96px */
  --text-h1: clamp(2.5rem, 4vw, 4.5rem);     /* 40-72px */
  --text-h2: clamp(2rem, 3vw, 3rem);          /* 32-48px */
  --text-h3: clamp(1.5rem, 2vw, 2rem);        /* 24-32px */
  --text-h4: clamp(1.25rem, 1.5vw, 1.5rem);  /* 20-24px */
  --text-body: 1rem;                           /* 16px */
  --text-lead: clamp(1.1rem, 1.2vw, 1.25rem);
  --text-small: 0.875rem;                      /* 14px */
  --text-xs: 0.75rem;                          /* 12px */
  --text-overline: 0.6875rem;                 /* 11px */

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight: -0.035em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.08em;
  --tracking-uc: 0.12em;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ===== SPACING ===== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ===== ELEVATION / SHADOW ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.14);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --ring-focus: 0 0 0 3px rgba(27, 58, 107, 0.18);
  --ring-brand: 0 0 0 3px rgba(58, 115, 212, 0.25);
  --ring-jewel: 0 0 0 3px rgba(16, 185, 129, 0.25);

  /* ===== EASING ===== */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* ===== DURATION ===== */
  --duration-instant: 50ms;
  --duration-fast: 120ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-reveal: 800ms;

  /* ===== Z-INDEX ===== */
  --z-base: 0;
  --z-elevate: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;

  /* ===== LAYOUT ===== */
  --container-max: 1400px;
  --container-narrow: 1000px;
  --container-text: 720px;
  --nav-height: 64px;
  --nav-height-compact: 56px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-full: 9999px;
}

/* ===== BACKWARD-COMPAT LEGACY NAMES ===== */
:root {
  /* nav.css legacy */
  --nav-height: var(--nav-height);
  --nav-shrink-height: var(--nav-height-compact);
  --glass-bg: var(--surface-glass);
  --glass-border: rgba(0, 0, 0, 0.06);
  --accent: var(--brand-500);
  --spring-easing: var(--ease-out);
  --bounce-easing: var(--ease-spring);

  /* footer.css legacy */
  --footer-bg: var(--bone-100);
  --footer-text: var(--text-primary);
  --footer-text-secondary: var(--text-secondary);
  --footer-text-muted: var(--text-muted);
  --footer-border: var(--border-subtle);
  --footer-accent: var(--brand-500);

  /* home.css legacy */
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);

  /* page.css legacy */
  --page-bg: var(--surface-page);
  --page-bg-secondary: var(--bone-100);
  --page-bg-dark: var(--brand-900);
  --page-text: var(--text-primary);
  --page-text-secondary: var(--text-secondary);
  --page-text-tertiary: var(--text-muted);
  --page-accent: var(--brand-500);
  --page-accent-dark: var(--brand-700);
  --page-border: var(--border-subtle);
  --page-ease: var(--ease-out-expo);
}