/* ============================================================================
   HRxBoard — CENTRALIZED DESIGN SYSTEM  ·  Single Source of Truth
   ============================================================================
   Extracted VERBATIM from the HRxBoard marketing site's compiled stylesheet
   (https://hrxboard.projectux001.workers.dev/css/styles.css :root) so the product
   portals read as the same product as the landing page.

   This file is the ONE place that defines the HRxBoard visual language:
       · Design tokens        (color / type / spacing / radius / shadow / motion)
       · Component primitives  (button / card / input / badge / table / nav /
                                modal / dropdown / tabs / avatar / empty /
                                loading / toast / brand)
       · Responsive rules

   It is loaded BEFORE each portal's own stylesheet in every template, so both
   the Compliance Team Portal and the Compliance Client Portal inherit the
   brand automatically.

   >>> DO NOT hardcode colors, fonts, radii or shadows in portal CSS. <<<
   >>> Consume the --hrx-* tokens (or the .hrx-* / .ds-* classes) below.  <<<

   The canonical token names are the --hrx-* set requested in the design brief.
   A large block of LEGACY ALIASES at the bottom re-points every previously
   used variable (--primary, --navy, --surface, --success ...) onto these
   tokens, so nothing in the existing portals breaks. Portal LAYOUTS, Django
   views, routes, models, APIs and permissions are intentionally NOT touched
   by this file — this establishes the design system only.

   FONT NOTE (centralized + swappable): the landing page uses two proprietary
   faces — "Denton" (editorial serif display) and "Aeonik" (geometric UI sans).
   Those cannot be licensed here, so display type falls back to Fraunces and UI
   type to Inter — the SAME public fallback ("Inter") the marketing site itself
   declares. Both families live in exactly ONE variable each (--hrx-font-display
   / --hrx-font-sans). Swap those two lines to change the type everywhere.
   ========================================================================== */

:root {

  /* ========================================================================
     1. COLOR TOKENS
        Palette lifted verbatim from the landing page. Warm off-white canvas,
        near-black ink, the HRxBoard rose accent + full rose scale, hairline
        ink-tinted borders. No navy. No enterprise blue.
     ======================================================================== */

  /* ---- Backgrounds & surfaces (landing --bg / --bg-soft) ---------------- */
  --hrx-bg:              #F7F6F4;   /* warm off-white — the app canvas        */
  --hrx-bg-tint:         #FFF4F7;   /* rose-50 page wash (subtle brand warmth)*/
  --hrx-surface:         #FFFFFF;   /* card / panel / modal background        */
  --hrx-surface-soft:    #FBFAF8;   /* very subtle warm-white surface         */
  --hrx-surface-muted:   #F7F6F4;   /* inset / recessed surface               */
  --hrx-surface-cloud:   #F1F1EF;   /* neutral inset (landing .spill bg)      */
  --hrx-surface-blush:   #FFF4F7;   /* rose-50 accent surface                 */

  /* ---- Text (landing --ink scale) --------------------------------------- */
  --hrx-text-primary:    #0E0E11;   /* ink — primary content (near-black)     */
  --hrx-text-secondary:  #494951;   /* ink-2 — secondary / warm gray          */
  --hrx-text-muted:      #8A8A93;   /* ink-3 — metadata / muted neutral       */
  --hrx-text-faint:      #C4C4CA;   /* ink-4 — placeholders / faint           */
  --hrx-text-on-dark:    #FFFFFF;   /* text on ink / accent surfaces          */

  /* ---- HRxBoard rose scale — THE brand accent (landing --rose-*) -------- */
  --hrx-rose-50:         #FFF4F7;
  --hrx-rose-100:        #FFE4EB;
  --hrx-rose-200:        #FFB7C8;
  --hrx-rose-300:        #FF8EA8;
  --hrx-rose-400:        #FF537A;
  --hrx-rose-500:        #EA2451;   /* PRIMARY brand accent                   */
  --hrx-rose-600:        #BD2044;

  /* ---- Brand aliases (semantic, requested by the brief) ----------------- */
  --hrx-brand:           #EA2451;   /* rose-500 — the HRxBoard pink/coral     */
  --hrx-brand-soft:      #FFE4EB;   /* rose-100 — hover / selected background */
  --hrx-brand-wash:      #FFF4F7;   /* rose-50  — faintest brand background   */
  --hrx-brand-hover:     #BD2044;   /* rose-600 — pressed / hover emphasis    */
  --hrx-brand-ring:      #FFB7C8;   /* rose-200 — soft focus ring / border    */

  /* ---- Primary action = BLACK (landing btn--dark), NOT pink ------------- */
  --hrx-ink:             #0E0E11;   /* primary button background              */
  --hrx-ink-hover:       #26262B;   /* primary button hover                   */

  /* ---- Borders (landing --line / --line-2, ink-tinted) ------------------ */
  --hrx-border:          rgba(14, 14, 17, .08);   /* hairline default border  */
  --hrx-border-strong:   rgba(14, 14, 17, .14);   /* emphasized border        */
  --hrx-divider:         rgba(14, 14, 17, .06);   /* subtle inner divider     */

  /* ---- Semantic status (landing --ok / --warn / --bad) ------------------ */
  --hrx-success:         #1E9E6A;
  --hrx-success-soft:    #E6F6EE;
  --hrx-success-border:  #BFE7D2;
  --hrx-success-text:    #137A50;

  --hrx-warning:         #E29A2F;
  --hrx-warning-soft:    #FFF3DF;
  --hrx-warning-border:  #F6DDB4;
  --hrx-warning-text:    #A6620B;

  --hrx-danger:          #EA2451;   /* landing --bad == rose-500             */
  --hrx-danger-soft:     #FFE8EE;
  --hrx-danger-border:   #FFB7C8;
  --hrx-danger-text:     #BD2044;

  --hrx-info:            #EA2451;   /* "information" uses the soft brand tint */
  --hrx-info-soft:       #FFF4F7;
  --hrx-info-border:     #FFE4EB;
  --hrx-info-text:       #BD2044;

  /* ---- Focus ring (rose, never blue) ------------------------------------ */
  --hrx-focus:           0 0 0 4px var(--hrx-brand-ring);
  --hrx-focus-ring:      var(--hrx-brand-ring);

  /* ========================================================================
     2. TYPOGRAPHY TOKENS
        Landing uses "Aeonik" (UI sans) + "Denton" (editorial serif display).
        Proprietary → mapped to Inter (UI) + Fraunces (display), which are the
        landing page's own declared public fallbacks. Change these two lines to
        re-skin the entire product's type.
     ======================================================================== */
  --hrx-font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hrx-font-display: 'Fraunces', 'Denton', Georgia, 'Times New Roman', serif;
  --hrx-font-body:    var(--hrx-font-sans);
  --hrx-font-heading: var(--hrx-font-display);
  --hrx-font-label:   var(--hrx-font-sans);
  --hrx-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* ---- Font weights (landing stays light: 300 / 400 dominate) ----------- */
  --hrx-weight-light:    300;
  --hrx-weight-regular:  400;
  --hrx-weight-medium:   500;
  --hrx-weight-semibold: 600;   /* used sparingly for UI emphasis            */

  /* ---- Type scale (editorial hierarchy from the landing page) ----------- */
  /* Display — hero / marketing-style headings (serif, light, tight)         */
  --hrx-display-size:      clamp(40px, 5.4vw, 82px);
  --hrx-display-line:      1.02;
  --hrx-display-tracking:  -.03em;

  --hrx-h1-size:           clamp(28px, 3.2vw, 44px);
  --hrx-h1-line:           1.08;
  --hrx-h1-tracking:       -.025em;

  --hrx-h2-size:           clamp(22px, 2.2vw, 30px);
  --hrx-h2-line:           1.15;
  --hrx-h2-tracking:       -.02em;

  --hrx-h3-size:           clamp(17px, 1.4vw, 20px);
  --hrx-h3-line:           1.25;
  --hrx-h3-tracking:       -.01em;

  --hrx-body-size:         16px;      /* landing body: 16px / 1.5 / 400       */
  --hrx-body-line:         1.5;

  --hrx-body-sm-size:      14px;
  --hrx-body-sm-line:      1.5;

  --hrx-label-size:        11.5px;    /* small uppercase labels               */
  --hrx-label-tracking:    .12em;     /* landing eyebrow tracking             */

  /* ========================================================================
     3. SPACING TOKENS (4pt rhythm — landing leans on generous whitespace)
     ======================================================================== */
  --hrx-space-1:  4px;
  --hrx-space-2:  8px;
  --hrx-space-3:  12px;
  --hrx-space-4:  16px;
  --hrx-space-5:  20px;
  --hrx-space-6:  24px;
  --hrx-space-8:  32px;
  --hrx-space-10: 40px;
  --hrx-space-12: 48px;
  --hrx-space-16: 64px;

  /* ---- Layout ----------------------------------------------------------- */
  --hrx-container:   1320px;                 /* landing --maxw                */
  --hrx-gutter:      clamp(16px, 4vw, 56px); /* landing --gutter              */
  --hrx-nav-height:  64px;                   /* top nav bar height            */
  --hrx-sidebar-w:   264px;                  /* portal sidebar width          */
  --hrx-control-h:   44px;                   /* input / small-button height   */
  --hrx-input-h:     44px;

  /* ========================================================================
     4. RADIUS TOKENS (soft, rounded — pill for controls)
     ======================================================================== */
  --hrx-radius-sm:   10px;
  --hrx-radius-md:   14px;
  --hrx-radius-lg:   18px;
  --hrx-radius-xl:   24px;
  --hrx-radius-pill: 999px;

  /* ========================================================================
     5. SHADOW TOKENS (soft, low-contrast, warm/ink-tinted — landing verbatim)
     ======================================================================== */
  --hrx-shadow-none: none;
  --hrx-shadow-sm:   0 1px 2px rgba(14,14,17,.04), 0 4px 12px -4px rgba(14,14,17,.06);
  --hrx-shadow-md:   0 1px 2px rgba(14,14,17,.04), 0 10px 30px -10px rgba(14,14,17,.10), 0 30px 60px -30px rgba(14,14,17,.12);
  --hrx-shadow-lg:   0 2px 4px rgba(14,14,17,.03), 0 24px 60px -18px rgba(40,12,24,.16), 0 60px 120px -40px rgba(40,12,24,.18);
  --hrx-shadow: var(--hrx-shadow-md);

  /* ========================================================================
     6. MOTION TOKENS (landing --ease)
     ======================================================================== */
  --hrx-ease:        cubic-bezier(.22, 1, .36, 1);
  --hrx-transition:  .18s var(--hrx-ease);
  /* Standard interaction transition used across every portal control so hover /
     active / focus feel identical everywhere (150–200ms, landing easing). */
  --hrx-transition-fast: .15s var(--hrx-ease);

  /* ========================================================================
     6b. COMPONENT CONVENTION TOKENS  (refinement pass)
        Derived from the scale above so component dimensions, padding, hover /
        active surfaces and typography are consistent across BOTH portals.
        These only COMPOSE existing tokens — no new colors/fonts introduced.
     ======================================================================== */

  /* ---- Control heights (consistent button / input / pill sizing) -------- */
  --hrx-control-h-sm:   34px;   /* compact row-action / secondary controls   */
  --hrx-control-h-lg:   48px;   /* prominent primary CTA                      */

  /* ---- Card padding + spacing (balanced internal breathing room) -------- */
  --hrx-card-pad:        20px;                 /* default card padding        */
  --hrx-card-pad-sm:     16px;                 /* compact card padding        */
  --hrx-card-gap:        var(--hrx-space-4);   /* 16px — card-to-card gap     */
  --hrx-card-radius:     var(--hrx-radius-md); /* 14px — unified card radius  */
  --hrx-card-min-h:      104px;                /* KPI/summary card min height */

  /* ---- Vertical rhythm (heading → subtitle → content) ------------------- */
  --hrx-rhythm-title-sub:   var(--hrx-space-1);  /* 4px  title → subtitle     */
  --hrx-rhythm-head-body:   var(--hrx-space-4);  /* 16px head → content       */
  --hrx-rhythm-section:     var(--hrx-space-6);  /* 24px between sections     */
  --hrx-rhythm-label-value: var(--hrx-space-1);  /* 4px label → value         */

  /* ---- Icon sizing scale ------------------------------------------------ */
  --hrx-ico-nav:    18px;   /* navigation icons                             */
  --hrx-ico-sm:     15px;   /* inline / action icons                        */
  --hrx-ico-card:   18px;   /* card header icons                            */
  --hrx-ico-empty:  28px;   /* restrained empty-state icons                 */

  /* ---- Interaction surfaces (three distinct nav/control states) --------- */
  --hrx-hover-surface:   var(--hrx-surface-muted);  /* neutral hover wash    */
  --hrx-hover-brand:     var(--hrx-brand-wash);     /* faint brand hover     */
  --hrx-active-brand:    var(--hrx-brand-soft);      /* stronger active tint */
  --hrx-row-hover:       var(--hrx-surface-muted);  /* table row hover       */

  /* ---- Focus ring (rose, consistent everywhere) ------------------------- */
  --hrx-focus-soft:  0 0 0 3px var(--hrx-brand-soft);

  /* ---- Refined shadows (subtle card elevation on hover) ----------------- */
  --hrx-shadow-hover: 0 6px 18px -6px rgba(14,14,17,.10);
  --hrx-shadow-rest:  0 1px 2px rgba(14,14,17,.04);

  /* ---- Dashboard typography scale (clear hierarchy, existing family) ---- */
  --hrx-page-title:     26px;   /* dashboard page title (serif display)     */
  --hrx-section-title:  17px;   /* card / section title                     */
  --hrx-kpi-value:      30px;   /* KPI number — strongest element           */
  --hrx-kpi-label:      11px;   /* KPI label (uppercase, tracked)           */


  /* ========================================================================
     ==   LEGACY ALIASES  ·  DO NOT REMOVE                                  ==
     ==   Re-point every previously used variable onto the --hrx-* tokens   ==
     ==   above so the existing portals inherit the brand with zero edits.  ==
     ======================================================================== */

  /* Canonical (pre-existing) generic names */
  --color-background:      var(--hrx-bg);
  --color-background-tint: var(--hrx-bg-tint);
  --color-surface:         var(--hrx-surface);
  --color-surface-muted:   var(--hrx-surface-muted);
  --color-surface-blush:   var(--hrx-surface-blush);
  --color-surface-cloud:   var(--hrx-surface-cloud);

  --color-text:            var(--hrx-text-primary);
  --color-text-muted:      var(--hrx-text-secondary);
  --color-text-faint:      var(--hrx-text-muted);
  --color-text-mute:       var(--hrx-text-faint);

  --rose-50:   var(--hrx-rose-50);
  --rose-100:  var(--hrx-rose-100);
  --rose-200:  var(--hrx-rose-200);
  --rose-300:  var(--hrx-rose-300);
  --rose-400:  var(--hrx-rose-400);
  --rose-500:  var(--hrx-rose-500);
  --rose-600:  var(--hrx-rose-600);

  --color-accent:        var(--hrx-brand);
  --color-accent-strong: var(--hrx-brand-hover);
  --color-accent-soft:   var(--hrx-brand-soft);
  --color-accent-ring:   var(--hrx-brand-ring);

  --color-primary:       var(--hrx-ink);
  --color-primary-hover: var(--hrx-ink-hover);
  --color-primary-soft:  var(--hrx-surface-cloud);

  --color-border:        var(--hrx-border);
  --color-border-strong: var(--hrx-border-strong);

  --color-success:        var(--hrx-success);
  --color-success-soft:   var(--hrx-success-soft);
  --color-success-border: var(--hrx-success-border);
  --color-success-text:   var(--hrx-success-text);
  --color-warning:        var(--hrx-warning);
  --color-warning-soft:   var(--hrx-warning-soft);
  --color-warning-border: var(--hrx-warning-border);
  --color-warning-text:   var(--hrx-warning-text);
  --color-danger:         var(--hrx-danger);
  --color-danger-soft:    var(--hrx-danger-soft);
  --color-danger-border:  var(--hrx-danger-border);
  --color-danger-text:    var(--hrx-danger-text);

  --radius-sm:   var(--hrx-radius-sm);
  --radius-md:   var(--hrx-radius-md);
  --radius-lg:   var(--hrx-radius-lg);
  --radius-xl:   var(--hrx-radius-xl);
  --radius-pill: var(--hrx-radius-pill);

  --shadow-sm: var(--hrx-shadow-sm);
  --shadow-md: var(--hrx-shadow-md);
  --shadow-lg: var(--hrx-shadow-lg);

  --font-sans:    var(--hrx-font-sans);
  --font-display: var(--hrx-font-display);
  --font-mono:    var(--hrx-font-mono);

  --space-1: var(--hrx-space-1);  --space-2: var(--hrx-space-2);
  --space-3: var(--hrx-space-3);  --space-4: var(--hrx-space-4);
  --space-5: var(--hrx-space-5);  --space-6: var(--hrx-space-6);
  --space-8: var(--hrx-space-8);

  --ease: var(--hrx-ease);

  /* Brand / "blue" aliases now resolve to the ACCENT (rose) — blue is gone. */
  --primary:        var(--hrx-brand);
  --primary-dark:   var(--hrx-brand-hover);
  --primary-soft:   var(--hrx-brand-soft);
  --primary-ring:   var(--hrx-brand-ring);
  --accent:         var(--hrx-brand-hover);
  --brand-primary:        var(--hrx-brand);
  --brand-primary-hover:  var(--hrx-brand-hover);
  --brand-primary-light:  var(--hrx-brand-soft);
  --brand-primary-ring:   var(--hrx-brand-ring);
  --brand-navy:           var(--hrx-ink);

  /* Ink aliases now resolve to near-black ink. */
  --text-primary:   var(--hrx-text-primary);
  --text-secondary: var(--hrx-text-secondary);
  --text-faint:     var(--hrx-text-muted);
  --text-mute:      var(--hrx-text-faint);

  /* Surface aliases. */
  --background:     var(--hrx-bg);
  --surface:        var(--hrx-surface);
  --surface-muted:  var(--hrx-surface-muted);
  --surface-cloud:  var(--hrx-surface-cloud);
  --border:         var(--hrx-border);

  /* Dark-chrome aliases now resolve to LIGHT surfaces / ink — no more navy. */
  --ink-900:        var(--hrx-text-primary);
  --ink-800:        var(--hrx-surface);
  --ink-700:        var(--hrx-surface-muted);

  /* Status aliases. */
  --success:        var(--hrx-success);
  --success-soft:   var(--hrx-success-soft);
  --success-border: var(--hrx-success-border);
  --success-text:   var(--hrx-success-text);
  --warning:        var(--hrx-warning);
  --warning-soft:   var(--hrx-warning-soft);
  --warning-border: var(--hrx-warning-border);
  --warning-text:   var(--hrx-warning-text);
  --danger:         var(--hrx-danger);
  --danger-soft:    var(--hrx-danger-soft);
  --danger-border:  var(--hrx-danger-border);
  --danger-text:    var(--hrx-danger-text);
}

/* ============================================================================
   7. TYPOGRAPHY UTILITIES
   Editorial display headings — serif, light, tight tracking (landing feel).
   These are opt-in classes; they do NOT restyle raw <h1>..<h3> so existing
   portal markup is unaffected until the redesign phase adopts them.
   ========================================================================== */
.hrx-display {
  font-family: var(--hrx-font-display);
  font-weight: var(--hrx-weight-light);
  font-size: var(--hrx-display-size);
  line-height: var(--hrx-display-line);
  letter-spacing: var(--hrx-display-tracking);
  color: var(--hrx-text-primary);
}
.hrx-h1 {
  font-family: var(--hrx-font-display);
  font-weight: var(--hrx-weight-light);
  font-size: var(--hrx-h1-size);
  line-height: var(--hrx-h1-line);
  letter-spacing: var(--hrx-h1-tracking);
  color: var(--hrx-text-primary);
}
.hrx-h2 {
  font-family: var(--hrx-font-display);
  font-weight: var(--hrx-weight-regular);
  font-size: var(--hrx-h2-size);
  line-height: var(--hrx-h2-line);
  letter-spacing: var(--hrx-h2-tracking);
  color: var(--hrx-text-primary);
}
.hrx-h3 {
  font-family: var(--hrx-font-sans);
  font-weight: var(--hrx-weight-semibold);
  font-size: var(--hrx-h3-size);
  line-height: var(--hrx-h3-line);
  letter-spacing: var(--hrx-h3-tracking);
  color: var(--hrx-text-primary);
}
.hrx-body {
  font-family: var(--hrx-font-sans);
  font-weight: var(--hrx-weight-regular);
  font-size: var(--hrx-body-size);
  line-height: var(--hrx-body-line);
  color: var(--hrx-text-secondary);
}
.hrx-body-sm {
  font-family: var(--hrx-font-sans);
  font-size: var(--hrx-body-sm-size);
  line-height: var(--hrx-body-sm-line);
  color: var(--hrx-text-muted);
}
.hrx-label {
  font-family: var(--hrx-font-label);
  font-size: var(--hrx-label-size);
  font-weight: var(--hrx-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--hrx-label-tracking);
  color: var(--hrx-text-muted);
}
.hrx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--hrx-radius-pill);
  border: 1px solid var(--hrx-border);
  background: var(--hrx-surface-blush);
  padding: .3rem .75rem;
  font-size: var(--hrx-label-size);
  line-height: 1;
  font-weight: var(--hrx-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--hrx-label-tracking);
  color: var(--hrx-brand-hover);
  white-space: nowrap;
}

/* ============================================================================
   8. BUTTON SYSTEM
   PRIMARY  = near-black (landing btn--dark) + white text, pill.
   SECONDARY= warm-white + ink + hairline border, pill.
   BRAND    = HRxBoard rose (for emphasised branded actions).
   DANGER   = restrained soft-red.
   GHOST    = transparent, ink text.
   ICON     = round icon-only control.
   ========================================================================== */
.btn-base,
.btn-primary, .btn-secondary, .btn-brand, .btn-danger, .btn-ghost, .btn-icon,
.hrx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--hrx-radius-pill);
  font-family: var(--hrx-font-sans);
  font-size: 14px;
  font-weight: var(--hrx-weight-semibold);
  line-height: 1;
  height: var(--hrx-control-h);
  padding: 0 20px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--hrx-transition), border-color var(--hrx-transition),
              color var(--hrx-transition), box-shadow var(--hrx-transition), transform var(--hrx-transition);
}
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-brand:focus-visible,
.btn-danger:focus-visible, .btn-ghost:focus-visible, .btn-icon:focus-visible,
.hrx-btn:focus-visible { outline: none; box-shadow: var(--hrx-focus); }

.btn-primary {
  background: var(--hrx-ink);
  color: var(--hrx-text-on-dark);
  box-shadow: 0 10px 30px -12px rgba(14,14,17,.35);
}
.btn-primary:hover { background: var(--hrx-ink-hover); }

.btn-secondary {
  background: var(--hrx-surface);
  color: var(--hrx-text-primary);
  border-color: var(--hrx-border-strong);
}
.btn-secondary:hover { background: var(--hrx-surface-muted); border-color: var(--hrx-text-faint); }

.btn-brand {
  background: var(--hrx-brand);
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(234,36,81,.45);
}
.btn-brand:hover { background: var(--hrx-brand-hover); }

.btn-danger {
  background: var(--hrx-danger-soft);
  color: var(--hrx-danger-text);
  border-color: var(--hrx-danger-border);
}
.btn-danger:hover { background: var(--hrx-danger-border); }

.btn-ghost {
  background: transparent;
  color: var(--hrx-text-primary);
}
.btn-ghost:hover { background: var(--hrx-surface-muted); }

.btn-icon {
  width: var(--hrx-control-h);
  height: var(--hrx-control-h);
  padding: 0;
  border-radius: var(--hrx-radius-pill);
  background: var(--hrx-surface);
  color: var(--hrx-text-secondary);
  border-color: var(--hrx-border);
}
.btn-icon:hover { color: var(--hrx-brand); border-color: var(--hrx-brand-ring); background: var(--hrx-brand-wash); }

/* Size modifiers */
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }

/* ---- .ds-btn* primitives (kept for backward compatibility) -------------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--hrx-radius-pill);
  font-family: var(--hrx-font-sans); font-size: 14px; font-weight: 600;
  padding: 11px 20px; line-height: 1; cursor: pointer;
  transition: background-color var(--hrx-transition), border-color var(--hrx-transition),
              color var(--hrx-transition), box-shadow var(--hrx-transition), transform var(--hrx-transition);
}
.ds-btn-primary   { background: var(--hrx-ink); color: #fff; box-shadow: 0 10px 30px -12px rgba(14,14,17,.35); }
.ds-btn-primary:hover { background: var(--hrx-ink-hover); }
.ds-btn-primary:focus-visible { outline: none; box-shadow: var(--hrx-focus); }
.ds-btn-secondary { background: var(--hrx-surface); color: var(--hrx-text-primary); border-color: var(--hrx-border-strong); }
.ds-btn-secondary:hover { background: var(--hrx-surface-muted); border-color: var(--hrx-text-faint); }
.ds-btn-accent    { background: var(--hrx-brand); color: #fff; box-shadow: 0 12px 28px -14px rgba(234,36,81,.45); }
.ds-btn-accent:hover { background: var(--hrx-brand-hover); }
.ds-btn-outline   { background: transparent; color: var(--hrx-text-primary); border-color: var(--hrx-border-strong); }
.ds-btn-outline:hover { background: var(--hrx-surface-muted); }
.ds-btn-danger    { background: var(--hrx-danger-soft); color: var(--hrx-danger-text); border-color: var(--hrx-danger-border); }
.ds-btn-danger:hover { background: var(--hrx-danger-border); }

/* ============================================================================
   9. CARD SYSTEM
   Warm-white surface, hairline border, soft shadow, generous padding.
   Black heading, muted secondary text. No colored card backgrounds.
   ========================================================================== */
.card,
.hrx-card,
.ds-card,
.yts-card {
  background: var(--hrx-surface);
  border: 1px solid var(--hrx-border);
  border-radius: var(--hrx-radius-lg);
  box-shadow: var(--hrx-shadow-sm);
  transition: box-shadow var(--hrx-transition), border-color var(--hrx-transition);
}
.card-hover:hover,
.hrx-card-hover:hover,
.yts-card-hover:hover { box-shadow: var(--hrx-shadow-md); border-color: var(--hrx-border-strong); }

.card-header,
.hrx-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--hrx-space-4);
  padding: var(--hrx-space-5) var(--hrx-space-6);
  border-bottom: 1px solid var(--hrx-divider);
}
.card-title,
.hrx-card-title {
  font-family: var(--hrx-font-sans);
  font-weight: var(--hrx-weight-semibold);
  font-size: var(--hrx-h3-size);
  letter-spacing: -.01em;
  color: var(--hrx-text-primary);
  margin: 0;
}
.card-subtitle,
.hrx-card-subtitle {
  font-size: var(--hrx-body-sm-size);
  color: var(--hrx-text-muted);
  margin: 2px 0 0;
}
.card-body,
.hrx-card-body { padding: var(--hrx-space-6); }
.card-footer,
.hrx-card-footer {
  padding: var(--hrx-space-4) var(--hrx-space-6);
  border-top: 1px solid var(--hrx-divider);
  display: flex; align-items: center; gap: var(--hrx-space-3);
}

/* ============================================================================
   10. INPUT / FORM SYSTEM
   Warm-white background, hairline border, ink text, muted placeholder,
   ROSE focus (never blue), consistent height + radius.
   ========================================================================== */
.hrx-input,
.hrx-select,
.hrx-textarea,
.hrx-search input {
  width: 100%;
  height: var(--hrx-input-h);
  background: var(--hrx-surface);
  border: 1px solid var(--hrx-border-strong);
  border-radius: var(--hrx-radius-md);
  padding: 0 14px;
  font-family: var(--hrx-font-sans);
  font-size: 14px;
  color: var(--hrx-text-primary);
  transition: border-color var(--hrx-transition), box-shadow var(--hrx-transition), background var(--hrx-transition);
}
.hrx-textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.hrx-input::placeholder,
.hrx-textarea::placeholder { color: var(--hrx-text-faint); }
.hrx-input:focus,
.hrx-select:focus,
.hrx-textarea:focus,
.hrx-search input:focus {
  outline: none;
  border-color: var(--hrx-brand);
  box-shadow: var(--hrx-focus);
  background: var(--hrx-surface);
}
.hrx-input:disabled,
.hrx-select:disabled,
.hrx-textarea:disabled { background: var(--hrx-surface-muted); color: var(--hrx-text-muted); cursor: not-allowed; }

.hrx-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}

/* Search field — pill, leading icon */
.hrx-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.hrx-search .hrx-search-ico {
  position: absolute; left: 14px; display: grid; place-items: center;
  color: var(--hrx-text-muted); pointer-events: none;
}
.hrx-search input {
  border-radius: var(--hrx-radius-pill);
  padding-left: 38px;
  background: var(--hrx-surface-muted);
}

.hrx-field { display: flex; flex-direction: column; gap: 6px; }
.hrx-field-label {
  font-size: 12px; font-weight: var(--hrx-weight-medium);
  color: var(--hrx-text-secondary);
}
.hrx-field-help { font-size: 12px; color: var(--hrx-text-muted); }
.hrx-field-error { font-size: 12px; color: var(--hrx-danger-text); }
.hrx-input.is-error,
.hrx-select.is-error,
.hrx-textarea.is-error { border-color: var(--hrx-danger-border); }
.hrx-input.is-error:focus { box-shadow: 0 0 0 4px var(--hrx-danger-soft); }

/* Checkbox / radio */
.hrx-check,
.hrx-radio {
  appearance: none;
  width: 18px; height: 18px; flex: none;
  border: 1px solid var(--hrx-border-strong);
  background: var(--hrx-surface);
  cursor: pointer;
  transition: background var(--hrx-transition), border-color var(--hrx-transition);
}
.hrx-check { border-radius: 5px; }
.hrx-radio { border-radius: 50%; }
.hrx-check:checked,
.hrx-radio:checked { background: var(--hrx-brand); border-color: var(--hrx-brand); }
.hrx-check:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.hrx-radio:checked { box-shadow: inset 0 0 0 4px var(--hrx-surface); }
.hrx-check:focus-visible,
.hrx-radio:focus-visible { outline: none; box-shadow: var(--hrx-focus); }

/* Toggle switch */
.hrx-toggle {
  appearance: none; position: relative;
  width: 40px; height: 22px; flex: none;
  border-radius: var(--hrx-radius-pill);
  background: var(--hrx-text-faint);
  cursor: pointer;
  transition: background var(--hrx-transition);
}
.hrx-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--hrx-shadow-sm);
  transition: transform var(--hrx-transition);
}
.hrx-toggle:checked { background: var(--hrx-brand); }
.hrx-toggle:checked::after { transform: translateX(18px); }
.hrx-toggle:focus-visible { outline: none; box-shadow: var(--hrx-focus); }

/* ============================================================================
   11. BADGE / STATUS SYSTEM
   Soft tinted background + restrained text, pill. Semantic, on-brand.
   ========================================================================== */
.hrx-badge,
.ds-badge,
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--hrx-font-sans);
  font-size: 11.5px; font-weight: var(--hrx-weight-semibold);
  padding: 4px 10px;
  border-radius: var(--hrx-radius-pill);
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.hrx-badge-success, .ds-badge-success, .status-success { background: var(--hrx-success-soft); color: var(--hrx-success-text); border-color: var(--hrx-success-border); }
.hrx-badge-warning, .ds-badge-warning, .status-pending { background: var(--hrx-warning-soft); color: var(--hrx-warning-text); border-color: var(--hrx-warning-border); }
.hrx-badge-danger,  .ds-badge-danger,  .status-overdue { background: var(--hrx-danger-soft);  color: var(--hrx-danger-text);  border-color: var(--hrx-danger-border); }
.hrx-badge-info,    .ds-badge-accent,  .status-info    { background: var(--hrx-info-soft);    color: var(--hrx-info-text);    border-color: var(--hrx-info-border); }
.hrx-badge-neutral, .ds-badge-neutral, .status-neutral { background: var(--hrx-surface-cloud);color: var(--hrx-text-secondary);border-color: var(--hrx-border); }

/* Status dot (leading indicator) */
.hrx-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hrx-dot-success { background: var(--hrx-success); }
.hrx-dot-warning { background: var(--hrx-warning); }
.hrx-dot-danger  { background: var(--hrx-danger); }
.hrx-dot-neutral { background: var(--hrx-text-faint); }

/* ============================================================================
   12. TABLE SYSTEM
   White surface, subtle outer border, minimal row separators, small uppercase
   column labels, dark primary text, restrained hover. No dark/blue headers.
   ========================================================================== */
.hrx-table-wrap {
  border: 1px solid var(--hrx-border);
  border-radius: var(--hrx-radius-lg);
  background: var(--hrx-surface);
  overflow: hidden;
}
.hrx-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--hrx-font-sans);
  font-size: 14px;
}
.hrx-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: var(--hrx-label-size);
  font-weight: var(--hrx-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hrx-text-muted);
  background: var(--hrx-surface-soft);
  border-bottom: 1px solid var(--hrx-border);
}
.hrx-table tbody td {
  padding: 14px 16px;
  color: var(--hrx-text-primary);
  border-bottom: 1px solid var(--hrx-divider);
  vertical-align: middle;
}
.hrx-table tbody tr:last-child td { border-bottom: 0; }
.hrx-table tbody tr { transition: background var(--hrx-transition); }
.hrx-table tbody tr:hover { background: var(--hrx-surface-muted); }
.hrx-table .cell-muted { color: var(--hrx-text-muted); }

/* ============================================================================
   13. NAVIGATION SYSTEM
   Sidebar: warm-white, subtle divider, dark text, muted icons, ROSE active
   state on faint pink background. Top nav: clean white, subtle bottom border.
   (Definitions only — applied during the portal redesign phase.)
   ========================================================================== */
.hrx-sidebar {
  width: var(--hrx-sidebar-w);
  background: var(--hrx-surface);
  border-right: 1px solid var(--hrx-border);
  display: flex; flex-direction: column;
  padding: var(--hrx-space-5) var(--hrx-space-4);
  gap: var(--hrx-space-1);
}
.hrx-nav-label {
  font-size: var(--hrx-label-size);
  font-weight: var(--hrx-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--hrx-label-tracking);
  color: var(--hrx-text-faint);
  padding: var(--hrx-space-3) var(--hrx-space-3) var(--hrx-space-2);
}
.hrx-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--hrx-radius-md);
  font-size: 14px; font-weight: var(--hrx-weight-medium);
  color: var(--hrx-text-secondary);
  cursor: pointer;
  transition: background var(--hrx-transition), color var(--hrx-transition);
}
.hrx-nav-item .hrx-nav-ico { color: var(--hrx-text-muted); display: grid; place-items: center; transition: color var(--hrx-transition); }
.hrx-nav-item:hover { background: var(--hrx-surface-muted); color: var(--hrx-text-primary); }
.hrx-nav-item.is-active {
  background: var(--hrx-brand-wash);
  color: var(--hrx-brand-hover);
}
.hrx-nav-item.is-active .hrx-nav-ico { color: var(--hrx-brand); }

.hrx-topbar {
  height: var(--hrx-nav-height);
  background: var(--hrx-surface);
  border-bottom: 1px solid var(--hrx-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--hrx-space-6);
}

/* ============================================================================
   14. BRAND / LOGO COMPONENT
   Reusable across Client Portal, Team Portal, auth, future pages.
   Uses static/images/hrxboard-logo.svg + hrxboard-mark.svg (do not inline
   per-template). .hrx-brand-mark for the compact square mark.
   ========================================================================== */
.hrx-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--hrx-text-primary);
}
.hrx-brand-logo { height: 26px; width: auto; display: block; }
.hrx-brand-mark { height: 30px; width: 30px; border-radius: 8px; display: block; }
.hrx-brand-product {
  font-size: 12px; font-weight: var(--hrx-weight-medium);
  color: var(--hrx-text-muted);
  letter-spacing: -.01em;
}

/* ============================================================================
   15. AVATAR
   ========================================================================== */
.hrx-avatar {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--hrx-brand-soft);
  color: var(--hrx-brand-hover);
  font-size: 12px; font-weight: var(--hrx-weight-semibold);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hrx-avatar-sm { width: 26px; height: 26px; font-size: 10.5px; }
.hrx-avatar-lg { width: 44px; height: 44px; font-size: 15px; }

/* ============================================================================
   16. MODAL / DROPDOWN / TOOLTIP / TABS
   ========================================================================== */
.hrx-overlay {
  position: fixed; inset: 0;
  background: rgba(14,14,17,.32);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  padding: var(--hrx-space-6);
  z-index: 1000;
}
.hrx-modal {
  background: var(--hrx-surface);
  border: 1px solid var(--hrx-border);
  border-radius: var(--hrx-radius-xl);
  box-shadow: var(--hrx-shadow-lg);
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow: auto;
}
.hrx-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hrx-space-4);
  padding: var(--hrx-space-5) var(--hrx-space-6);
  border-bottom: 1px solid var(--hrx-divider);
}
.hrx-modal-body   { padding: var(--hrx-space-6); }
.hrx-modal-footer {
  display: flex; justify-content: flex-end; gap: var(--hrx-space-3);
  padding: var(--hrx-space-4) var(--hrx-space-6);
  border-top: 1px solid var(--hrx-divider);
}

.hrx-dropdown {
  background: var(--hrx-surface);
  border: 1px solid var(--hrx-border);
  border-radius: var(--hrx-radius-md);
  box-shadow: var(--hrx-shadow-md);
  padding: 6px;
  min-width: 180px;
}
.hrx-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--hrx-radius-sm);
  font-size: 14px;
  color: var(--hrx-text-secondary);
  cursor: pointer;
  transition: background var(--hrx-transition), color var(--hrx-transition);
}
.hrx-dropdown-item:hover { background: var(--hrx-surface-muted); color: var(--hrx-text-primary); }
.hrx-dropdown-item.is-danger { color: var(--hrx-danger-text); }
.hrx-dropdown-item.is-danger:hover { background: var(--hrx-danger-soft); }
.hrx-dropdown-divider { height: 1px; background: var(--hrx-divider); margin: 6px 4px; }

.hrx-tooltip {
  background: var(--hrx-ink);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--hrx-radius-sm);
  box-shadow: var(--hrx-shadow-md);
  max-width: 240px;
}

.hrx-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--hrx-surface-cloud); border-radius: var(--hrx-radius-pill); }
.hrx-tab {
  padding: 7px 16px;
  border-radius: var(--hrx-radius-pill);
  font-size: 13px; font-weight: var(--hrx-weight-medium);
  color: var(--hrx-text-secondary);
  cursor: pointer; border: 0; background: transparent;
  transition: background var(--hrx-transition), color var(--hrx-transition);
}
.hrx-tab.is-active { background: var(--hrx-surface); color: var(--hrx-text-primary); box-shadow: var(--hrx-shadow-sm); }

/* ============================================================================
   17. EMPTY STATE / LOADING / TOAST
   ========================================================================== */
.hrx-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--hrx-space-3);
  padding: var(--hrx-space-12) var(--hrx-space-6);
  color: var(--hrx-text-muted);
}
.hrx-empty-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hrx-brand-wash); color: var(--hrx-brand);
}
.hrx-empty-title { font-size: 15px; font-weight: var(--hrx-weight-semibold); color: var(--hrx-text-primary); }

.hrx-skeleton {
  background: linear-gradient(90deg, var(--hrx-surface-muted) 25%, var(--hrx-surface-cloud) 37%, var(--hrx-surface-muted) 63%);
  background-size: 400% 100%;
  border-radius: var(--hrx-radius-sm);
  animation: hrx-shimmer 1.4s ease infinite;
}
@keyframes hrx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.hrx-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--hrx-border-strong);
  border-top-color: var(--hrx-brand);
  border-radius: 50%;
  animation: hrx-spin .7s linear infinite;
}
@keyframes hrx-spin { to { transform: rotate(360deg); } }

.hrx-toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--hrx-surface);
  border: 1px solid var(--hrx-border);
  border-left: 3px solid var(--hrx-brand);
  border-radius: var(--hrx-radius-md);
  box-shadow: var(--hrx-shadow-md);
  padding: 12px 16px;
  font-size: 14px; color: var(--hrx-text-primary);
  max-width: 380px;
}
.hrx-toast.is-success { border-left-color: var(--hrx-success); }
.hrx-toast.is-warning { border-left-color: var(--hrx-warning); }
.hrx-toast.is-danger  { border-left-color: var(--hrx-danger); }

/* ============================================================================
   18. ICON RULES
   Single coherent line-icon family (currentColor stroke). Default ink,
   muted secondary, ROSE for active, semantic colors only where required.
   ========================================================================== */
.hrx-ico { display: inline-grid; place-items: center; color: currentColor; }
.hrx-ico svg { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2; fill: none; }
.hrx-ico-muted   { color: var(--hrx-text-muted); }
.hrx-ico-active  { color: var(--hrx-brand); }
.hrx-ico-success { color: var(--hrx-success); }
.hrx-ico-warning { color: var(--hrx-warning); }
.hrx-ico-danger  { color: var(--hrx-danger); }

/* ============================================================================
   19. AMBIENT / DECORATIVE (subtle brand warmth — NOT literal hero art)
   ========================================================================== */
.hrx-dotgrid  { background-image: radial-gradient(rgba(14,14,17,.05) 1px, transparent 1px); background-size: 26px 26px; }
.hrx-spotlight{ background: radial-gradient(60% 55% at 50% 0%, rgba(234,36,81,.08), transparent 70%); }
.hrx-grad-text{ background: linear-gradient(90deg, var(--hrx-brand), var(--hrx-brand-hover)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Kept for backward compatibility with any earlier markup. */
.yts-eyebrow  { display: inline-flex; align-items: center; gap: .5rem; border-radius: var(--hrx-radius-pill); border: 1px solid var(--hrx-border); background: var(--hrx-surface-blush); padding: .3rem .75rem; font-size: .6875rem; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--hrx-brand-hover); white-space: nowrap; }
.yts-chip     { display: inline-flex; align-items: center; gap: .375rem; border-radius: var(--hrx-radius-pill); border: 1px solid var(--hrx-border); background: var(--hrx-surface-muted); padding: .25rem .75rem; font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--hrx-text-secondary); }
.yts-dotgrid  { background-image: radial-gradient(rgba(14,14,17,.05) 1px, transparent 1px); background-size: 26px 26px; }
.yts-spotlight{ background: radial-gradient(60% 55% at 50% 0%, rgba(234,36,81,.08), transparent 70%); }
.yts-grad-text{ background: linear-gradient(90deg, var(--hrx-brand), var(--hrx-brand-hover)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================================
   20. GLOBAL PAGE FEEL — selection + scrollbar (warm, matches the landing page)
   ========================================================================== */
::selection { background: var(--hrx-brand-soft); color: var(--hrx-text-primary); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--hrx-surface-muted); }
::-webkit-scrollbar-thumb { background: #DAD8D3; border-radius: 8px; border: 3px solid var(--hrx-surface-muted); }
::-webkit-scrollbar-thumb:hover { background: var(--hrx-brand); }

/* ============================================================================
   21. RESPONSIVE RULES (breakpoints the portals share)
   Mobile-first tokens adjust gutter / container. Layout composition itself is
   handled by each portal; these keep the system's rhythm consistent.
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --hrx-gutter: clamp(16px, 3.5vw, 32px);
    --hrx-sidebar-w: 224px;
  }
}
@media (max-width: 768px) {
  :root {
    --hrx-gutter: 16px;
    --hrx-nav-height: 56px;
  }
  .hrx-card-header,
  .hrx-card-body,
  .hrx-modal-body { padding: var(--hrx-space-4); }
  .hrx-modal { max-width: 100%; border-radius: var(--hrx-radius-lg); }
  .hrx-table thead th,
  .hrx-table tbody td { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}