/*
 * UI Polish - Universal Guardrails
 *
 * Systematic design system layer for Canon wireframes
 * Provides spacing, typography, contrast, hover states, and component base styles
 */

/* ================================
   SPACING SCALE SYSTEM
   ================================ */
:root {
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
}

/* ================================
   TYPOGRAPHY SCALE
   ================================ */
:root {
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 44px;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
}

/* Typography utility classes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* ================================
   DARK MODE CONTRAST FIXES
   ================================ */
body.dark-mode {
  /* Improved contrast ratios for WCAG AA compliance */
  --text-secondary: #b4b4bb;  /* Was #a1a1aa - now 4.6:1 ratio */
  --text-muted: #898991;      /* Was #71717a - now 3.8:1 */
}

/* Ensure sufficient contrast for all text in dark mode */
body.dark-mode .text-secondary {
  color: var(--text-secondary);
}

body.dark-mode .text-muted {
  color: var(--text-muted);
}

/* ================================
   CONSISTENT HOVER/FOCUS STATES
   ================================ */

/* Button hover states */
.btn,
.button,
.btn-primary,
.btn-secondary,
.btn-amber,
.btn-outline,
.btn-ghost,
.filter-btn,
.action-btn {
  transition: all 0.15s ease;
  position: relative;
}

.btn:hover,
.button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-amber:hover,
.filter-btn:hover,
.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.dark-mode .btn:hover,
body.dark-mode .button:hover,
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-amber:hover,
body.dark-mode .filter-btn:hover,
body.dark-mode .action-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-outline:hover,
.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

body.dark-mode .btn-outline:hover,
body.dark-mode .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Focus states for accessibility */
.btn:focus-visible,
.button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-amber:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible,
.filter-btn:focus-visible,
.action-btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Link hover states */
a:hover:not(.btn):not(.button):not(.btn-primary):not(.btn-secondary):not(.btn-amber):not(.btn-outline):not(.btn-ghost) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Table row hover states */
.table tr:hover td,
.data-table tr:hover td,
table tr:hover td {
  background: rgba(0, 0, 0, 0.03);
  transition: background 0.15s ease;
}

body.dark-mode .table tr:hover td,
body.dark-mode .data-table tr:hover td,
body.dark-mode table tr:hover td {
  background: #1f1f23;
}

/* Card hover states */
.card:hover,
.product-card:hover,
.link-card:hover,
.news-item:hover,
.profile-card:hover,
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
}

body.dark-mode .card:hover,
body.dark-mode .product-card:hover,
body.dark-mode .link-card:hover,
body.dark-mode .news-item:hover,
body.dark-mode .profile-card:hover,
body.dark-mode .stat-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Tab hover states */
.tab:hover,
.filter-tab:hover,
.nav-tab:hover {
  background: rgba(0, 0, 0, 0.05);
  transition: background 0.15s ease;
}

body.dark-mode .tab:hover,
body.dark-mode .filter-tab:hover,
body.dark-mode .nav-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Icon button hover states */
.icon-btn:hover,
.icon-button:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: scale(1.05);
  transition: all 0.15s ease;
}

body.dark-mode .icon-btn:hover,
body.dark-mode .icon-button:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ================================
   FOOTER COMPONENT
   ================================ */
.footer {
  background: var(--black);
  padding: var(--space-2xl) var(--space-lg);
  color: white;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer__logo-mark {
  width: 20px;
  height: 20px;
  background: var(--amber);
  border-radius: 4px;
}

.footer__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: white;
}

.footer__tagline {
  font-size: var(--text-xs);
  color: var(--zinc-600);
  margin-left: var(--space-md);
  padding-left: var(--space-md);
  border-left: 1px solid var(--zinc-800);
}

.footer__right {
  display: flex;
  gap: var(--space-lg);
}

.footer__link {
  font-size: var(--text-xs);
  color: var(--zinc-500);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer__link:hover {
  color: var(--amber);
  text-decoration: none;
}

/* ================================
   CARD BASE STYLES
   ================================ */
.card,
.product-card,
.link-card,
.news-item,
.profile-card,
.stat-card {
  background: white;
  border-radius: 12px;
  padding: var(--space-lg);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.dark-mode .card,
body.dark-mode .product-card,
body.dark-mode .link-card,
body.dark-mode .news-item,
body.dark-mode .profile-card,
body.dark-mode .stat-card {
  background: var(--zinc-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Card variants */
.card--elevated,
.card-elevated {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.dark-mode .card--elevated,
body.dark-mode .card-elevated {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.card--bordered,
.card-bordered {
  border: 1px solid var(--zinc-200);
  box-shadow: none;
}

body.dark-mode .card--bordered,
body.dark-mode .card-bordered {
  border-color: var(--zinc-800);
}

/* ================================
   TOUCH TARGET MINIMUM SIZES
   ================================ */

/* Ensure all interactive elements meet 44px minimum */
.btn,
.button,
.icon-btn,
.icon-button,
.filter-btn,
.action-btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Exception for compact UI where space is critical */
.btn--sm,
.btn-sm,
.icon-btn--sm,
.icon-btn-sm {
  min-height: 36px;
  min-width: 36px;
}

/* Exception for extra small inline buttons */
.btn--xs,
.btn-xs {
  min-height: 28px;
  min-width: 28px;
}

/* ================================
   SPACING UTILITIES
   ================================ */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }

.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }

.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }

.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }

.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }

.mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
.mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
.mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
.mx-3xl { margin-left: var(--space-3xl); margin-right: var(--space-3xl); }

.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }
.my-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }

/* ================================
   BORDER RADIUS UTILITIES
   ================================ */
:root {
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ================================
   SHADOW UTILITIES
   ================================ */
:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.12);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
}

body.dark-mode {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-elevated { box-shadow: var(--shadow-elevated); }
.shadow-none { box-shadow: none; }

/* ================================
   FORM INPUT IMPROVEMENTS
   ================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
  min-height: 44px;
  transition: all 0.15s ease;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
select:hover,
textarea:hover {
  border-color: var(--zinc-400);
}

body.dark-mode input[type="text"]:hover,
body.dark-mode input[type="email"]:hover,
body.dark-mode input[type="password"]:hover,
body.dark-mode input[type="search"]:hover,
body.dark-mode input[type="number"]:hover,
body.dark-mode input[type="tel"]:hover,
body.dark-mode input[type="url"]:hover,
body.dark-mode select:hover,
body.dark-mode textarea:hover {
  border-color: var(--zinc-600);
}

/* ================================
   CHECKBOX AND RADIO IMPROVEMENTS
   ================================ */
input[type="checkbox"],
input[type="radio"] {
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
}

/* Larger clickable area for checkboxes/radios */
input[type="checkbox"]::before,
input[type="radio"]::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
}

/* ================================
   LOADING AND SKELETON STATES
   ================================ */
.skeleton {
  background: linear-gradient(90deg, var(--zinc-200) 25%, var(--zinc-100) 50%, var(--zinc-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

body.dark-mode .skeleton {
  background: linear-gradient(90deg, var(--zinc-800) 25%, var(--zinc-900) 50%, var(--zinc-800) 75%);
  background-size: 200% 100%;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================================
   ACCESSIBILITY IMPROVEMENTS
   ================================ */

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--amber);
  color: var(--black);
  padding: var(--space-md);
  z-index: 10000;
  font-weight: var(--font-semibold);
}

.skip-to-main:focus {
  top: 0;
}

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

/* Focus visible for custom components */
.focus-ring:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ================================
   PRINT STYLES
   ================================ */
@media print {
  .no-print,
  .header,
  .sidebar,
  .nav,
  .footer {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .card,
  .product-card,
  .link-card {
    box-shadow: none !important;
    border: 1px solid #e4e4e7 !important;
  }
}