/* ==========================================================================
   tokens.css — Single source of truth for shared design tokens
   Loaded by auth pages, home, and engineering workspace (via style.css).
   ========================================================================== */

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* ---- Typography ---- */
  --font-family-base: 'Inter', 'Manrope', 'FKGroteskNeue', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Inter', 'Manrope', 'FKGroteskNeue', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'Berkeley Mono', ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 16px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 44px;
  --font-size-5xl: 56px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 650;
  --font-weight-bold: 750;

  --line-height-tight: 1.08;
  --line-height-snug: 1.22;
  --line-height-normal: 1.58;
  --letter-spacing-tight: -0.025em;

  /* ---- Brand / Marketing Colors (dark-bg pages) ---- */
  --bg-ink: #0E1116;
  --bg-raised: #151A21;
  --text-primary: #F2F5F8;
  --text-muted: #B5C0CC;
  --brand-teal: #12DAD1;
  --brand-teal-600: #0EA7A1;
  --accent-copper: #FF9A3C;
  --line-soft: #232A32;
  --error-red: #ff6b6b;
  --success-green: #12DAD1;
  --page-bg: #EEF3F7;
  --surface: #FFFFFF;
  --surface-muted: #F6F9FB;
  --surface-elevated: #FFFFFF;
  --text-strong: #122033;
  --text-body: #405168;
  --text-subtle: #68778B;
  --brand-navy: #111D2B;
  --brand-teal-dark: #0F7B8F;
  --brand-copper-dark: #B87527;
  --border-subtle: rgba(17, 29, 43, 0.10);
  --border-medium: rgba(17, 29, 43, 0.16);

  /* ---- Primitive Color Tokens ---- */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* ---- Spacing ---- */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ---- Border Radius ---- */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-surface: 0 18px 44px rgba(17, 29, 43, 0.10);
  --shadow-surface-hover: 0 24px 64px rgba(17, 29, 43, 0.14);
  --shadow-soft: 0 8px 24px rgba(17, 29, 43, 0.08);

  /* ---- Animation ---- */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1360px;

  /* ---- Global-sections tokens ---- */
  --border-gradient-start: #12DAD1;
  --border-gradient-end: #FF9A3C;
  --border-thickness: 2px;
  --border-radius: 32px;
  --shadow-premium: 0 12px 52px rgba(26, 31, 58, 0.12);

  /* ---- Shared UI component tokens ---- */
  --focus-ring: 0 0 0 3px rgba(var(--color-teal-500-rgb), 0.4);
  --focus-outline: 2px solid var(--color-teal-500);
  --focus-ring-home: 0 0 0 4px rgba(18, 218, 209, 0.22);

  /* ---- Skeleton / loading ---- */
  --skeleton-base: rgba(200, 200, 200, 0.3);
  --skeleton-shine: rgba(255, 255, 255, 0.5);

  /* ---- Form field ---- */
  --field-border: #313b4e;
  --field-bg: #1a1d26;
  --field-bg-focus: #23252b;
  --field-focus-ring: rgba(18, 218, 209, 0.12);

  /* ---- Button loading ---- */
  --btn-loading-size: 18px;
}

/* ==========================================================================
   Shared keyframe animations (used across auth, home, engineering)
   ========================================================================== */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes slideUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-8px); }
  75%      { transform: translateX(8px); }
}

@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Skeleton loader utility
   ========================================================================== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 50%,
    var(--skeleton-base) 75%
  );
  background-size: 400% 100%;
  animation: shimmer 1.6s ease infinite;
  border-radius: var(--radius-base);
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: var(--radius-sm);
}

.skeleton-text.short  { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long   { width: 100%; }

.skeleton-circle {
  border-radius: var(--radius-full);
}

.skeleton-rect {
  border-radius: var(--radius-base);
}

/* ==========================================================================
   Button loading state
   ========================================================================== */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--btn-loading-size);
  height: var(--btn-loading-size);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Page-level progress bar
   ========================================================================== */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-teal), var(--accent-copper));
  z-index: 99999;
  transition: width 0.4s var(--ease-standard);
  pointer-events: none;
}

.page-progress.active {
  width: 70%;
  transition: width 8s cubic-bezier(0.1, 0.5, 0.3, 1);
}

.page-progress.done {
  width: 100%;
  transition: width 0.3s var(--ease-standard);
  opacity: 0;
  transition: width 0.3s var(--ease-standard), opacity 0.4s 0.3s ease;
}

/* ==========================================================================
   Form field component
   ========================================================================== */
.form-field {
  margin-bottom: var(--space-12);
  position: relative;
}

.form-field__label {
  display: block;
  font-weight: 600;
  font-size: 0.86rem;
  color: #b2e3fc;
  margin-bottom: 5px;
  letter-spacing: 0.3px;
  transition: color var(--duration-fast) var(--ease-standard);
}

.form-field__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 2px solid var(--field-border);
  border-radius: var(--radius-base);
  background: var(--field-bg);
  font-size: 0.92rem;
  color: var(--text-primary);
  outline: none;
  font-family: var(--font-family-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
  box-sizing: border-box;
}

.form-field__input:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px var(--field-focus-ring);
  background: var(--field-bg-focus);
}

.form-field__input::placeholder {
  color: #6a6e78;
  font-size: 0.9rem;
}

.form-field__error-msg {
  display: none;
  font-size: 0.78rem;
  color: var(--error-red);
  margin-top: 4px;
  align-items: center;
  gap: 4px;
}

.form-field--error .form-field__input {
  border-color: var(--error-red);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12);
}

.form-field--error .form-field__label {
  color: var(--error-red);
}

.form-field--error .form-field__error-msg {
  display: flex;
}

.form-field--success .form-field__input {
  border-color: var(--brand-teal);
}

/* ==========================================================================
   Card / Panel utility
   ========================================================================== */
.card {
  background: var(--color-cream-100, #fff);
  border: 1px solid rgba(var(--color-brown-600-rgb), 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.panel {
  background: var(--color-cream-100, #fff);
  border: 1px solid rgba(var(--color-brown-600-rgb), 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   Skip navigation (accessibility)
   ========================================================================== */
.skip-nav {
  position: absolute;
  top: -100%;
  left: var(--space-16);
  z-index: 100000;
  padding: var(--space-8) var(--space-16);
  background: var(--brand-teal);
  color: #000;
  font-weight: var(--font-weight-bold);
  border-radius: 0 0 var(--radius-base) var(--radius-base);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-nav:focus {
  top: 0;
}

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

  .page-progress {
    transition: none;
  }
}