/*
 * RAKT Design System Tokens
 * Clinical-SaaS trust conventions
 * All values are CSS custom properties so Elementor global styles can reference them.
 */

:root {
  /* Primary palette — unified at #D0243C (5.25:1 on white, passes AA). */
  --rakt-primary: #D0243C;
  --rakt-primary-dark: #AF1B30;
  --rakt-primary-light: #FF6B6B;

  /* Accent / CTA */
  --rakt-accent: #1D3557;
  --rakt-accent-light: #457B9D;

  /* Neutrals */
  --rakt-white: #FFFFFF;
  --rakt-off-white: #F8F9FC;
  --rakt-gray-50: #F1F3F5;
  --rakt-gray-100: #E9ECEF;
  --rakt-gray-200: #DEE2E6;
  /* 3.32:1 on white: a hairline, divider or disabled-state grey, not a text one.
     It was carrying the blog archive's card meta, a post's date line and the
     "last updated" on every legal page, all of them under AA. Those now use
     --rakt-muted, which is the token for a caption. */
  --rakt-gray-400: #868E96;
  /* Was #5A6B80, which sat 17 RGB units from the #64748B used by the page
     builder for the same caption role — two greys for one job. */
  --rakt-gray-600: #64748B;
  --rakt-gray-800: #343A40;
  --rakt-gray-900: #212529;

  /* Semantic */
  --rakt-success: #2D9F5D;
  --rakt-warning: #F4A623;
  --rakt-info: #457B9D;

  /* Page-builder palette.
   *
   * These mirror the colour constants in build/lib.php, which is what actually
   * paints the pages. The scale above (gray-50 through gray-900) predates it and
   * is still used by the theme shell — header, footer, prose — so both exist.
   *
   * They are defined here because elementor-fixes.css was already writing
   * `var(--rakt-ink, #0B1220)` and `var(--rakt-muted, #64748B)` against tokens
   * that did not exist. Every one of those resolved to its fallback, so the
   * stylesheet read as though it referenced a design system while in practice
   * carrying nine hardcoded hexes. Now the references resolve, and changing a
   * value here changes it everywhere rather than in one of ten places. */
  --rakt-ink: #0B1220;          /* headings on light */
  --rakt-body: #475569;         /* body copy on light */
  --rakt-muted: #64748B;        /* captions on light */
  --rakt-line: #E3E8EF;         /* hairlines and card borders */
  --rakt-surface: #F7F9FC;      /* the tinted panel background */
  --rakt-on-dark: #CBD5E1;      /* body copy on ink */
  --rakt-on-dark-dim: #94A3B8;  /* captions on ink */
  --rakt-check: #0F7B4F;        /* semantic: a check that passed */

  /* Typography */
  --rakt-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rakt-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale (Major Third — 1.25) */
  /* 13.5px. Was 13px, itself raised from 12px to "meet min body" — but the floor
     the rest of the site is held to is 13.5, so this sat half a pixel under it and
     took the blog archive's card meta with it. The builder's scale and this one
     are two halves of one system; where they name the same step they have to
     agree. */
  --rakt-text-xs: 0.84375rem;
  --rakt-text-sm: 0.875rem;
  --rakt-text-base: 1rem;
  --rakt-text-lg: 1.125rem;
  --rakt-text-xl: 1.25rem;
  --rakt-text-2xl: 1.5rem;
  --rakt-text-3xl: 1.875rem;
  --rakt-text-4xl: 2.25rem;
  --rakt-text-5xl: 3rem;
  --rakt-text-6xl: 3.75rem;

  /* Spacing */
  --rakt-space-xs: 0.5rem;
  --rakt-space-sm: 1rem;
  --rakt-space-md: 1.5rem;
  --rakt-space-lg: 2rem;
  --rakt-space-xl: 3rem;
  --rakt-space-2xl: 4rem;
  --rakt-space-3xl: 6rem;
  --rakt-space-section: 5rem;

  /* Border radius */
  --rakt-radius-sm: 0.375rem;
  --rakt-radius-md: 0.5rem;
  --rakt-radius-lg: 0.75rem;
  --rakt-radius-xl: 1rem;
  --rakt-radius-full: 9999px;

  /* Shadows */
  --rakt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --rakt-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --rakt-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --rakt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --rakt-transition-fast: 150ms ease;
  --rakt-transition-base: 250ms ease;
  --rakt-transition-slow: 350ms ease;

  /* Container */
  --rakt-container-max: 1200px;
  --rakt-container-wide: 1400px;
}

/* Base resets for the theme shell */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--rakt-font-primary);
  font-size: var(--rakt-text-base);
  line-height: 1.6;
  color: var(--rakt-gray-900);
  background: var(--rakt-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--rakt-primary);
  text-decoration: none;
  transition: color var(--rakt-transition-fast);
}
a:hover {
  color: var(--rakt-primary-dark);
}

/* Utility classes for Elementor */
.rakt-container {
  max-width: var(--rakt-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rakt-space-sm);
  padding-right: var(--rakt-space-sm);
}

.rakt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--rakt-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--rakt-radius-full);
  background: var(--rakt-gray-50);
  color: var(--rakt-gray-600);
}

.rakt-badge--primary {
  background: rgba(208, 36, 60, 0.08);
  color: var(--rakt-primary);
}

.rakt-badge--accent {
  background: rgba(29, 53, 87, 0.08);
  color: var(--rakt-accent);
}

/* Skip-to-content link */
.rakt-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  font-size: var(--rakt-text-sm);
  font-weight: 600;
  color: var(--rakt-white);
  background: var(--rakt-primary);
  border-radius: 0 0 var(--rakt-radius-md) var(--rakt-radius-md);
  text-decoration: none;
}
.rakt-skip-link:focus {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  outline: 2px solid var(--rakt-primary);
  outline-offset: 2px;
}

/* Hide admin bar on front-end */
body.admin-bar #wpadminbar { display: none !important; }
body.admin-bar { margin-top: 0 !important; }

/* Minimum tap targets (WCAG 2.2 SC 2.5.8) */
@media (max-width: 768px) {
  .rakt-prose a,
  .page-numbers,
  .nav-links a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
}

/* Elementor overrides for consistent spacing */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--rakt-container-max);
}