/**
 * Liverpool Dental CPD - Paragon Core Token Overrides
 *
 * Theme-agnostic structural tokens (typography, spacing, sizes).
 * NO color tokens in this file - colors are in liverpool-light-override.css
 *
 * Version: 2.0
 * Date: 2025-10-24
 * Based on: Liverpool Design Language + Paragon 23.14.9 Token Analysis
 * Paragon Version: 23.14.9
 * Generated by: Agent 7 (Core Override CSS Generator)
 *
 * Controls:
 * ✅ Typography (font families, sizes, weights, line heights)
 * ✅ Spacing (base unit and scale)
 * ✅ Border radius (buttons, cards, forms)
 * ✅ Component sizing (button padding, etc.)
 * ✅ Transitions (timing, easing)
 *
 * Does NOT Control (requires MFE CSS):
 * ❌ Colors (see liverpool-light-override.css)
 * ❌ Gradients
 * ❌ Box shadows
 * ❌ Transform effects
 * ❌ Letter spacing (Paragon has no tokens)
 */

/* ============================================================================
   TYPOGRAPHY SYSTEM
   Source: Liverpool Design Language typography tokens
   Priority: HIGH - Establishes Liverpool brand typography
   ============================================================================ */

:root {
  /* ============================================
     Font Families
     Impact: Replaces Paragon's system font stack with Liverpool's brand font
     Components Affected: All text elements across entire platform
     ============================================ */

  --pgn-typography-font-family-base: "Poppins", Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Note: Paragon doesn't have separate heading font family token.
     Headings will inherit from font-family-base automatically. */


  /* ============================================
     Base Font Size
     Impact: Liverpool uses 16px for academic readability vs Paragon's 18px
     Cascades to: Body text, form elements, buttons, default UI text
     ============================================ */

  --pgn-typography-font-size-base: 1rem; /* 16px - Liverpool's base vs Paragon's 1.125rem (18px) */


  /* ============================================
     Heading Font Sizes (Desktop)
     Impact: Liverpool uses a more generous heading scale for content scannability
     H1 and H2 match Paragon, but H3-H6 are larger for better hierarchy
     ============================================ */

  /* H1 - Matches Paragon default (2.5rem = 40px) */
  --pgn-typography-font-size-h1-base: 2.5rem; /* 40px - Liverpool matches Paragon */

  /* H2 - Matches Paragon default (2rem = 32px) */
  --pgn-typography-font-size-h2-base: 2rem; /* 32px - Liverpool matches Paragon */

  /* H3 - Liverpool override (28px vs Paragon's 22px) */
  --pgn-typography-font-size-h3-base: 1.75rem; /* 28px - Liverpool vs Paragon's 1.375rem (22px) */

  /* H4 - Liverpool override (24px vs Paragon's 18px) */
  --pgn-typography-font-size-h4-base: 1.5rem; /* 24px - Liverpool vs Paragon's 1.125rem (18px) */

  /* H5 - Liverpool override (20px vs Paragon's 14px) */
  --pgn-typography-font-size-h5-base: 1.25rem; /* 20px - Liverpool vs Paragon's 0.875rem (14px) */

  /* H6 - Liverpool override (16px vs Paragon's 12px) */
  --pgn-typography-font-size-h6-base: 1rem; /* 16px - Liverpool vs Paragon's 0.75rem (12px) */


  /* ============================================
     Mobile Font Sizes
     Impact: Responsive typography for mobile devices
     Liverpool H1 mobile: 36px (Paragon: 36px - matches)
     ============================================ */

  --pgn-typography-font-size-h1-mobile: 2.25rem; /* 36px - Liverpool matches Paragon's mobile size */

  /* Note: Paragon only has mobile overrides for H1 and Display-1.
     H2-H6 mobile scaling will need to be handled in MFE CSS media queries. */


  /* ============================================
     Font Weights
     Impact: Liverpool uses SemiBold (600) for headings and buttons
     Paragon has semi-bold (500) and bold (700), but no 600 weight
     ============================================ */

  /* Heading weight - Liverpool SemiBold (600) for H2-H6 */
  --pgn-typography-headings-font-weight: 600; /* Liverpool SemiBold vs Paragon's 700 (bold) */

  /* Button weight - Liverpool SemiBold (600) for button text */
  --pgn-typography-btn-font-weight: 600; /* Liverpool SemiBold vs Paragon's 400 (normal) */

  /* Note: H1 and Display headings will use bold (700) as per Liverpool design language.
     This is controlled by the --pgn-typography-font-weight-display-* tokens which default to bold. */


  /* ============================================
     Line Heights
     Impact: Liverpool's line heights are optimized for readability
     Base line height: 1.5 (24px at 16px base) vs Paragon's 1.5556 (28px at 18px base)
     ============================================ */

  --pgn-typography-line-height-base: 1.5; /* Liverpool's body text line height (24px at 16px base) */

  /* Note: Paragon doesn't have separate line-height tokens for headings.
     Liverpool's specific line-height values (1.2, 1.3, 1.4, 1.6) will need to be
     applied in MFE CSS for H1, H2-H3, H4-H5, and Body Large respectively. */
}


/* ============================================================================
   SPACING SYSTEM
   Source: Liverpool Design Language spacing scale (4px increments)
   Priority: HIGH - Establishes spatial rhythm
   ============================================================================ */

:root {
  /* ============================================
     Base Spacing Unit
     Impact: Paragon's spacer-base is 1rem (16px) which matches Liverpool's space-4
     Liverpool's spacing system aligns perfectly with Paragon's scale
     No override needed - Paragon default is correct
     ============================================ */

  --pgn-spacing-spacer-base: 1rem; /* 16px - Explicitly set for clarity (matches Paragon default) */

  /* Note: Paragon's spacer scale (0, 1, 1-5, 2, 2-5, 3, 3-5, 4, 4-5, 5, 5-5, 6)
     maps well to Liverpool's scale. Most Liverpool spacing values have direct
     Paragon equivalents. Liverpool's space-7 (40px), space-12 (96px), and
     space-16 (128px) will need to be defined as custom properties in MFE CSS. */
}


/* ============================================================================
   SIZE SYSTEM - Border Radius
   Source: Liverpool Design Language border radius tokens
   Priority: HIGH - Defines visual style (modern, friendly aesthetic)
   ============================================================================ */

:root {
  /* ============================================
     General Border Radius
     Impact: Liverpool uses much more generous rounding than Paragon
     Paragon philosophy: Subtle (6px base)
     Liverpool philosophy: Modern, friendly (16px base)
     ============================================ */

  /* Base border radius - Liverpool's standard rounding */
  --pgn-size-border-radius-base: 1rem; /* 16px - Liverpool's standard vs Paragon's 0.375rem (6px) */

  /* Large border radius - Liverpool's large container rounding */
  --pgn-size-border-radius-lg: 1.25rem; /* 20px - Liverpool's large vs Paragon's 0.425rem (6.8px) */

  /* Small border radius - Liverpool's small element rounding */
  --pgn-size-border-radius-sm: 0.5rem; /* 8px - Liverpool's small vs Paragon's 0.25rem (4px) */

  /* Pill shape - Already correct in Paragon (50rem for fully rounded) */
  --pgn-size-rounded-pill: 50rem; /* Fully rounded - Paragon default is correct */


  /* ============================================
     Component-Specific Border Radius
     Impact: Cascades Liverpool's friendly aesthetic to all components
     These tokens reference the base/lg/sm tokens above and inherit automatically,
     but we override specific components for Liverpool's design intent
     ============================================ */

  /* Buttons - Liverpool's signature pill-shaped buttons */
  --pgn-size-btn-border-radius-base: var(--pgn-size-rounded-pill); /* Pill shape - Liverpool's signature button style */
  --pgn-size-btn-border-radius-lg: var(--pgn-size-rounded-pill); /* Large buttons also pill-shaped */
  --pgn-size-btn-border-radius-sm: var(--pgn-size-rounded-pill); /* Small buttons also pill-shaped */

  /* Cards - Liverpool's standard container rounding */
  --pgn-size-card-border-radius-base: 1rem; /* 16px - Liverpool's card rounding */

  /* Form Inputs - Liverpool's subtle input rounding */
  --pgn-size-form-input-radius-border-base: 0.5rem; /* 8px - Liverpool's input rounding */
  --pgn-size-form-input-radius-border-lg: 0.5rem; /* 8px - Consistent across sizes */
  --pgn-size-form-input-radius-border-sm: 0.5rem; /* 8px - Consistent across sizes */

  /* Modals - Liverpool's standard container rounding */
  --pgn-size-modal-content-border-radius: 1rem; /* 16px - Liverpool's modal rounding */

  /* Tooltips - Liverpool's medium rounding for small floating elements */
  --pgn-size-tooltip-border-radius: 0.75rem; /* 12px - Liverpool's tooltip rounding */

  /* Badges - Liverpool's small element rounding */
  --pgn-size-badge-border-radius-base: 0.5rem; /* 8px - Liverpool's badge rounding */

  /* Navigation Pills - Liverpool's standard rounding */
  --pgn-size-nav-pills-border-radius: 1rem; /* 16px - Liverpool's nav pill rounding */

  /* Dropdowns - Liverpool's standard rounding */
  --pgn-size-dropdown-border-radius-base: 1rem; /* 16px - Liverpool's dropdown rounding */

  /* Popovers - Liverpool's standard rounding */
  --pgn-size-popover-border-radius: 1rem; /* 16px - Liverpool's popover rounding */

  /* Alerts - Liverpool's standard rounding */
  --pgn-size-alert-border-radius: 1rem; /* 16px - Liverpool's alert rounding */

  /* Note: Avatars use --pgn-size-avatar-border-radius: 100% (circular) in Paragon.
     This is correct for Liverpool as well (radius-circle: 50%). No override needed. */
}


/* ============================================================================
   BUTTON SIZING
   Source: Liverpool Design Language button specifications
   Priority: MEDIUM - Component polish
   ============================================================================ */

:root {
  /* ============================================
     Button Padding
     Impact: Liverpool buttons have generous horizontal padding (40px) for pill shape
     Paragon has spacing tokens but naming differs - research needed for exact tokens
     ============================================ */

  /* Note: Agent 5's mapping indicates Liverpool button padding is:
     - Vertical: 1rem (16px) - space-4
     - Horizontal: 2.5rem (40px) - space-7

     Paragon has component-specific spacing tokens but they're not clearly documented
     in Agent 1's token list. The exact token names for button padding may vary.

     If Paragon exposes --pgn-spacing-btn-padding-y and --pgn-spacing-btn-padding-x,
     override them here. Otherwise, button padding will need to be set in MFE CSS.

     Based on Agent 1's analysis, Paragon uses composite spacing tokens. We'll attempt
     to override what's available and document what needs MFE CSS. */

  /* Attempt to override button padding if tokens exist */
  /* --pgn-spacing-btn-padding-y: 1rem; */ /* 16px vertical - May not exist in Paragon */
  /* --pgn-spacing-btn-padding-x: 2.5rem; */ /* 40px horizontal - May not exist in Paragon */

  /* Note: If the above tokens don't work, button padding will need to be set in MFE CSS:
     .btn, button.btn {
       padding: 1rem 2.5rem;
     }
  */

  /* Button Focus Width - Liverpool uses 2px focus rings */
  --pgn-size-btn-focus-width: 2px; /* Liverpool's focus ring width (matches Paragon default) */

  /* Button Border Width - Liverpool uses 2px borders for emphasis */
  --pgn-size-btn-border-width: 2px; /* Liverpool's button border width vs Paragon's 1px */
}


/* ============================================================================
   CARD SIZING
   Source: Liverpool Design Language card specifications
   Priority: MEDIUM - Component polish
   ============================================================================ */

:root {
  /* ============================================
     Card Padding
     Impact: Liverpool cards have generous internal spacing (32px all sides)
     Paragon has card spacing tokens - override for Liverpool's breathing room
     ============================================ */

  /* Note: Similar to buttons, Paragon has card spacing tokens but exact names unclear.
     Based on Agent 1's analysis, Paragon uses --pgn-spacing-card-* tokens.
     We'll document the Liverpool value here and note that MFE CSS may be needed. */

  /* Liverpool card padding: space-6 (32px) all sides */
  /* This will likely need to be set in MFE CSS as:
     .card, .pgn__card {
       padding: 2rem; // 32px
     }
  */
}


/* ============================================================================
   FORM CONTROL SIZING
   Source: Liverpool Design Language form specifications
   Priority: MEDIUM - Component polish
   ============================================================================ */

:root {
  /* ============================================
     Form Input Padding
     Impact: Liverpool inputs have comfortable padding for accessibility
     Vertical: 0.75rem (12px) - space-3
     Horizontal: 1rem (16px) - space-4
     ============================================ */

  /* Note: Paragon has extensive form control tokens (49+ size tokens per Agent 1).
     Exact padding token names need verification. Liverpool values noted for MFE CSS. */

  /* Liverpool form input padding:
     - Vertical: space-3 (12px)
     - Horizontal: space-4 (16px)

     MFE CSS may need:
     .form-control, input.form-control, textarea.form-control {
       padding: 0.75rem 1rem;
     }
  */
}


/* ============================================================================
   TRANSITION SYSTEM
   Source: Liverpool Design Language interaction standards
   Priority: MEDIUM - Subtle refinement
   ============================================================================ */

:root {
  /* ============================================
     Transition Durations
     Impact: Liverpool uses 300ms standard transitions vs Paragon's 200ms
     Creates slightly more deliberate, professional interactions
     ============================================ */

  /* Base transition duration - Liverpool's standard timing */
  --pgn-transition-base-duration: 0.3s; /* 300ms - Liverpool vs Paragon's 0.2s (200ms) */

  /* Fade transition duration - Liverpool matches Paragon for quick fades */
  --pgn-transition-fade-duration: 0.15s; /* 150ms - Liverpool matches Paragon (no override needed, but explicit) */


  /* ============================================
     Transition Easing
     Impact: Liverpool uses custom cubic-bezier for smooth motion
     Paragon uses ease-in-out, Liverpool specifies cubic-bezier(0.4, 0, 0.2, 1)
     ============================================ */

  /* Base easing function - Liverpool's custom easing for smooth bidirectional motion */
  --pgn-transition-base-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Liverpool's easing-in-out */

  /* Note: Paragon's default is 'ease-in-out' which is close but Liverpool specifies
     a custom cubic-bezier for more refined control. This override ensures Liverpool's
     precise timing across all standard transitions. */
}


/* ============================================================================
   NOTES & DOCUMENTATION
   ============================================================================ */

/*
 * IMPORTANT: This file contains ONLY structural tokens that can be overridden
 * via Paragon's --pgn-* CSS custom properties. It does NOT include:
 *
 * - Colors (those are in liverpool-light-override.css)
 * - Letter spacing (Paragon has no tokens; apply in MFE CSS)
 * - Shadows (Paragon has component-specific only; define scale in MFE CSS)
 * - Gradients (not tokenizable; define in MFE CSS)
 * - Transform effects (not tokenizable; define in MFE CSS)
 *
 * PARAGON VERSION: 23.14.9
 * All token names verified against Paragon CDN CSS analysis (Agent 1).
 *
 * WHAT THIS FILE CONTROLS:
 * ✅ Typography (font family, sizes, weights, line heights)
 * ✅ Border radius (base scale + component-specific)
 * ✅ Button border radius (pill shape)
 * ✅ Transitions (duration and easing)
 * ✅ Spacing (base unit)
 *
 * WHAT REQUIRES MFE CSS:
 * ❌ Letter spacing for Display, H1, H2, Buttons, Counter, Overline
 * ❌ Liverpool shadow scale (shadow-xs through shadow-xl)
 * ❌ Liverpool custom spacing (space-7: 40px, space-12: 96px, space-16: 128px)
 * ❌ Button padding (1rem × 2.5rem) - if Paragon tokens don't work
 * ❌ Card padding (2rem all sides)
 * ❌ Form input padding (0.75rem × 1rem)
 * ❌ Mobile typography scaling for H2-H6 (media queries)
 * ❌ Custom line heights (1.2, 1.3, 1.4, 1.6) for specific elements
 * ❌ Text transform (uppercase for buttons and overlines)
 * ❌ Gradients (primary, navy, decorative)
 * ❌ Box shadows (elevation system and colored shadows)
 * ❌ Hover transforms (scale, translate)
 * ❌ Backdrop filters (glassmorphism)
 *
 * TESTING CHECKLIST:
 * After loading this file, verify:
 * 1. ✅ Typography uses Poppins font family
 * 2. ✅ Body text is 16px (not 18px)
 * 3. ✅ Headings use correct sizes (H1: 40px, H2: 32px, H3: 28px, H4: 24px, H5: 20px, H6: 16px)
 * 4. ✅ Headings use SemiBold weight (600)
 * 5. ✅ Buttons have pill-shaped border radius (50px)
 * 6. ✅ Cards have 16px border radius
 * 7. ✅ Form inputs have 8px border radius
 * 8. ✅ Transitions feel slightly slower (300ms vs 200ms)
 * 9. ✅ Overall UI has Liverpool's modern, friendly aesthetic
 *
 * MAINTENANCE:
 * When updating Paragon version:
 * 1. Run Agent 1's token extraction methodology on new Paragon version
 * 2. Compare token names against this file
 * 3. Verify no breaking changes to token structure
 * 4. Test all overrides still work as expected
 * 5. Update version number in header
 *
 * NEXT STEPS:
 * After loading liverpool-core-override.css:
 * 1. Load liverpool-light-override.css for color overrides
 * 2. Load MFE-specific CSS (liverpool-learning.css, etc.) for enhancements
 * 3. Test across all MFEs (Learning, Authoring, Gradebook, Account, Profile)
 * 4. Validate WCAG AA accessibility compliance
 * 5. Gather stakeholder feedback and iterate
 */