/* Recruit EZ Design Tokens
 * Source of truth for site-wide colors, typography, and spacing.
 * Front-end pages link this file; coach app uses --rez-* directly.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@400;500;600;700&display=swap');

:root {
  /* Brand colors (HSL components — use with hsl(var(--token))) */
  --rez-primary:            356 82% 48%;
  --rez-primary-glow:       356 82% 55%;
  --rez-secondary:          216 72% 22%;
  --rez-navy:               216 72% 14%;
  --rez-navy-dark:          216 72% 10%;
  --rez-navy-card:          216 50% 18%;
  --rez-navy-light:         216 50% 22%;

  /* Coach-portal "premium" accent (amber/gold). Used for nav active state,
     primary CTAs, badges — anywhere the player + marketing palette would use
     --rez-primary (red). Red still applies for destructive actions only. */
  --rez-coach-accent:       32 95% 44%;
  --rez-coach-accent-light: 38 96% 50%;

  /* Surface + text */
  --rez-foreground:         220 20% 10%;
  --rez-background:         0 0% 100%;
  --rez-muted:              220 14% 96%;
  --rez-muted-foreground:   220 10% 46%;
  --rez-border:             220 13% 91%;

  /* Compatibility hex aliases for legacy --rez-* tokens used in coach app */
  --rez-bg:                 #0d1b2a;
  --rez-nav:                #081423;
  --rez-green:              #16a34a;
  --rez-green-d:            #15803d;
  --rez-red:                #dc2626;
  --rez-red-d:              #b91c1c;
  --rez-amber:              #d97706;
  --rez-blue:               #2563eb;
  --rez-slate:              #64748b;

  /* Typography */
  --rez-font-heading: 'Oswald', sans-serif;
  --rez-font-body:    'Inter', sans-serif;

  /* Layout */
  --rez-container-max: 1400px;
  --rez-radius:        22px;
  --rez-radius-lg:     0.5rem;
  --rez-radius-md:     0.375rem;
  --rez-radius-sm:     0.25rem;
  --rez-shadow:        0 32px 80px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3);
}

/* Utility classes ─────────────────────────────────────────────── */

.rez-text-gradient {
  background: linear-gradient(135deg, hsl(var(--rez-primary)), hsl(var(--rez-primary-glow)));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.rez-section-padding {
  padding: 5rem 1.5rem;
}
@media (min-width: 768px) {
  .rez-section-padding {
    padding: 7rem 2rem;
  }
}

.rez-container {
  width: 100%;
  max-width: var(--rez-container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 768px) {
  .rez-container { padding-inline: 2rem; }
}

.rez-button-primary,
.rez-button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--rez-font-heading);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--rez-radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.rez-button-primary {
  background: hsl(var(--rez-primary));
  color: #fff;
}
.rez-button-primary:hover {
  background: hsl(var(--rez-primary-glow));
  transform: translateY(-1px);
}
.rez-button-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.rez-button-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

/* iOS PWA safe-area handling. When the app is installed and launched standalone,
   iOS draws content under the dynamic island/notch (top) and home indicator
   (bottom) because we set viewport-fit=cover + apple-mobile-web-app-status-bar-style=black-translucent.
   Pad the body so flowing-layout pages don't disappear under either bar.
   Fullscreen overlays (lightboxes, sheets) ignore body padding and must
   handle env(safe-area-inset-*) themselves. */
@media (display-mode: standalone) {
  body {
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
  }
}

/* Scout grade color scale. Class name keys directly off the stored grade value
   (e.g. class="rez-grade--well_above_avg" or "rez-grade--70"), so any grade can
   be colored without a per-value lookup. Shared by the scout eval form legend,
   the player profile report, and the coach-facing report. Matches the
   blue -> black -> orange -> red scale on John's PDF templates. */
.rez-grade--well_above_avg { color: #1e40af; } /* deep blue */
.rez-grade--above_avg      { color: #2563eb; } /* blue */
.rez-grade--avg            { color: #0f172a; } /* near-black */
.rez-grade--below_avg      { color: #ea580c; } /* orange */
.rez-grade--well_below_avg { color: #dc2626; } /* red */
.rez-grade--80 { color: #4338ca; } /* indigo — Elite */
.rez-grade--70 { color: #1e40af; }
.rez-grade--60 { color: #2563eb; }
.rez-grade--50 { color: #0f172a; }
.rez-grade--40 { color: #ea580c; }
.rez-grade--30 { color: #dc2626; }
.rez-grade--20 { color: #b91c1c; } /* dark red — Poor */
[class*="rez-grade--"] { font-weight: 700; }