/* ═════════════════════════════════════════════════════════════════════════
   RENTLY DASHBOARD DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────────────
   Universal design tokens consumed by the Server/Components/Shared/Dashboards/
   primitive components (DashboardShell, DashboardHero, DashboardKpiCard, etc.).

   ARCHITECTURE
   ────────────
   Two layers of variables flow through this system:

   1) :root tokens (defined here) — palette, status, spacing, radius, shadow,
      typography, transitions, z-index. These NEVER change between sections.

   2) --section-accent (NOT defined in :root by design) — set inline on each
      section's layout root by DashboardShell:
          <div class="rently-shell" style="--section-accent: #35a0ae">

      All shared primitives reference var(--section-accent) and derive tints
      via color-mix(in srgb, var(--section-accent) NN%, target). This is the
      same pattern that lets /admin/assistants ship five distinct character
      looks from one set of shared components (--ast-accent).

      A safety fallback is declared on .rently-shell below so components
      rendered outside a sectioned context still get brand teal instead of
      transparent / black.

   SECTION ACCENT PALETTE
   ──────────────────────
     Account            → #35a0ae  (brand teal — personal/member)
     Store              → #1f8893  (cool teal — operator)
     Organization       → #0b7a75  (deep teal — franchise) [overridable by Organization.BrandColor]
     Success Ambassador → #d97757  (warm coral — mentor)
     Learning           → #f59e0b  (warm amber — academy)

   COMPATIBILITY
   ─────────────
   color-mix() is required (Chrome 111+ / Safari 16.2+ / Firefox 113+, all of
   which are well below Rently's supported baseline). No polyfill needed.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── Palette: surfaces ─── */
    --rently-shell-bg: #f8f9fb;        /* Nordic frost — dashboard page background */
    --rently-card-bg: #ffffff;         /* Component card surface */
    --rently-elevated-bg: #ffffff;     /* Floating/elevated element */
    --rently-muted-bg: #f1f5f9;        /* Pill background, hover wash, divider tracks */
    --rently-subtle-bg: #f8f9fb;       /* Table headers, light striping */

    /* ─── Palette: borders ─── */
    --rently-border: #e8ecf1;          /* Standard 1px component border */
    --rently-border-strong: #d1d5db;   /* Outline button border, stronger separators */
    --rently-border-subtle: #f1f5f9;   /* Internal cell divider, ghost borders */

    /* ─── Palette: text ─── */
    --rently-text-primary: #0f172a;    /* slate-900 — main headings, KPI values */
    --rently-text-strong: #1e293b;     /* slate-800 — section titles, card names */
    --rently-text-body: #334155;       /* slate-700 — body copy */
    --rently-text-secondary: #475569;  /* slate-600 — actionbar text, button labels */
    --rently-text-tertiary: #64748b;   /* slate-500 — subtitles, captions, helper text */
    --rently-text-muted: #94a3b8;      /* slate-400 — placeholders, "more" links */
    --rently-text-on-accent: #ffffff;  /* White text on accent-filled surfaces */

    /* ─── Brand colors ─── */
    --rently-primary: #35a0ae;         /* Brand teal (matches existing brand spec) */
    --rently-primary-hover: #2d8a96;
    --rently-secondary: #EF412c;       /* Brand red */
    --rently-secondary-hover: #d63a26;

    /* ─── Status colors (universal — NOT section-themed) ─── */
    --rently-ok: #16a34a;
    --rently-ok-bg: rgba(22, 163, 74, 0.08);
    --rently-ok-text: #15803d;
    --rently-ok-glow: rgba(22, 163, 74, 0.4);

    --rently-info: #3b82f6;
    --rently-info-bg: rgba(59, 130, 246, 0.08);
    --rently-info-text: #1d4ed8;
    --rently-info-glow: rgba(59, 130, 246, 0.4);

    --rently-warning: #f59e0b;
    --rently-warning-bg: rgba(245, 158, 11, 0.08);
    --rently-warning-text: #b45309;
    --rently-warning-glow: rgba(245, 158, 11, 0.4);

    --rently-critical: #dc2626;
    --rently-critical-bg: rgba(239, 68, 68, 0.08);
    --rently-critical-text: #dc2626;
    --rently-critical-glow: rgba(220, 38, 38, 0.4);

    /* ─── Spacing scale (lifted from .adm-* — Nordic rhythm) ─── */
    --rently-space-1: 0.25rem;         /* 4px  — tight gap (icon-text) */
    --rently-space-2: 0.5rem;          /* 8px  — small gap */
    --rently-space-3: 0.625rem;        /* 10px — pill padding y, actionbar padding y */
    --rently-space-4: 0.75rem;         /* 12px — grid gap, pill padding x */
    --rently-space-5: 0.875rem;        /* 14px — mobile padding x */
    --rently-space-6: 1rem;            /* 16px — KPI padding y, section header padding */
    --rently-space-7: 1.25rem;         /* 20px — page header padding y, card padding x */
    --rently-space-8: 1.5rem;          /* 24px — page header padding x */
    --rently-space-9: 2rem;            /* 32px — section spacing */
    --rently-space-10: 3rem;           /* 48px — empty-state padding */
    --rently-space-11: 4rem;           /* 64px — loading-state padding */

    /* ─── Radius scale ─── */
    --rently-radius-xs: 4px;           /* Tag, mini-badge */
    --rently-radius-sm: 6px;           /* Small chip */
    --rently-radius-md: 8px;           /* Button (matches brand spec) */
    --rently-radius-lg: 10px;          /* Card */
    --rently-radius-xl: 12px;          /* Large card */
    --rently-radius-2xl: 18px;         /* Hero card / gamification card (Profile.razor.css) */
    --rently-radius-pill: 20px;        /* Status pill */
    --rently-radius-full: 999px;       /* Avatar circle, full pill */

    /* ─── Shadow scale ─── */
    --rently-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
    --rently-shadow-2: 0 2px 8px rgba(15, 23, 42, 0.06);
    --rently-shadow-3: 0 4px 12px rgba(15, 23, 42, 0.08);
    --rently-shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.08);
    --rently-shadow-hero: 0 4px 16px rgba(15, 23, 42, 0.1);

    /* ─── Typography ─── */
    --rently-font-display: 'Montserrat', sans-serif;
    --rently-font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;

    --rently-tracking-tight: -0.02em;  /* Display headings */
    --rently-tracking-snug: -0.01em;   /* KPI values */
    --rently-tracking-normal: 0;
    --rently-tracking-wide: 0.05em;    /* Uppercase labels */
    --rently-tracking-wider: 0.06em;   /* Eyebrow text */

    --rently-leading-tight: 1.2;       /* KPI value lines */
    --rently-leading-snug: 1.3;        /* Heading lines */
    --rently-leading-normal: 1.4;      /* Subtitle lines */
    --rently-leading-relaxed: 1.6;     /* Body/code lines */

    /* ─── Transitions ─── */
    --rently-transition-fast: 0.15s ease;  /* Hover, focus */
    --rently-transition-base: 0.2s ease;   /* Default */
    --rently-transition-slow: 0.4s ease;   /* Progress bars, layout shifts */

    /* ─── Z-index scale ─── */
    --rently-z-base: 1;
    --rently-z-hero-decoration: 1;
    --rently-z-hero-content: 2;
    --rently-z-pill: 5;
    --rently-z-sidebar: 100;
    --rently-z-dropdown: 200;
    --rently-z-toast: 500;
    --rently-z-modal: 1000;
}

/* ═════════════════════════════════════════════════════════════════════════
   .rently-shell — fallback section-accent declaration
   ─────────────────────────────────────────────────────────────────────────
   DashboardShell sets --section-accent inline via style="...". If a primitive
   is rendered outside a DashboardShell context (during local development,
   storybook-style previews, or partial renders), this fallback ensures the
   accent gracefully degrades to brand teal instead of going transparent.
   ═════════════════════════════════════════════════════════════════════════ */
.rently-shell {
    --section-accent: #35a0ae;
}

/* ═════════════════════════════════════════════════════════════════════════
   Utility: touch-target enforcement at ≤960px (WCAG 2.5.5)
   ─────────────────────────────────────────────────────────────────────────
   Per the existing Nordic admin precedent (ServiceDiagnostics.razor.css
   lines 1120-1133), all interactive elements must meet 44×44 effective hit
   area at tablet and below. Wrap any action chip or icon button in this
   class to inherit the rule.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .rently-touch-target {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   Utility: reduced-motion respect
   ─────────────────────────────────────────────────────────────────────────
   Surfaces using transitions or animations should also wrap motion-bearing
   bits in this guard. The class on its own does nothing — it only switches
   off transitions when the user's OS reports prefers-reduced-motion.
   Phase 5 (Learning) BadgeReveal animation depends on this.
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .rently-respects-motion *,
    .rently-respects-motion *::before,
    .rently-respects-motion *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}