/*
 * ROLLerUP HR Reviews — design tokens (light-only, modernized 2025/26).
 * Local to this project per owner decision (option a). Brand identity
 * (accent #2A81F9, Puvi, logo) preserved; neutrals/radii/elevation/type/
 * motion modernized. Existing --ru-* names kept so all templates keep working.
 */

:root {
  /* ---- Surfaces & text ---- */
  --ru-bg-page: #F6F7F9;       /* app background (cooler, modern) */
  --ru-bg: #FFFFFF;            /* card / input surface */
  --ru-bg-muted: #F1F3F5;      /* table headers, hover fills, subtle wells (new) */
  --ru-bg-inverse: #16191D;
  --ru-text: #16191D;          /* primary text (softer than pure #000) */
  --ru-text-secondary: #565C66;
  --ru-text-tertiary: #6B7280; /* muted — bumped for WCAG AA on white */
  --ru-text-disabled: #A0A6AE;
  --ru-text-oninverse: #FFFFFF;
  --ru-border: #E4E7EC;        /* hairline */
  --ru-border-strong: #D0D5DD; /* inputs / weightier dividers (new) */

  /* ---- Brand (accent — unchanged identity) ---- */
  --ru-brand: #2A81F9;
  --ru-brand-hover: #1E6FE0;
  --ru-brand-pressed: #1A5FBF;
  --ru-brand-border: #BBD5FD;
  --ru-brand-bg-tint: #EAF2FE;

  /* ---- Semantic / status (+ soft tints) ---- */
  --ru-success: #0E9F6E;
  --ru-success-border: #A6E9CE;
  --ru-success-tint: #E6F6EF;
  --ru-danger: #DC2626;
  --ru-danger-border: #F6C9C9;
  --ru-danger-tint: #FDECEC;
  --ru-warning: #C77700;
  --ru-warning-border: #F4D9A8;
  --ru-warning-tint: #FDF3E7;
  --ru-info: #2A81F9;
  --ru-info-border: #BBD5FD;
  --ru-info-tint: #EAF2FE;

  /* ---- Radius (softer, modern) ---- */
  --ru-radius-sm: 6px;         /* badges, chips (was 2) */
  --ru-radius: 8px;            /* buttons, inputs (was 4) */
  --ru-radius-lg: 12px;        /* cards (was 6) */
  --ru-radius-xl: 16px;        /* large cards / modals (was 8) */
  --ru-radius-full: 999px;     /* pills, avatars (new) */

  /* ---- Spacing (4px base; +12px step) ---- */
  --ru-space-1: 4px;
  --ru-space-2: 8px;
  --ru-space-2-5: 12px;        /* new intermediate step */
  --ru-space-3: 16px;
  --ru-space-4: 20px;
  --ru-space-5: 24px;
  --ru-space-6: 32px;
  --ru-space-7: 40px;
  --ru-space-8: 48px;
  --ru-space-9: 64px;
  --ru-space-10: 80px;

  /* ---- Elevation (soft, layered — primary separation, not hard borders) ---- */
  --ru-shadow-xs:      0 1px 2px rgba(16,24,40,0.05);
  --ru-shadow-card:    0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  --ru-shadow-raised:  0 2px 4px rgba(16,24,40,0.04), 0 6px 16px rgba(16,24,40,0.08);
  --ru-shadow-popover: 0 4px 12px rgba(16,24,40,0.10), 0 2px 4px rgba(16,24,40,0.06);
  --ru-shadow-modal:   0 12px 32px rgba(16,24,40,0.14), 0 4px 8px rgba(16,24,40,0.06);

  /* ---- Motion (restrained) ---- */
  --ru-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ru-dur-fast: 120ms;
  --ru-dur: 180ms;
  --ru-dur-slow: 240ms;

  /* ---- Focus ring (visible, AA) ---- */
  --ru-focus-ring: 0 0 0 3px rgba(42,129,249,0.35);

  /* ---- Typography ---- */
  --ru-font-sans: puvi, 'roboto flex', roboto, lato, inter, system-ui, -apple-system, sans-serif;
  --ru-font-mono: 'sf mono', 'jetbrains mono', 'zoho puvi mono', monospace;
  --ru-font-small: 0.75rem;    /* 12px */
  --ru-font-medium: 0.875rem;  /* 14px — body default */
  --ru-font-large: 1rem;       /* 16px */
  --ru-font-h3: 1.125rem;      /* 18px (new — fills the 16->24 gap) */
  --ru-font-h2: 1.375rem;      /* 22px (new) */
  --ru-font-xlarge: 1.5rem;    /* 24px */
  --ru-font-h1: 1.75rem;       /* 28px (new) */
  --ru-font-display: 2.25rem;  /* 36px (new) */

  --ru-line-tight: 1.2;
  --ru-line-normal: 1.5;
  --ru-line-relaxed: 1.65;

  /* ---- Layout ---- */
  --ru-content-narrow: 720px;  /* reading width */
  --ru-content-wide: 1120px;   /* tables / dashboards */
}

/* Base element styling */
body {
  margin: 0;
  font-family: var(--ru-font-sans);
  font-size: var(--ru-font-medium);
  line-height: var(--ru-line-normal);
  letter-spacing: -0.006em;
  color: var(--ru-text);
  background: var(--ru-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ru-font-sans);
  font-weight: 600;
  line-height: var(--ru-line-tight);
  letter-spacing: -0.018em;
  color: var(--ru-text);
  margin: 0 0 var(--ru-space-3);
}
h1 { font-size: var(--ru-font-display); font-weight: 700; }
h2 { font-size: var(--ru-font-h1); }
h3 { font-size: var(--ru-font-h2); }
h4 { font-size: var(--ru-font-h3); }

a { color: var(--ru-brand); text-decoration: none; transition: color var(--ru-dur-fast) var(--ru-ease); }
a:hover { text-decoration: underline; }
a:focus-visible { outline: none; border-radius: var(--ru-radius-sm); box-shadow: var(--ru-focus-ring); }

code, pre, kbd, samp { font-family: var(--ru-font-mono); }

/* Honor reduced-motion preference globally. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}