/**
 * ============================================================================
 * DESIGN TOKENS - Makeability Lab
 * ============================================================================
 *
 * This file is the single source of truth for all visual design values.
 * All colors, typography, spacing, and other design decisions are defined
 * here as CSS Custom Properties (variables).
 *
 * ACCESSIBILITY:
 *   All color combinations meet WCAG 2.1 AA standards:
 *   - Normal text (<18px): 4.5:1 minimum contrast
 *   - Large text (≥18px or ≥14px bold): 3:1 minimum contrast
 *   - UI components: 3:1 minimum contrast
 *
 * USAGE:
 *   1. Load this file FIRST, before all other stylesheets
 *   2. Reference values using: var(--token-name)
 *   3. Never use hardcoded colors in other CSS files
 *
 * BROWSER SUPPORT:
 *   CSS Custom Properties work in all modern browsers.
 *   Not supported in IE11 (but IE11 is end-of-life).
 *
 * @version 1.0.0
 * @see https://webaim.org/resources/contrastchecker/
 * ============================================================================
 */

:root {

  /* ==========================================================================
     COLORS - Brand
     ==========================================================================
     Primary blue derived from original Makeability Lab blue (#3797db),
     darkened to meet WCAG AA contrast requirements with white text.
     ========================================================================== */

  --color-primary: #1565A7;              /* 4.54:1 on white - AA ✓ */
  --color-primary-hover: #104d7a;        /* 7.28:1 on white - AAA ✓ */
  --color-primary-light: #e8f4fc;        /* For subtle backgrounds */


  /* ==========================================================================
     COLORS - Neutral
     ==========================================================================
     Gray scale with documented contrast ratios against white (#FFFFFF).
     Use these for text, borders, and backgrounds.
     ========================================================================== */

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Text colors - all meet 4.5:1 on white */
  --color-text-primary: #212121;         /* 16.1:1 - Main headings, body */
  --color-text-secondary: #595959;       /* 7.0:1  - Secondary text, meta */
  --color-text-muted: #757575;           /* 4.6:1  - Captions, hints */

  /* Text on dark backgrounds - all meet 4.5:1 on --color-primary */
  --color-text-on-dark: #FFFFFF;         /* 4.54:1 on primary */
  --color-text-on-dark-muted: #e0e0e0;   /* 3.6:1 on primary (large text only) */

  /* Border and divider colors */
  --color-border: #d0d0d0;               /* Subtle borders */
  --color-border-strong: #9e9e9e;        /* Emphasized borders */

  /* Background colors */
  --color-bg-page: #FFFFFF;              /* Main page background */
  --color-bg-surface: #f5f5f5;           /* Cards, raised surfaces */
  --color-bg-muted: #eeeeee;             /* Subtle differentiation */


  /* ==========================================================================
     COLORS - Semantic
     ==========================================================================
     Status colors for feedback, alerts, and indicators.
     All meet 4.5:1 contrast on white backgrounds.
     ========================================================================== */

  --color-success: #2e7d32;              /* 5.0:1 on white */
  --color-warning: #e65100;              /* 4.6:1 on white */
  --color-error: #c62828;                /* 5.9:1 on white */
  --color-info: var(--color-primary);


  /* ==========================================================================
     COLORS - Component-Specific
     ==========================================================================
     Semantic tokens for specific UI components. These reference the
     primitive colors above, making it easy to theme or adjust.
     ========================================================================== */

  /* Links */
  --color-link: #0d5a8c;                 /* 5.48:1 on white - AA ✓ */
  --color-link-hover: #083854;           /* 10.5:1 on white - AAA ✓ */
  --color-link-visited: #4a148c;         /* 8.57:1 on white - AAA ✓ */

  /* Footer */
  --color-footer-bg: var(--color-primary);
  --color-footer-text: var(--color-text-on-dark);
  --color-footer-link: var(--color-text-on-dark);
  --color-footer-link-hover: var(--color-text-on-dark-muted);
  --color-footer-affiliations-bg: var(--color-black);

  /* Navbar */
  --color-navbar-bg: rgba(0, 0, 0, 0.85);
  --color-navbar-text: var(--color-white);

  /* Publication badges */
  --color-badge-bg: #f0f0f0;
  --color-badge-text: #0d5a8c;           /* 5.0:1 on badge-bg - AA ✓ */
  --color-badge-text-hover: #083854;

  /* Awards */
  --color-award: #c25059;


  /* ==========================================================================
     TYPOGRAPHY
     ==========================================================================
     Font families, sizes, weights, and line heights.
     Sizes use rem for accessibility (respects user font preferences).
     ========================================================================== */

  /* Font Families */
  --font-family-primary: 'Raleway', -apple-system, BlinkMacSystemFont,
                         'Segoe UI', Roboto, sans-serif;
  --font-family-secondary: 'Roboto', -apple-system, BlinkMacSystemFont,
                           'Segoe UI', sans-serif;

  /* Font Sizes - Based on 16px root */
  --font-size-xxs: 0.625rem;             /* 10px */
  --font-size-xs: 0.75rem;               /* 12px */
  --font-size-sm: 0.875rem;              /* 14px */
  --font-size-base: 1rem;                /* 16px */
  --font-size-lg: 1.125rem;              /* 18px */
  --font-size-xl: 1.25rem;               /* 20px */
  --font-size-2xl: 1.5rem;               /* 24px */
  --font-size-3xl: 2rem;                 /* 32px */
  --font-size-4xl: 2.25rem;              /* 36px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;


  /* ==========================================================================
     SPACING
     ==========================================================================
     Consistent spacing scale based on 4px increments.
     Use for margins, padding, and gaps.
     ========================================================================== */

  --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 */


  /* ==========================================================================
     LAYOUT
     ==========================================================================
     Container widths and content constraints.
     ========================================================================== */

  --container-max-width: 1400px;
  --content-max-width: 65ch;             /* Optimal reading width */


  /* ==========================================================================
     BREAKPOINTS (Reference Only)
     ==========================================================================
     CSS custom properties cannot be used in media queries.
     These are documented here for reference; use the px values directly.

     --breakpoint-sm: 576px;     Small phones landscape
     --breakpoint-md: 768px;     Tablets
     --breakpoint-lg: 992px;     Desktops
     --breakpoint-xl: 1200px;    Large desktops
     ========================================================================== */


  /* ==========================================================================
     BORDERS & SHADOWS
     ========================================================================== */

  --border-radius-sm: 0.25rem;           /* 4px */
  --border-radius-md: 0.5rem;            /* 8px */
  --border-radius-lg: 0.75rem;           /* 12px */
  --border-radius-full: 9999px;          /* Pill shape */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);


  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;


  /* ==========================================================================
     FOCUS STATES (Accessibility)
     ==========================================================================
     Visible focus indicators for keyboard navigation.
     WCAG 2.4.7 requires focus to be visible.
     ========================================================================== */

  --focus-ring-color: var(--color-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* For use on dark backgrounds */
  --focus-ring-color-on-dark: var(--color-white);
}


/* ============================================================================
   GLOBAL FOCUS STYLES
   ============================================================================
   Apply consistent focus indicators to all interactive elements.
   These can be overridden for specific components as needed.
   ============================================================================ */

/**
 * Default focus ring for all focusable elements.
 */
:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/**
 * Remove outline for mouse users, keep for keyboard users.
 * :focus-visible is supported in all modern browsers.
 */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}


/* ============================================================================
   REDUCED MOTION
   ============================================================================
   Respect user preferences for reduced motion (WCAG 2.3.3).
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================================
   SKIP LINK
   ============================================================================
   Allows keyboard users to bypass navigation and jump to main content.
   Hidden by default, becomes visible when focused.
   WCAG 2.4.1: Bypass Blocks
   ============================================================================ */

.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-black);
  color: var(--color-white);
  padding: var(--space-3) var(--space-6);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  z-index: 10000;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
  outline: var(--focus-ring-width) solid var(--focus-ring-color-on-dark);
  outline-offset: var(--focus-ring-offset);
}


/* ============================================================================
   SCREEN READER ONLY
   ============================================================================
   Visually hide content while keeping it accessible to screen readers.
   Use for additional context that sighted users don't need.
   ============================================================================ */

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

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}