/* ============================================================
   i-Rent Design System — global tokens & helpers
   Used by the subscription pages redesign and the shared
   AccountHeader. Loaded globally after style.bundle + site.css.
   ============================================================ */

:root {
    /* Brand */
    --blue-500: #0b64f4; /* primary */
    --blue-600: #0950c3; /* primary hover */
    --blue-50:  #f0f6fe; /* tint / soft fill */

    /* Neutrals (ink scale) */
    --ink-900: #0f1729; /* main text */
    --ink-700: #334155; /* secondary text */
    --ink-600: #52637a; /* muted text */
    --ink-400: #94a3b8; /* placeholder / disabled */
    --ink-300: #cbd5e1; /* strong border */
    --ink-200: #e2e8f0; /* default border */
    --ink-150: #eef2f7; /* hairline */
    --ink-100: #f4f7fb; /* surface */
    --ink-50:  #f8fafc; /* alt background */

    /* Status */
    --success: #2f9e44;        --success-bg: #e6f6ea;
    --warning: #d97706;        --warning-bg: #fbe9da;        --warning-border: #f3cfae;
    --danger:  #dc2626;        --danger-bg:  #fdeaea;        --danger-border:  #f5c9c9;

    /* Radii */
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows */
    --shadow-card:    0 2px 8px rgba(15,23,41,.06), 0 0 0 1px rgba(15,23,41,.03);
    --shadow-primary: 0 6px 16px rgba(11,100,244,.28);
    --shadow-danger:  0 6px 16px rgba(220,38,38,.24);

    /* ---- Legacy --r24-* aliases ----
       The account pages (r24-account.css + several .cshtml) were written
       against a --r24-* token set with identical color values. Aliased
       here so the canonical --blue-*/--ink-* set is the single source of
       truth, and the duplicate :root block in r24-account.css is removed.
       Colors → canonical vars (identical). Radii kept as literals (the
       r24 scale 8/10/12/14 differs from the canonical 8/12/16, so we
       preserve the account-page silhouette). shadow-card kept literal
       (no hairline ring); primary/danger alias the canonical values. */
    --r24-blue:           var(--blue-500);
    --r24-blue-dark:      var(--blue-600);
    --r24-blue-tint:      var(--blue-50);
    --r24-ink-900:        var(--ink-900);
    --r24-ink-700:        var(--ink-700);
    --r24-ink-600:        var(--ink-600);
    --r24-ink-400:        var(--ink-400);
    --r24-ink-300:        var(--ink-300);
    --r24-ink-200:        var(--ink-200);
    --r24-ink-150:        var(--ink-150);
    --r24-ink-100:        var(--ink-100);
    --r24-ink-50:         var(--ink-50);
    --r24-success:        var(--success);
    --r24-success-bg:     var(--success-bg);
    --r24-warning:        var(--warning);
    --r24-warning-bg:     var(--warning-bg);
    --r24-warning-border: var(--warning-border);
    --r24-danger:         var(--danger);
    --r24-danger-bg:      var(--danger-bg);
    --r24-danger-border:  var(--danger-border);
    --r24-radius-sm:      8px;
    --r24-radius-md:      10px;
    --r24-radius-lg:      12px;
    --r24-radius-xl:      14px;
    --r24-shadow-card:    0 2px 8px rgba(15, 23, 41, .06);
    --r24-shadow-primary: var(--shadow-primary);
    --r24-shadow-danger:  var(--shadow-danger);

}

/* Material Symbols Rounded helper (replaces Keenicons in the redesign) */
.msr {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

.msr.fill {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Horizontal scroll strips without a visible scrollbar (mobile nav) */
.r24-noscroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.r24-noscroll::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}