/**
 * Fitness Tools & Redbox Fitness Theme — Design Tokens
 * WCAG 2.2 Level AAA Compliant Token Definitions
 * 
 * Standards Adhered:
 * - SC 1.4.6 Contrast (Enhanced, AAA): Text >= 7:1, Large Text >= 4.5:1
 * - SC 1.4.11 Non-text Contrast (AA): UI boundaries >= 3:1
 * - SC 2.4.13 Focus Appearance (AAA): Perimeter >= 2px, contrast >= 3:1
 * - SC 2.5.5 Target Size (Enhanced, AAA): Controls >= 44x44 CSS px
 * - SC 1.4.8 Visual Presentation (AAA): Measure <= 80ch, line-height >= 1.5
 * - SC 1.4.12 Text Spacing: Letter, word, and paragraph spacing tolerance
 */

:root {
  /* ========================================================================
     Core Design Tokens — Light Theme (Default Surface: #ffffff / #f8f9fa)
     All text contrast ratios are >= 7.0:1 against designated surfaces.
     ======================================================================== */
  --ft-bg: #ffffff;
  --ft-text: #212529;
  --ft-text-muted: #545454;
  --ft-border: #767676;
  --ft-accent: #9e2732;
  --ft-accent-contrast: #ffffff;
  --ft-surface: #f8f9fa;

  /* Aliases & Semantic Extensions */
  --ft-color-bg: var(--ft-bg);
  --ft-color-bg-alt: var(--ft-surface);
  --ft-color-bg-subtle: #f1f3f5;

  /* Typography / Text (Measured >= 7:1) */
  --ft-color-text: var(--ft-text);             /* 15.43:1 on #ffffff; 14.63:1 on #f8f9fa */
  --ft-color-text-muted: var(--ft-text-muted); /* 7.57:1 on #ffffff; 7.18:1 on #f8f9fa */
  --ft-color-text-inverse: var(--ft-accent-contrast);

  /* Component Boundaries / Borders (Measured >= 3:1) */
  --ft-color-border: var(--ft-border);         /* 4.54:1 on #ffffff; 4.31:1 on #f8f9fa */
  --ft-color-border-subtle: #8c8c8c;           /* 3.51:1 on #ffffff; 3.33:1 on #f8f9fa */

  /* Brand Accent & Links (Redbox Red, Measured >= 7:1) */
  --ft-color-accent: var(--ft-accent);         /* 7.53:1 on #ffffff; 7.14:1 on #f8f9fa */
  --ft-color-accent-hover: #851f28;            /* 9.64:1 on #ffffff; 9.14:1 on #f8f9fa */
  --ft-color-accent-active: #721921;           /* 11.58:1 on #ffffff; 10.98:1 on #f8f9fa */
  --ft-color-accent-text: var(--ft-accent-contrast); /* 7.53:1 on #9e2732 */
  --ft-color-primary: var(--ft-accent);

  /* Focus Indicator (SC 2.4.13 Focus Appearance AAA) */
  --ft-color-focus: #005fcc;                   /* 5.98:1 on #ffffff; 5.68:1 on #f8f9fa */
  --ft-focus-ring-width: 3px;                  /* >= 2px thickness requirement */
  --ft-focus-ring-offset: 2px;                 /* Clear separation from component border */

  /* Feedback & State Colors (Measured >= 7:1) */
  --ft-color-danger: #8b0000;
  --ft-color-danger-bg: #fdf2f2;
  --ft-color-danger-border: #8b0000;

  --ft-color-success: #116130;
  --ft-color-success-bg: #f0f9f2;
  --ft-color-success-border: #116130;

  --ft-color-warning: #5c4400;
  --ft-color-warning-bg: #fffdf0;

  /* ========================================================================
     Layout, Sizing & Ergonomics Tokens (SC 2.5.5, SC 1.4.8)
     ======================================================================== */
  --ft-target-min: 44px;                 /* SC 2.5.5 Target Size Enhanced (AAA) */
  --ft-measure-max: 75ch;                /* SC 1.4.8 Visual Presentation (<= 80ch) */
  --ft-line-height: 1.5;                 /* SC 1.4.8 Visual Presentation (>= 1.5) */
  --ft-line-height-heading: 1.25;

  /* Spacing Scale (8-point grid compatible) */
  --ft-space-2xs: 0.25rem;              /* 4px */
  --ft-space-xs: 0.5rem;                /* 8px */
  --ft-space-sm: 0.75rem;               /* 12px */
  --ft-space-md: 1rem;                  /* 16px */
  --ft-space-lg: 1.5rem;                /* 24px */
  --ft-space-xl: 2rem;                  /* 32px */
  --ft-space-2xl: 3rem;                 /* 48px */

  /* Radius & Shadows */
  --ft-radius-sm: 4px;
  --ft-radius-md: 6px;
  --ft-radius-lg: 8px;
  --ft-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --ft-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

  /* Typography Sizes (rem-based for 200% zoom reflow) */
  --ft-font-size-xs: 0.8125rem;         /* 13px */
  --ft-font-size-sm: 0.875rem;          /* 14px */
  --ft-font-size-base: 1rem;            /* 16px */
  --ft-font-size-lg: 1.125rem;          /* 18px */
  --ft-font-size-xl: 1.25rem;           /* 20px */
  --ft-font-size-2xl: 1.5rem;           /* 24px - Large text threshold */
  --ft-font-size-3xl: 1.875rem;         /* 30px */

  /* Transitions (disabled under prefers-reduced-motion) */
  --ft-transition-fast: 150ms ease-in-out;
  --ft-transition-normal: 250ms ease-in-out;

  color-scheme: light;
}

[data-theme="dark"] {
  /* ========================================================================
     Core Design Tokens — Dark Theme
     WCAG 2.2 AAA Measured:
     - Text on Bg: 15.29:1 (>= 7:1)
     - Text on Surface: 13.61:1 (>= 7:1)
     - Text Muted on Bg: 7.88:1 (>= 7:1)
     - Text Muted on Surface: 7.01:1 (>= 7:1)
     - Border on Bg: 3.67:1 (>= 3:1)
     - Accent on Bg: 7.92:1 (>= 7:1)
     - Accent on Surface: 7.04:1 (>= 7:1)
     - Accent Contrast on Accent: 7.92:1 (>= 7:1)
     ======================================================================== */
  --ft-bg: #121212;
  --ft-text: #e8e8e8;
  --ft-text-muted: #a8a8a8;
  --ft-border: #6e6e6e;
  --ft-accent: #ff8298;
  --ft-accent-contrast: #121212;
  --ft-surface: #1e1e1e;

  /* Semantic Mappings in Dark Mode */
  --ft-color-bg: var(--ft-bg);
  --ft-color-bg-alt: var(--ft-surface);
  --ft-color-bg-subtle: #242424;

  --ft-color-text: var(--ft-text);
  --ft-color-text-muted: var(--ft-text-muted);
  --ft-color-text-inverse: #121212;

  --ft-color-border: var(--ft-border);
  --ft-color-border-subtle: #4a4a4a;

  --ft-color-accent: var(--ft-accent);
  --ft-color-accent-hover: #ff9db0;
  --ft-color-accent-active: #ffb8c7;
  --ft-color-accent-text: var(--ft-accent-contrast);
  --ft-color-primary: var(--ft-accent);

  --ft-color-focus: #7cc4fa;

  --ft-color-danger: #ff8577;
  --ft-color-danger-bg: #2a1515;
  --ft-color-danger-border: #ff8577;

  --ft-color-success: #6ee7b7;
  --ft-color-success-bg: #13281c;
  --ft-color-success-border: #6ee7b7;

  --ft-color-warning: #fde047;
  --ft-color-warning-bg: #2b2610;

  color-scheme: dark;
}


/* ==========================================================================
   Reduced Motion (SC 2.2.3, SC 2.3.3)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ft-transition-fast: 0s;
    --ft-transition-normal: 0s;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Forced Colors Mode / Windows High Contrast (SC 1.4.6, SC 2.4.13)
   ========================================================================== */
@media (forced-colors: active) {
  :root {
    --ft-color-focus: Highlight;
    --ft-color-accent: LinkText;
    --ft-color-border: ButtonBorder;
    --ft-color-text: CanvasText;
    --ft-color-bg: Canvas;
  }
}

/* ==========================================================================
   Shared Global Focus Appearance Utility (SC 2.4.13 AAA)
   ========================================================================== */
:focus-visible {
  outline: var(--ft-focus-ring-width) solid var(--ft-color-focus) !important;
  outline-offset: var(--ft-focus-ring-offset) !important;
  box-shadow: 0 0 0 calc(var(--ft-focus-ring-offset) + 1px) var(--ft-color-bg) !important;
}

/* Target sizing utility for interactive controls (SC 2.5.5 AAA >= 44x44px) */
.ft-target-min,
button,
[type="button"],
[type="submit"],
[type="reset"],
.btn,
.navbar-toggler,
.page-link,
.search-submit {
  min-height: var(--ft-target-min, 44px);
  min-width: var(--ft-target-min, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Remediation Layer: Contrast Tokens Enforcement (SC 1.4.6 AAA >= 7:1)
   ========================================================================== */

/* Button contrast */
.btn-primary,
.btn-danger,
.search-submit,
input[type="submit"] {
  background-color: var(--ft-color-accent, #9e2732) !important;
  border-color: var(--ft-color-accent, #9e2732) !important;
  color: var(--ft-color-accent-text, #ffffff) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-danger:hover,
.btn-danger:focus,
.search-submit:hover,
.search-submit:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: var(--ft-color-accent-hover, #851f28) !important;
  border-color: var(--ft-color-accent-hover, #851f28) !important;
  color: var(--ft-color-accent-text, #ffffff) !important;
}

.btn-outline-danger {
  color: var(--ft-color-accent, #9e2732) !important;
  border-color: var(--ft-color-accent, #9e2732) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--ft-color-accent, #9e2732) !important;
  border-color: var(--ft-color-accent, #9e2732) !important;
  color: var(--ft-color-accent-text, #ffffff) !important;
}

/* Form fields & placeholders */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select,
.form-control {
  color: var(--ft-color-text, #212529) !important;
  border: 1px solid var(--ft-color-border, #767676) !important;
  min-height: var(--ft-target-min, 44px);
}

input::placeholder,
textarea::placeholder,
.search-field::placeholder {
  color: var(--ft-color-text-muted, #545454) !important;
  opacity: 1 !important;
}

/* Muted text & secondary metadata links */
.text-muted,
.entry-meta,
.entry-meta a,
.posted-on,
.posted-on a,
.byline,
.byline a,
.cat-links,
.cat-links a,
.tags-links,
.tags-links a,
.comments-link,
.comments-link a,
.footer-widget,
.footer-widget p,
.rf-breadcrumbs,
.rf-breadcrumbs a {
  color: var(--ft-color-text-muted, #545454) !important;
}

/* High contrast links & non-color distinction (SC 1.4.1) */
a {
  color: var(--ft-color-accent, #9e2732);
}

a:hover,
a:focus {
  color: var(--ft-color-accent-hover, #851f28);
}

.entry-content a,
.entry-summary a,
.card-body a,
.widget a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Accessible code elements (replaces Bootstrap 4 #e83e8c pink at 3.81:1) */
code,
kbd,
pre,
samp {
  color: var(--ft-color-accent, #9e2732) !important;
  background-color: var(--ft-color-bg-subtle, #f1f3f5) !important;
  padding: 0.15em 0.35em;
  border-radius: var(--ft-radius-sm, 4px);
  font-size: 0.9em;
}

/* High contrast navigation active links */
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link,
.navbar .nav-link[aria-current="page"] {
  color: var(--ft-color-accent, #9e2732) !important;
  font-weight: 700;
}

/* ==========================================================================
   Focus Not Obscured under Fixed Header (SC 2.4.12 AAA)
   ========================================================================== */
html {
  scroll-padding-top: 80px;
}
:target {
  scroll-margin-top: 80px;
}

/* Accessible utility overrides for Bootstrap alert and theme elements */
.bg-danger {
  background-color: var(--ft-color-accent, #9e2732) !important;
}

.text-danger {
  color: var(--ft-color-accent, #9e2732) !important;
}

.badge-danger {
  background-color: var(--ft-color-accent, #9e2732) !important;
  color: var(--ft-color-accent-text, #ffffff) !important;
}

.badge-secondary {
  background-color: var(--ft-color-text-muted, #545454) !important;
  color: #ffffff !important;
}

.text-danger {
  color: var(--ft-color-accent, #9e2732) !important;
}

.border-danger {
  border-color: var(--ft-color-accent, #9e2732) !important;
}

.bg-info,
.badge-info,
.btn-info {
  background-color: var(--ft-accent) !important;
  border-color: var(--ft-accent) !important;
  color: var(--ft-accent-contrast) !important;
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--ft-accent) !important;
  border-color: var(--ft-accent) !important;
  color: var(--ft-accent-contrast) !important;
}

.text-info {
  color: var(--ft-accent) !important;
}

.border-info {
  border-color: var(--ft-accent) !important;
}

.card.bg-info .card-header,
.card-header.bg-info {
  background-color: var(--ft-accent) !important;
  color: var(--ft-accent-contrast) !important;
}

/* ==========================================================================
   Screen Reader Utility (SC 1.3.1, SC 3.3.2)
   ========================================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--ft-color-bg, #ffffff) !important;
  border-radius: var(--ft-radius-sm, 4px);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none !important;
  color: var(--ft-color-text, #212529) !important;
  display: block;
  font-size: var(--ft-font-size-sm, 0.875rem);
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}