/* ===========================================================================
   RowLink — Design tokens
   Sprint 02 — Design System & Frontend Foundation
   Source of truth for every CSS custom property. No component CSS may use a
   raw hex value — only `var(--rl-*)` references.

   Encodes ASMP-013 contrast gap fixes:
   - --rl-color-hero-overlay-top    raised from .15 to .45
   - --rl-color-hero-overlay-bottom raised from .82 to .95
   - --rl-color-hero-subcopy        raised from .85 to 1.0
   - --rl-color-text-muted          anchored to --rl-ink-500 (NOT --rl-ink-400)
     so any mono label class automatically meets WCAG AA at 10–12px.
   =========================================================================== */

:root {
  /* -----------------------------------------------------------------
     1.1 Raw colour palette
     ----------------------------------------------------------------- */

  --rl-forest-900: #123c33;
  --rl-forest-800: #1a4a40;
  --rl-forest-600: #1f6f5c;
  --rl-forest-400: #3e8a78;
  --rl-forest-100: #d5e5df;

  --rl-mint-300:   #8fc0b1;
  --rl-mint-200:   #c4ddd4;
  --rl-mint-100:   #e7f1ed;

  --rl-ink-900:    #14201c;
  --rl-ink-600:    #3d3b34;
  --rl-ink-500:    #5b5952;
  --rl-ink-400:    #8a887f;

  --rl-paper-50:   #f7f6f3;
  --rl-paper-100:  #fbfaf7;
  --rl-paper-200:  #efede7;

  --rl-line-200:   #e5e2da;
  --rl-line-300:   #d6d3ca;
  --rl-line-400:   #c9c6bc;

  --rl-white:      #ffffff;

  /* Semantic error / warning (introduced for Sprint 05 + validation states). */
  --rl-color-error:   #a02020;
  --rl-color-warning: #a8651b;
  --rl-color-success: var(--rl-forest-600);

  /* -----------------------------------------------------------------
     1.2 Semantic colour aliases
     ----------------------------------------------------------------- */

  --rl-color-bg:                  var(--rl-paper-50);
  --rl-color-surface:             var(--rl-white);
  --rl-color-surface-hover:       var(--rl-paper-100);
  --rl-color-surface-dark:        var(--rl-forest-900);

  --rl-color-border:              var(--rl-line-200);
  --rl-color-border-strong:       var(--rl-line-300);

  --rl-color-text-primary:        var(--rl-ink-900);
  --rl-color-text-secondary:      var(--rl-ink-600);
  /* ASMP-013 fix: mono labels (10–12px) must use --rl-ink-500, not --rl-ink-400.
     Authors cannot regress by accident; the alias always points at the AA token. */
  --rl-color-text-muted:          var(--rl-ink-500);
  --rl-color-text-on-dark:        rgba(247, 246, 243, 1);
  --rl-color-text-on-dark-muted:  rgba(247, 246, 243, 0.92);

  --rl-color-link:                var(--rl-forest-600);
  --rl-color-link-hover:          var(--rl-forest-900);

  --rl-color-accent:              var(--rl-forest-600);
  --rl-color-accent-hover:        var(--rl-forest-900);
  --rl-color-accent-bg:           var(--rl-mint-100);
  --rl-color-accent-border:       var(--rl-mint-200);
  --rl-color-accent-eyebrow:      var(--rl-mint-300);
  --rl-color-accent-text:         var(--rl-forest-600);

  --rl-color-focus-ring:          var(--rl-forest-600);
  --rl-color-focus-ring-on-dark:  var(--rl-mint-300);

  /* -----------------------------------------------------------------
     1.3 Hero overlay (ASMP-013 fix #2)
     ----------------------------------------------------------------- */

  --rl-color-hero-overlay-top:    rgba(14, 32, 28, 0.45);
  --rl-color-hero-overlay-bottom: rgba(14, 32, 28, 0.95);
  --rl-color-hero-subcopy:        rgba(247, 246, 243, 1);
  --rl-color-hero-eyebrow:        var(--rl-mint-300);

  /* -----------------------------------------------------------------
     1.5 Typography
     ----------------------------------------------------------------- */

  --rl-font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rl-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Hero h1 — clamp(34,6vw,58) */
  --rl-fs-hero: clamp(34px, 6vw, 58px);
  /* Page h1 (profile / recruiting) */
  --rl-fs-h1-page: 26px;
  --rl-fs-h1-page-sm: 21px;
  --rl-fs-h2-section: 28px;
  --rl-fs-h2-card: 15px;
  --rl-fs-h3-card: 17px;
  --rl-fs-h2-signup: 24px;
  --rl-fs-body: 14px;
  --rl-fs-body-sm: 13.5px;
  --rl-fs-secondary: 12.5px;
  --rl-fs-caption: 12px;
  --rl-fs-mono-label: 11.5px;
  --rl-fs-mono-label-sm: 10.5px;
  --rl-fs-mono-numeric: 13px;
  --rl-fs-stat-profile: 22px;
  --rl-fs-stat-band: 34px;
  --rl-fs-form-label: 12px;
  --rl-fs-mono-tiny: 10px;

  --rl-fw-regular: 400;
  --rl-fw-medium:  500;
  --rl-fw-semi:    600;
  --rl-fw-bold:    700;
  --rl-fw-extra:   800;
  --rl-fw-black:   900;

  --rl-tracking-hero:  -0.03em;
  --rl-tracking-h1:    -0.02em;
  --rl-tracking-tight: -0.02em;
  --rl-tracking-default: 0;
  --rl-tracking-mono-eyebrow: 0.1em;

  --rl-lh-display:  1.02;
  --rl-lh-heading:  1.12;
  --rl-lh-body:     1.55;
  --rl-lh-body-tight: 1.45;
  --rl-lh-secondary: 1.6;
  --rl-lh-mono:     1.3;

  /* -----------------------------------------------------------------
     1.6 Spacing scale (4-px base)
     ----------------------------------------------------------------- */

  --rl-space-0:  0;
  --rl-space-1:  4px;
  --rl-space-2:  8px;
  --rl-space-3: 12px;
  --rl-space-4: 14px;
  --rl-space-5: 16px;
  --rl-space-6: 20px;
  --rl-space-7: 24px;
  --rl-space-8: 28px;
  --rl-space-9: 32px;
  --rl-space-10: 40px;
  --rl-space-11: 44px;
  --rl-space-12: 48px;
  --rl-space-14: 56px;
  --rl-space-16: 64px;
  --rl-space-20: 80px;

  /* -----------------------------------------------------------------
     1.7 Radii
     ----------------------------------------------------------------- */

  --rl-radius-1: 4px;
  --rl-radius-2: 6px;
  --rl-radius-3: 7px;
  --rl-radius-4: 8px;
  --rl-radius-5: 9px;
  --rl-radius-6: 10px;
  --rl-radius-7: 12px;
  --rl-radius-8: 20px;
  --rl-radius-pill:    999px;
  --rl-radius-circle:  50%;

  /* -----------------------------------------------------------------
     1.8 Shadows
     ----------------------------------------------------------------- */

  --rl-shadow-card-hover:    0 6px 18px rgba(20, 32, 28, 0.10);
  --rl-shadow-nav-dropdown:  0 12px 24px rgba(20, 32, 28, 0.08);
  --rl-shadow-modal:         0 32px 64px rgba(20, 32, 28, 0.25);
  --rl-shadow-toast:         0 12px 32px rgba(20, 32, 28, 0.14);

  /* -----------------------------------------------------------------
     1.9 Layout widths & breakpoints
     ----------------------------------------------------------------- */

  --rl-content-narrow:           520px;
  --rl-content-hero:             760px;
  --rl-content-profile-header:  1120px;
  --rl-content-profile:         1160px;
  --rl-content-search:          1240px;
  --rl-content-landing:         1180px;

  --rl-bp-sm:  576px;
  --rl-bp-md:  768px;
  --rl-bp-lg:  992px;
  --rl-bp-xl: 1200px;
  --rl-bp-2xl: 1400px;

  /* -----------------------------------------------------------------
     1.10 Form / control geometry
     ----------------------------------------------------------------- */

  --rl-control-input-h:         44px;
  --rl-control-input-radius:    var(--rl-radius-5);
  --rl-control-input-padding-x: 14px;

  --rl-control-btn-h-inline:         36px;
  --rl-control-btn-h-form:           46px;
  --rl-control-btn-h-small:          32px;
  --rl-control-btn-radius-inline:    var(--rl-radius-4);
  --rl-control-btn-radius-form:      var(--rl-radius-5);
  --rl-control-btn-radius-small:     var(--rl-radius-4);

  --rl-control-toggle-w-search:      36px;
  --rl-control-toggle-h-search:      20px;
  --rl-control-toggle-w-signup:      40px;
  --rl-control-toggle-h-signup:      22px;
  --rl-control-toggle-radius-search: 10px;
  --rl-control-toggle-radius-signup: 11px;
  --rl-control-toggle-knob-search:   16px;
  --rl-control-toggle-knob-signup:   18px;

  --rl-control-search-h:              34px;
  --rl-control-search-radius:         var(--rl-radius-4);

  --rl-control-nav-h-app:             58px;
  --rl-control-nav-h-marketing:       64px;
  --rl-control-hamburger-size:        38px;

  --rl-control-avatar-sm:             32px;
  --rl-control-avatar-md:             38px;
  --rl-control-avatar-lg:             42px;
  --rl-control-avatar-profile:       132px;
  --rl-control-avatar-lift:          -38px;

  --rl-control-monogram-sm:           40px;
  --rl-control-monogram-md:           44px;
  --rl-control-monogram-lg:          120px;

  /* -----------------------------------------------------------------
     1.11 Motion
     ----------------------------------------------------------------- */

  --rl-duration-fast:          100ms;
  --rl-duration-default:       150ms;
  --rl-duration-card-hover:    200ms;
  --rl-duration-nav-dropdown:  180ms;
  --rl-duration-page-fade:     150ms;
  --rl-duration-modal:         220ms;

  --rl-ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --rl-ease-emphasis:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --rl-ease-linear:    linear;

  /* -----------------------------------------------------------------
     1.12 Misc component tokens
     ----------------------------------------------------------------- */

  --rl-stat-strip-rule-width: 1px;
  --rl-stat-strip-padding-x:  var(--rl-space-9); /* 32px to match prototype */

  --rl-hero-min-h:           520px;
  --rl-cover-h-rower-coach:  180px;
  --rl-cover-h-club:         200px;

  --rl-monogram-padding:      3px 6px;
  --rl-monogram-padding-md:   5px 12px;

  --rl-card-padding-default:  22px 24px;
  --rl-card-padding-wide:     24px 28px;
  --rl-card-padding-compact:  22px 22px 26px;

  --rl-toast-max-width:       360px;
  --rl-toast-duration:        3000ms;
}

/* -----------------------------------------------------------------
   Forced-colors (Windows High Contrast) override
   - Maps the major surfaces to system colors so they retain contrast.
   ----------------------------------------------------------------- */

@media (forced-colors: active) {
  :root {
    --rl-color-bg:                  Canvas;
    --rl-color-surface:             Canvas;
    --rl-color-surface-hover:       Canvas;
    --rl-color-surface-dark:        CanvasText;
    --rl-color-text-primary:        CanvasText;
    --rl-color-text-secondary:      CanvasText;
    --rl-color-text-on-dark:        Canvas;
    --rl-color-text-on-dark-muted:  Canvas;
    --rl-color-border:              CanvasText;
    --rl-color-border-strong:       CanvasText;
    --rl-color-link:                LinkText;
    --rl-color-accent:              LinkText;
    --rl-color-focus-ring:          Highlight;
    --rl-color-focus-ring-on-dark:  Highlight;
  }
}