/* ==========================================================================
   3v.to - Shared Styles (RDS Token Aligned)
   ========================================================================== */

/* Geist Font - TODO: Replace with Proctorio CDN once uploaded */
@import url('https://cdn.vercel.com/geist/font/sans/geist-sans.css');

/* --------------------------------------------------------------------------
   CSS Variables / Design Tokens — Aligned to RDS (Proctorio Design System)
   -------------------------------------------------------------------------- */
:root {
  /* ═══════════════════════════════════════════════════════════════════════
     SYSTEM COLORS (theme-aware primitives)
     ═══════════════════════════════════════════════════════════════════════ */

  /* Base */
  --system-base-white: #FFFFFF;
  --system-base-black: #000000;

  /* Slate Scale */
  --system-slate-50: #F8FAFC;
  --system-slate-100: #EFF2F6;
  --system-slate-200: #E3E8ED;
  --system-slate-300: #CDD4DC;
  --system-slate-400: #9AA6B4;
  --system-slate-500: #6A7789;
  --system-slate-600: #4A5666;
  --system-slate-700: #374250;
  --system-slate-800: #262D35;
  --system-slate-900: #181D24;

  /* Green Scale */
  --system-green-50: #EFFDF2;
  --system-green-100: #D3FDDD;
  --system-green-200: #B7F4C9;
  --system-green-300: #82EAA3;
  --system-green-400: #4DDA7A;
  --system-green-500: #20BC59;
  --system-green-600: #159944;
  --system-green-700: #137638;
  --system-green-800: #166534;
  --system-green-900: #124A28;

  /* Red Scale */
  --system-red-50: #FEF2F2;
  --system-red-100: #FEE2E2;
  --system-red-200: #FECACA;
  --system-red-400: #F87171;
  --system-red-500: #EF4444;
  --system-red-600: #DC2626;
  --system-red-700: #B91C1C;
  --system-red-800: #991B1B;

  /* Blue Scale */
  --system-blue-50: #EFF6FF;
  --system-blue-100: #DBEAFE;
  --system-blue-200: #BFDBFE;
  --system-blue-500: #3B82F6;
  --system-blue-600: #2563EB;
  --system-blue-700: #1D4ED8;

  /* Yellow Scale */
  --system-yellow-200: #FDE68A;
  --system-yellow-400: #FBBF24;
  --system-yellow-500: #F59E0B;
  --system-yellow-700: #B45309;

  /* Alpha Colors */
  --alpha-slate-45: rgba(106, 119, 137, 0.45);
  --alpha-slate-40: rgba(106, 119, 137, 0.4);
  --alpha-slate-30: rgba(106, 119, 137, 0.3);
  --alpha-slate-25: rgba(106, 119, 137, 0.25);
  --alpha-slate-20: rgba(106, 119, 137, 0.2);

  /* Semantic Background - Default Button States */
  --background-default-default: var(--alpha-slate-20);
  --background-default-hover: var(--alpha-slate-30);
  --background-default-pressed: var(--alpha-slate-45);
  --background-disabled: var(--system-slate-200);

  /* Semantic Background - Primary Button States (Inverse) */
  --background-default-inverse-default: var(--system-slate-700);
  --background-default-inverse-hover: var(--system-slate-800);
  --background-default-inverse-pressed: var(--system-slate-900);

  /* ═══════════════════════════════════════════════════════════════════════
     BACKGROUND
     ═══════════════════════════════════════════════════════════════════════ */

  /* Surface */
  --background-surface-base: var(--system-slate-100);
  --background-surface-primary: var(--system-slate-50);
  --background-surface-secondary: var(--system-base-white);

  /* Primary Inverse (for badges, etc.) */
  --background-primary-inverse-default: var(--system-slate-200);

  /* Container */
  --background-container-base: var(--system-base-white);
  --background-container-secondary: var(--system-slate-100);

  /* Success */
  --background-success-default: var(--system-green-700);
  --background-success-hover: var(--system-green-800);
  --background-success-pressed: var(--system-green-900);

  /* Info */
  --background-info-default: var(--system-blue-700);

  /* Warning */
  --background-warning-default: var(--system-yellow-400);

  /* Danger */
  --background-danger-default: var(--system-red-700);

  /* Featured Icon - fixed/low (inverse) backgrounds */
  --background-fixed-low-success: var(--system-green-200);
  --background-fixed-low-info: var(--system-blue-200);
  --background-fixed-low-warning: var(--system-yellow-200);

  /* ═══════════════════════════════════════════════════════════════════════
     TEXT
     ═══════════════════════════════════════════════════════════════════════ */

  --text-default: var(--system-slate-900);
  --text-primary: var(--system-slate-700);
  --text-caption: var(--system-slate-600);
  --text-disabled: var(--system-slate-400);
  --text-success: var(--system-green-700);
  --text-danger: var(--system-red-700);
  --text-info: var(--system-blue-700);
  --text-warning: var(--system-yellow-700);
  --text-inverse-default: var(--system-base-white);

  /* ═══════════════════════════════════════════════════════════════════════
     ICON
     ═══════════════════════════════════════════════════════════════════════ */

  --icon-default: var(--system-slate-900);
  --icon-base: var(--system-base-white);
  --icon-disabled: var(--system-slate-400);
  --icon-success: var(--system-green-700);
  --icon-warning: var(--system-yellow-700);
  --icon-info: var(--system-blue-700);

  /* ═══════════════════════════════════════════════════════════════════════
     BORDER
     ═══════════════════════════════════════════════════════════════════════ */

  --border-default: var(--alpha-slate-40);
  --border-secondary: var(--alpha-slate-25);
  --border-danger: var(--system-red-700);

  /* ═══════════════════════════════════════════════════════════════════════
     HIGHLIGHT (custom)
     ═══════════════════════════════════════════════════════════════════════ */

  --highlight-light-green: var(--system-green-200);

  /* ═══════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════════════ */

  /* Font Family */
  /* TODO: Replace Vercel CDN with Proctorio CDN once Geist font is uploaded */
  --font-family-sans-serif: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes (rem) */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */

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

  /* Line Heights (unitless) */
  --line-height-2xs: 1;
  --line-height-xs: 1.2;
  --line-height-sm: 1.25;
  --line-height-base: 1.33;
  --line-height-m: 1.5;
  --line-height-md: 1.625;
  --line-height-lg: 2;

  /* Letter Spacing */
  --letter-spacing-display: -0.03em;
  --letter-spacing-heading-xl: -0.025em;
  --letter-spacing-heading-lg: -0.02em;
  --letter-spacing-heading-md: -0.015em;
  --letter-spacing-body: 0em;

  /* ═══════════════════════════════════════════════════════════════════════
     SPACING
     ═══════════════════════════════════════════════════════════════════════ */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-104: 104px;

  /* ═══════════════════════════════════════════════════════════════════════
     BORDERS
     ═══════════════════════════════════════════════════════════════════════ */

  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-default: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-round: 9999px;

  /* Semantic Radius */
  --radius-button: var(--radius-xs);
  --radius-input: var(--radius-xs);
  --radius-card: var(--radius-lg);
  --radius-card-sm: var(--radius-default);
  --radius-chip: var(--radius-round);

  /* Stroke Width */
  --stroke-xs: 1px;
  --stroke-sm: 2px;
  --stroke-md: 3px;
  --stroke-lg: 4px;

  /* ═══════════════════════════════════════════════════════════════════════
     EFFECTS
     ═══════════════════════════════════════════════════════════════════════ */

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(40, 40, 40, 0.08), 0 1px 2px rgba(40, 40, 40, 0.05);
  --shadow-md: 0 4px 8px rgba(40, 40, 40, 0.1), 0 2px 4px rgba(40, 40, 40, 0.05);

  /* Opacity */
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-85: 0.85;

  /* Z-Index */
  --z-index-dropdown: 1;
  --z-index-sticky: 50;
  --z-index-fixed: 100;
  --z-index-overlay: 200;
  --z-index-toast: 1000;
  --z-index-modal: 9999;

  /* Focus */
  --focus-ring: 2px solid var(--system-slate-800);
  --focus-ring-offset: 2px;
}

/* --------------------------------------------------------------------------
   Screen Reader Only (Visually Hidden)
   -------------------------------------------------------------------------- */
.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:focus-visible {
  position: fixed;
  top: var(--space-12);
  left: var(--space-12);
  width: auto;
  height: auto;
  padding: var(--space-10) var(--space-16);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  background: var(--background-success-default);
  color: var(--text-inverse-default);
  text-decoration: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-button);
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  z-index: var(--z-index-modal);
  transition: background-color 0.2s ease;
}

.sr-only:focus-visible:hover {
  background: var(--background-success-hover);
}

.sr-only:focus-visible .skip-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-only:focus-visible:hover .skip-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .sr-only:focus-visible .skip-arrow {
    transition: none;
  }
  .sr-only:focus-visible:hover .skip-arrow {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-sans-serif);
  font-weight: var(--font-weight-normal);
  color: var(--text-default);
  line-height: var(--line-height-m);
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
}

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

/* Custom text selection highlight */
::selection {
  background: var(--highlight-light-green);
}

/* --------------------------------------------------------------------------
   Typography Utilities
   -------------------------------------------------------------------------- */
.text-center {
  text-align: center;
}