/* ============================================================
   TP PH PERFORMANCE PULSE — DESIGN SYSTEM  (V2)
   Tokens, typography scale, reset.
   Language: WFM Studio. Palette: TP brand neutrals/violets +
   semantic enterprise status (emerald/teal/amber/rose).
   Neutral-dominant; color reserved for status, variance,
   alerts, progress, priority. Light default + dark support.
   ============================================================ */

/* ---- LIGHT THEME (default) ---- */
:root,
[data-theme="light"] {
    /* Brand accent — TP MAGENTA is the primary identity (active nav, focus,
       selected, primary buttons); violet/purple support charts only. */
    --accent-primary:     #E6007E;
    --accent-primary-rgb: 230, 0, 126;
    --accent-secondary:   #E6007E;
    --accent-secondary-rgb: 230, 0, 126;
    --accent-purple:      #7A1AA0;
    --accent-violet:      #6A3FF0;
    --accent-highlight:   #FF0095;

    /* Deep-navy sidebar chrome — CONSTANT across light/dark (product identity).
       Defined only here so the dark theme block does not override it. */
    --magenta: #E6007E; --magenta-rgb: 230, 0, 126; --magenta-bright: #FF4FB5;
    --sidebar-bg: #0C1226; --sidebar-bg-2: #080C1A;
    --sidebar-text: #C7CCE0; --sidebar-text-strong: #FFFFFF; --sidebar-muted: #6E7693;
    --sidebar-border: rgba(255,255,255,0.07); --sidebar-hover: rgba(255,255,255,0.05);
    --sidebar-active-bg: rgba(230,0,126,0.16);

    /* Semantic status — richer enterprise tones */
    --emerald:  #0F9E6E;  --emerald-rgb: 15,158,110;
    --teal:     #0E8E8E;  --teal-rgb:    14,142,142;
    --amber:    #C77A0A;  --amber-rgb:   199,122,10;
    --rose:     #E11D62;  --rose-rgb:    225,29,98;
    /* status aliases (keep class contract: good/watch/bad) */
    --accent-success: var(--emerald); --accent-success-rgb: var(--emerald-rgb);
    --accent-warning: var(--amber);   --accent-warning-rgb:  var(--amber-rgb);
    --accent-danger:  var(--rose);    --accent-danger-rgb:   var(--rose-rgb);
    --accent-teal:    var(--teal);

    /* Backgrounds (cool neutral, calm) */
    --bg-app:        #F5F6FA;
    --bg-sidebar:    #FFFFFF;
    --bg-surface:    #FFFFFF;
    --bg-surface-2:  #F7F8FC;
    --bg-surface-3:  #EFF0F6;
    --bg-hover:      #F3F2FA;
    --bg-active:     rgba(230, 0, 126, 0.08);
    --bg-input:      #F7F8FC;
    --bg-topbar:     #FFFFFF;
    --bg-card:       #FFFFFF;
    --bg-overlay:    rgba(12, 18, 38, 0.45);

    /* Borders — hairlines, not boxes */
    --border-subtle:  rgba(40, 34, 74, 0.07);
    --border-default: rgba(40, 34, 74, 0.12);
    --border-strong:  rgba(40, 34, 74, 0.20);
    --border-accent:  rgba(230, 0, 126, 0.38);
    --border-focus:   rgba(230, 0, 126, 0.55);

    /* Text */
    --text-primary:   #15182A;
    --text-secondary: #565B72;
    --text-tertiary:  #8C90A6;
    --text-quaternary:#ABAEC2;
    --text-accent:    #C2007A;
    --text-success:   #0B7E58;
    --text-warning:   #9A5E08;
    --text-danger:    #C20E50;
    --text-teal:      #0B7373;
    --text-on-accent: #FFFFFF;
    --text-inverse:   #FFFFFF;

    /* Elevation — identical system to WFM Studio (sm/md/lg/xl/card/glow) */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 40px rgba(0,0,0,0.14);
    --e1: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px var(--border-subtle);
    --e2: var(--shadow-md);
    --e3: var(--shadow-xl);
    --glow: 0 0 20px rgba(var(--accent-secondary-rgb), 0.15);
    --e-focus: 0 0 0 1px var(--accent-secondary), 0 0 20px rgba(var(--accent-secondary-rgb),0.15);

    /* Chart categorical series (brand violet-led) */
    --series-1: #3B2E66; --series-2: #5B3FC9; --series-3: #7A1AA0; --series-4: #9A7BFF;
    --series-5: #C2008C; --series-6: #0E8E8E; --series-7: #C77A0A; --series-8: #8E97B8;

    /* Radii — identical to WFM Studio */
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 20px; --radius-pill: 999px;

    /* Spacing (8pt) */
    --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
    --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-56: 56px; --space-72: 72px;

    /* Motion — shell timing identical to WFM Studio (fast/base/slow = 120/200/350);
       expressive reserved for content entrance draws only. */
    --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 350ms ease;
    /* Content-motion band: entrances/fills/draws 320–500ms, one shared easing */
    --dur-micro: 160ms; --dur-base: 360ms; --dur-expressive: 500ms;
    --ease-out: cubic-bezier(.22,.61,.36,1);
    --ease-inout: cubic-bezier(.65,0,.35,1);
    --ease-spring: cubic-bezier(.34,1.4,.64,1);

    /* Shell dimensions — identical to WFM Studio */
    --sidebar-width: 240px; --sidebar-collapsed: 64px; --topbar-height: 58px; --content-max: 1400px;
}

/* ---- DARK THEME ---- */
[data-theme="dark"] {
    --accent-primary:     #FF2FA6;  --accent-primary-rgb: 255, 47, 166;
    --accent-secondary:   #FF2FA6;  --accent-secondary-rgb: 255, 47, 166;
    --accent-purple:      #C078E6;  --accent-violet: #9A7BFF;
    --accent-highlight:   #FF45B2;

    --emerald: #34D399; --emerald-rgb: 52,211,153;
    --teal:    #2DD4BF; --teal-rgb:    45,212,191;
    --amber:   #FBBF24; --amber-rgb:   251,191,36;
    --rose:    #FB7185; --rose-rgb:    251,113,133;
    --accent-success: var(--emerald); --accent-success-rgb: var(--emerald-rgb);
    --accent-warning: var(--amber);   --accent-warning-rgb:  var(--amber-rgb);
    --accent-danger:  var(--rose);    --accent-danger-rgb:   var(--rose-rgb);
    --accent-teal:    var(--teal);

    --bg-app:        #0A0F1E;
    --bg-sidebar:    #0C1226;
    --bg-surface:    #121A2E;
    --bg-surface-2:  #16203A;
    --bg-surface-3:  #1F2B49;
    --bg-hover:      #1A2540;
    --bg-active:     rgba(230, 0, 126, 0.16);
    --bg-input:      #0F1729;
    --bg-topbar:     #0C1226;
    --bg-card:       #121A2E;
    --bg-overlay:    rgba(4, 7, 16, 0.78);

    --border-subtle:  rgba(255,255,255,0.06);
    --border-default: rgba(255,255,255,0.10);
    --border-strong:  rgba(255,255,255,0.18);
    --border-accent:  rgba(255,47,166,0.45);
    --border-focus:   rgba(255,47,166,0.70);

    --text-primary:   #EAEEF8; --text-secondary: #9AA3BC; --text-tertiary: #687087; --text-quaternary: #4E566E;
    --text-accent:    #FF5BB8; --text-success: #34D399; --text-warning: #FBBF24; --text-danger: #FB7185; --text-teal: #2DD4BF;
    --text-on-accent: #FFFFFF; --text-inverse: #131120;

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.55);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.65);
    --e1: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px var(--border-subtle);
    --e2: var(--shadow-md);
    --e3: var(--shadow-xl);
    --glow: 0 0 20px rgba(var(--accent-secondary-rgb), 0.25);
    --e-focus: 0 0 0 1px var(--accent-secondary), 0 0 20px rgba(var(--accent-secondary-rgb),0.25);

    --series-1: #9F8BEA; --series-2: #8268F2; --series-3: #C078E6; --series-4: #B49BFF;
    --series-5: #F06BB8; --series-6: #2DD4BF; --series-7: #FBBF24; --series-8: #8E97B8;
}

/* ============================================================ RESET ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9375rem; line-height: 1.6; color: var(--text-primary); background-color: var(--bg-app);
    overflow: hidden; height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    transition: background-color var(--dur-base) var(--ease-inout), color var(--dur-base) var(--ease-inout);
}
h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.3; color: var(--text-primary); letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.125rem; } h4 { font-size: 1rem; } h5 { font-size: 0.875rem; } h6 { font-size: 0.8125rem; }
p { color: var(--text-secondary); line-height: 1.7; }
a { color: var(--text-accent); text-decoration: none; transition: opacity var(--dur-micro); }
a:hover { opacity: 0.82; }
ul, ol { list-style: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }

/* ============================================================ TYPOGRAPHY SCALE ============================================================ */
.t-display   { font-size: 1.5rem;   font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); line-height: 1.2; }
.t-section   { font-size: 1.0rem;   font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); }
.t-eyebrow   { font-size: 0.6875rem;font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.t-kpi       { font-size: 2rem;     font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.t-support   { font-size: 0.82rem;  font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.t-body      { font-size: 0.9375rem;font-weight: 400; color: var(--text-secondary); }
.t-meta      { font-size: 0.78rem;  font-weight: 500; color: var(--text-tertiary); }
.t-caption   { font-size: 0.7rem;   font-weight: 600; letter-spacing: 0.02em; color: var(--text-tertiary); }

/* ============================================================ UTILITIES ============================================================ */
.text-primary{color:var(--text-primary)!important} .text-secondary{color:var(--text-secondary)!important}
.text-accent{color:var(--text-accent)!important} .text-success{color:var(--text-success)!important}
.text-warning{color:var(--text-warning)!important} .text-danger{color:var(--text-danger)!important}
.text-teal{color:var(--text-teal)!important} .text-muted{color:var(--text-tertiary)!important}
.tnum { font-variant-numeric: tabular-nums; }
.font-mono { font-family: 'Cascadia Code','Fira Code','Consolas','JetBrains Mono',monospace; font-size: 0.875em; }
.font-bold{font-weight:700!important} .font-semi{font-weight:600!important} .font-medium{font-weight:500!important}
.d-flex{display:flex} .d-grid{display:grid} .d-none{display:none!important} .d-block{display:block}
.align-center{align-items:center} .align-end{align-items:flex-end} .justify-between{justify-content:space-between} .justify-end{justify-content:flex-end}
.flex-wrap{flex-wrap:wrap} .flex-1{flex:1} .flex-col{flex-direction:column}
.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px}
.mt-0{margin-top:0!important} .mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px}
.mb-2{margin-bottom:8px} .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
.w-full{width:100%} .h-full{height:100%}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.theme-transitioning * { transition: background-color var(--transition-slow), border-color var(--transition-slow), color var(--transition-slow), box-shadow var(--transition-slow) !important; }

/* ============================================================ MOTION PRIMITIVES ============================================================ */
/* Reveal: applied by motion.js via IntersectionObserver (staggered) */
[data-reveal] { opacity: 0; transform: translateY(8px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}