/* ==========================================================================
   TrackerPro Customer Portal - Design Tokens
   "Operational Navy" design language.

   This file declares custom properties only. It must not contain selectors
   other than :root. All component styling lives in theme.css.

   Load order in _MasterLayout.cshtml:
     mainlayout.css (stock AdminLTE)  ->  tokens.css  ->  theme.css
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------------
       Brand
       Derived from the TrackerPro wave mark. The cyan is an ACCENT only:
       #12A5DB on white is ~2.6:1 and fails WCAG AA for text and button
       fills. Primary actions use --tp-blue-600.
       --------------------------------------------------------------------- */
    --tp-cyan-50: #ECFAFF;
    --tp-cyan-100: #D0F2FE;
    --tp-cyan-200: #A6E7FC;
    --tp-cyan-300: #6FD6F7;
    --tp-cyan-400: #35BFEE;
    --tp-cyan-500: #12A5DB; /* logo highlight */
    --tp-cyan-600: #0B84B4;
    --tp-cyan-700: #0C6A91;

    --tp-blue-400: #2E7AD1;
    --tp-blue-500: #1B6BC0;
    --tp-blue-600: #14559E; /* PRIMARY ACTION */
    --tp-blue-700: #114681;
    --tp-blue-800: #0E3865;
    --tp-blue-900: #0B2545; /* sidebar / chrome ink */

    /* ---------------------------------------------------------------------
       Neutrals - blue-tinted slate, never pure grey
       --------------------------------------------------------------------- */
    --tp-n-0: #FFFFFF;
    --tp-n-25: #FAFBFC; /* app canvas */
    --tp-n-50: #F4F6F8;
    --tp-n-100: #EAEEF2;
    --tp-n-200: #DCE3EA; /* borders */
    --tp-n-300: #C4CDD6;
    --tp-n-400: #97A3AF;
    --tp-n-500: #6B7785; /* secondary text */
    --tp-n-700: #3D4854;
    --tp-n-900: #16202B; /* primary text */

    /* ---------------------------------------------------------------------
       Semantic status
       ONE fixed mapping used portal-wide:
         info   = Open, In contract
         warning= Needs your action (unscheduled, awaiting signature, overdue)
         danger = Out of contract, failed, cancelled
         quiet  = Closed, completed, paid  (NOT red, NOT green)
         success= reserved for genuine positive confirmation only
       --------------------------------------------------------------------- */
    --tp-success: #0F7A4D;
    --tp-success-bg: #E7F6EF;
    --tp-success-border: #B7E4CE;

    --tp-warning: #B26A00;
    --tp-warning-bg: #FDF3E2;
    --tp-warning-border: #F5D9A8;

    --tp-danger: #B42318;
    --tp-danger-bg: #FEECEB;
    --tp-danger-border: #F6C9C5;

    --tp-info: #0B84B4;
    --tp-info-bg: #E6F6FC;
    --tp-info-border: #B5E3F4;

    --tp-quiet: #6B7785;
    --tp-quiet-bg: #EFF2F5;
    --tp-quiet-border: #DCE3EA;

    /* ---------------------------------------------------------------------
       Typography
       Base 14px for desktop density. Mobile inputs are forced to 16px in
       theme.css so iOS Safari does not zoom the viewport on focus.
       --------------------------------------------------------------------- */
    --tp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tp-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --tp-fs-12: 0.75rem;
    --tp-fs-13: 0.8125rem;
    --tp-fs-14: 0.875rem;
    --tp-fs-16: 1rem;
    --tp-fs-20: 1.25rem;
    --tp-fs-24: 1.5rem;
    --tp-fs-30: 1.875rem;
    --tp-fs-36: 2.25rem;

    --tp-fw-regular: 400;
    --tp-fw-medium: 500;
    --tp-fw-semibold: 600;
    --tp-fw-bold: 700;

    --tp-lh-tight: 1.25;
    --tp-lh-snug: 1.4;
    --tp-lh-base: 1.5;

    --tp-tracking-caps: 0.04em;

    /* ---------------------------------------------------------------------
       Spacing - 8px base
       --------------------------------------------------------------------- */
    --tp-space-1: 4px;
    --tp-space-2: 8px;
    --tp-space-3: 12px;
    --tp-space-4: 16px;
    --tp-space-5: 20px;
    --tp-space-6: 24px;
    --tp-space-8: 32px;
    --tp-space-12: 48px;

    /* ---------------------------------------------------------------------
       Radius - nothing above 8px. Large radii read consumer; this is a
       business tool.
       --------------------------------------------------------------------- */
    --tp-radius-sm: 4px; /* badges, chips */
    --tp-radius-md: 6px; /* buttons, inputs */
    --tp-radius-lg: 8px; /* cards, panels */
    --tp-radius-pill: 999px; /* status pills only */

    /* ---------------------------------------------------------------------
       Elevation - near flat. Separation comes from 1px borders, not shadow.
       --shadow-md is for overlays only (dropdowns, drawers, modals).
       --------------------------------------------------------------------- */
    --tp-shadow-sm: 0 1px 2px rgba(16, 32, 45, .06);
    --tp-shadow-md: 0 8px 24px rgba(11, 37, 69, .12);
    --tp-shadow-lg: 0 16px 48px rgba(11, 37, 69, .18);
    --tp-focus-ring: 0 0 0 3px rgba(18, 165, 219, .35);

    /* ---------------------------------------------------------------------
       Layout metrics
       --------------------------------------------------------------------- */
    --tp-sidebar-w: 248px;
    --tp-sidebar-rail-w: 72px;
    --tp-topbar-h: 56px;
    --tp-bottomnav-h: 56px;
    --tp-row-h: 44px;
    --tp-control-h: 36px;
    --tp-control-h-mobile: 44px;
    --tp-page-gutter: 24px;
    --tp-page-gutter-mobile: 16px;
    --tp-card-pad: 20px;
    --tp-drawer-w: 480px;

    /* ---------------------------------------------------------------------
       Motion
       --------------------------------------------------------------------- */
    --tp-ease: cubic-bezier(.4, 0, .2, 1);
    --tp-dur-fast: 120ms;
    --tp-dur-base: 200ms;
    --tp-dur-slow: 320ms;

    /* Z-index scale - keeps AdminLTE, DevExtreme overlays and our drawers
       from fighting. AdminLTE sidebar sits at 1038, modals at 1050. */
    --tp-z-sticky: 1020;
    --tp-z-drawer-scrim: 1040;
    --tp-z-drawer: 1045;
    --tp-z-bottomnav: 1030;
    --tp-z-toast: 1080;

    /* Theme identity - light is the default. */
    --tp-theme-name: light;
}

/* ==========================================================================
   Dark theme
   Remaps the same token names so every consumer of var(--tp-*) flips with one
   class on <html>. Preference is stored in a cookie (tp_theme), not the DB.
   ========================================================================== */

html.tp-theme-dark {
    --tp-theme-name: dark;

    --tp-cyan-50: #0A2A36;
    --tp-cyan-100: #0C3A4A;
    --tp-cyan-200: #0E5066;
    --tp-cyan-300: #1A7A9A;
    --tp-cyan-400: #2EB4D9;
    --tp-cyan-500: #3EC4E8;
    --tp-cyan-600: #6FD6F7;
    --tp-cyan-700: #A6E7FC;

    --tp-blue-400: #5B9BE0;
    --tp-blue-500: #4A8CD4;
    --tp-blue-600: #3B7BC4;
    --tp-blue-700: #2E6AAD;
    --tp-blue-800: #1A4A7A;
    --tp-blue-900: #0A1628;

    --tp-n-0: #121820;
    --tp-n-25: #0E141C;
    --tp-n-50: #182029;
    --tp-n-100: #222C38;
    --tp-n-200: #2E3A48;
    --tp-n-300: #445262;
    --tp-n-400: #7A8A9A;
    --tp-n-500: #9AAAB8;
    --tp-n-700: #C5D0DA;
    --tp-n-900: #E8EEF4;

    --tp-success: #3DDB93;
    --tp-success-bg: #0F2A1E;
    --tp-success-border: #1A4A32;

    --tp-warning: #E0A03A;
    --tp-warning-bg: #2A2010;
    --tp-warning-border: #4A3818;

    --tp-danger: #F07167;
    --tp-danger-bg: #2A1210;
    --tp-danger-border: #5A2820;

    --tp-info: #3EC4E8;
    --tp-info-bg: #0A2A36;
    --tp-info-border: #0E5066;

    --tp-quiet: #9AAAB8;
    --tp-quiet-bg: #1A222C;
    --tp-quiet-border: #2E3A48;

    --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --tp-shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --tp-shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
    --tp-focus-ring: 0 0 0 3px rgba(62, 196, 232, .35);
}

/* ==========================================================================
   Accent colour packs
   Remap brand cyan/blue (+ info + focus). Default TrackerPro cyan/navy needs
   no class. Choice is stored in cookie tp_accent (not the DB).
   ========================================================================== */

html.tp-accent-teal {
    --tp-cyan-50: #F0FDFA;
    --tp-cyan-100: #CCFBF1;
    --tp-cyan-200: #99F6E4;
    --tp-cyan-300: #5EEAD4;
    --tp-cyan-400: #2DD4BF;
    --tp-cyan-500: #14B8A6;
    --tp-cyan-600: #0D9488;
    --tp-cyan-700: #0F766E;

    --tp-blue-400: #2DD4BF;
    --tp-blue-500: #14B8A6;
    --tp-blue-600: #0F766E;
    --tp-blue-700: #115E59;
    --tp-blue-800: #134E4A;
    --tp-blue-900: #042F2E;

    --tp-info: #0D9488;
    --tp-info-bg: #F0FDFA;
    --tp-info-border: #99F6E4;
    --tp-focus-ring: 0 0 0 3px rgba(20, 184, 166, .35);
}

html.tp-accent-indigo {
    --tp-cyan-50: #EEF2FF;
    --tp-cyan-100: #E0E7FF;
    --tp-cyan-200: #C7D2FE;
    --tp-cyan-300: #A5B4FC;
    --tp-cyan-400: #818CF8;
    --tp-cyan-500: #6366F1;
    --tp-cyan-600: #4F46E5;
    --tp-cyan-700: #4338CA;

    --tp-blue-400: #818CF8;
    --tp-blue-500: #6366F1;
    --tp-blue-600: #4F46E5;
    --tp-blue-700: #4338CA;
    --tp-blue-800: #3730A3;
    --tp-blue-900: #1E1B4B;

    --tp-info: #4F46E5;
    --tp-info-bg: #EEF2FF;
    --tp-info-border: #C7D2FE;
    --tp-focus-ring: 0 0 0 3px rgba(99, 102, 241, .35);
}

html.tp-accent-emerald {
    --tp-cyan-50: #ECFDF5;
    --tp-cyan-100: #D1FAE5;
    --tp-cyan-200: #A7F3D0;
    --tp-cyan-300: #6EE7B7;
    --tp-cyan-400: #34D399;
    --tp-cyan-500: #10B981;
    --tp-cyan-600: #059669;
    --tp-cyan-700: #047857;

    --tp-blue-400: #34D399;
    --tp-blue-500: #10B981;
    --tp-blue-600: #047857;
    --tp-blue-700: #065F46;
    --tp-blue-800: #064E3B;
    --tp-blue-900: #022C22;

    --tp-info: #059669;
    --tp-info-bg: #ECFDF5;
    --tp-info-border: #A7F3D0;
    --tp-focus-ring: 0 0 0 3px rgba(16, 185, 129, .35);
}

html.tp-accent-amber {
    --tp-cyan-50: #FFFBEB;
    --tp-cyan-100: #FEF3C7;
    --tp-cyan-200: #FDE68A;
    --tp-cyan-300: #FCD34D;
    --tp-cyan-400: #FBBF24;
    --tp-cyan-500: #F59E0B;
    --tp-cyan-600: #D97706;
    --tp-cyan-700: #B45309;

    --tp-blue-400: #FBBF24;
    --tp-blue-500: #D97706;
    --tp-blue-600: #B45309;
    --tp-blue-700: #92400E;
    --tp-blue-800: #78350F;
    --tp-blue-900: #451A03;

    --tp-info: #D97706;
    --tp-info-bg: #FFFBEB;
    --tp-info-border: #FDE68A;
    --tp-focus-ring: 0 0 0 3px rgba(245, 158, 11, .4);
}

html.tp-accent-rose {
    --tp-cyan-50: #FFF1F2;
    --tp-cyan-100: #FFE4E6;
    --tp-cyan-200: #FECDD3;
    --tp-cyan-300: #FDA4AF;
    --tp-cyan-400: #FB7185;
    --tp-cyan-500: #F43F5E;
    --tp-cyan-600: #E11D48;
    --tp-cyan-700: #BE123C;

    --tp-blue-400: #FB7185;
    --tp-blue-500: #F43F5E;
    --tp-blue-600: #BE123C;
    --tp-blue-700: #9F1239;
    --tp-blue-800: #881337;
    --tp-blue-900: #4C0519;

    --tp-info: #E11D48;
    --tp-info-bg: #FFF1F2;
    --tp-info-border: #FECDD3;
    --tp-focus-ring: 0 0 0 3px rgba(244, 63, 94, .35);
}

/* Dark + accent: lift action colours for contrast on dark canvas. */
html.tp-theme-dark.tp-accent-teal {
    --tp-cyan-50: #042F2E;
    --tp-cyan-100: #134E4A;
    --tp-cyan-200: #115E59;
    --tp-cyan-300: #0D9488;
    --tp-cyan-400: #2DD4BF;
    --tp-cyan-500: #5EEAD4;
    --tp-cyan-600: #99F6E4;
    --tp-cyan-700: #CCFBF1;

    --tp-blue-400: #5EEAD4;
    --tp-blue-500: #2DD4BF;
    --tp-blue-600: #14B8A6;
    --tp-blue-700: #0D9488;
    --tp-blue-800: #134E4A;
    --tp-blue-900: #021A19;

    --tp-info: #2DD4BF;
    --tp-info-bg: #042F2E;
    --tp-info-border: #115E59;
    --tp-focus-ring: 0 0 0 3px rgba(45, 212, 191, .35);
}

html.tp-theme-dark.tp-accent-indigo {
    --tp-cyan-50: #1E1B4B;
    --tp-cyan-100: #312E81;
    --tp-cyan-200: #3730A3;
    --tp-cyan-300: #4F46E5;
    --tp-cyan-400: #818CF8;
    --tp-cyan-500: #A5B4FC;
    --tp-cyan-600: #C7D2FE;
    --tp-cyan-700: #E0E7FF;

    --tp-blue-400: #A5B4FC;
    --tp-blue-500: #818CF8;
    --tp-blue-600: #6366F1;
    --tp-blue-700: #4F46E5;
    --tp-blue-800: #3730A3;
    --tp-blue-900: #0F0E24;

    --tp-info: #818CF8;
    --tp-info-bg: #1E1B4B;
    --tp-info-border: #3730A3;
    --tp-focus-ring: 0 0 0 3px rgba(129, 140, 248, .4);
}

html.tp-theme-dark.tp-accent-emerald {
    --tp-cyan-50: #022C22;
    --tp-cyan-100: #064E3B;
    --tp-cyan-200: #065F46;
    --tp-cyan-300: #059669;
    --tp-cyan-400: #34D399;
    --tp-cyan-500: #6EE7B7;
    --tp-cyan-600: #A7F3D0;
    --tp-cyan-700: #D1FAE5;

    --tp-blue-400: #6EE7B7;
    --tp-blue-500: #34D399;
    --tp-blue-600: #10B981;
    --tp-blue-700: #059669;
    --tp-blue-800: #064E3B;
    --tp-blue-900: #011A14;

    --tp-info: #34D399;
    --tp-info-bg: #022C22;
    --tp-info-border: #065F46;
    --tp-focus-ring: 0 0 0 3px rgba(52, 211, 153, .35);
}

html.tp-theme-dark.tp-accent-amber {
    --tp-cyan-50: #451A03;
    --tp-cyan-100: #78350F;
    --tp-cyan-200: #92400E;
    --tp-cyan-300: #D97706;
    --tp-cyan-400: #FBBF24;
    --tp-cyan-500: #FCD34D;
    --tp-cyan-600: #FDE68A;
    --tp-cyan-700: #FEF3C7;

    --tp-blue-400: #FCD34D;
    --tp-blue-500: #FBBF24;
    --tp-blue-600: #F59E0B;
    --tp-blue-700: #D97706;
    --tp-blue-800: #78350F;
    --tp-blue-900: #1C0A02;

    --tp-info: #FBBF24;
    --tp-info-bg: #451A03;
    --tp-info-border: #92400E;
    --tp-focus-ring: 0 0 0 3px rgba(251, 191, 36, .4);
}

html.tp-theme-dark.tp-accent-rose {
    --tp-cyan-50: #4C0519;
    --tp-cyan-100: #881337;
    --tp-cyan-200: #9F1239;
    --tp-cyan-300: #E11D48;
    --tp-cyan-400: #FB7185;
    --tp-cyan-500: #FDA4AF;
    --tp-cyan-600: #FECDD3;
    --tp-cyan-700: #FFE4E6;

    --tp-blue-400: #FDA4AF;
    --tp-blue-500: #FB7185;
    --tp-blue-600: #F43F5E;
    --tp-blue-700: #E11D48;
    --tp-blue-800: #881337;
    --tp-blue-900: #2A0210;

    --tp-info: #FB7185;
    --tp-info-bg: #4C0519;
    --tp-info-border: #9F1239;
    --tp-focus-ring: 0 0 0 3px rgba(251, 113, 133, .4);
}

@media (prefers-reduced-motion: reduce) {
    :root,
    html.tp-theme-dark {
        --tp-dur-fast: 1ms;
        --tp-dur-base: 1ms;
        --tp-dur-slow: 1ms;
    }
}