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

/* Typeface: Geist remains the intended sans-serif for 3v.to, but it is not hosted
   anywhere we control yet. This slot previously held an @import against a
   third-party Vercel CDN, which now returns 404 — so the face never
   loaded, every page logged a console error, and each page view still made an
   offsite request. Until Geist is published to the Proctorio CDN (cdn.proctorio.com,
   which already serves this site's icons and illustrations), the
   --font-family-sans-serif stack below falls through to the platform UI font.
   TODO: restore an @import/@font-face here pointing at the Proctorio CDN once the
   Geist files are uploaded. */

/* --------------------------------------------------------------------------
   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 */
  /* 'Geist' is kept at the head of the stack so the design intent is preserved and
     the token starts working the moment the face is hosted (see the typeface note at
     the top of this file). No @font-face is loaded today, so this resolves to the
     platform UI font via the fallbacks below. */
  --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;
}