/* ============================================
   PATRIOT TECH SYSTEMS - DESIGN TOKENS
   Three-tier architecture: Primitive → Semantic → Component
   Official brand: Navy #1B3A5C, Gold #C9A84C, Blue #3A7BD5
   ============================================ */

/* ---- PRIMITIVE TOKENS ---- */
:root {
    /* Brand palette */
    --pt-color-navy-900: #060D17;
    --pt-color-navy-800: #0B1A2E;
    --pt-color-navy-700: #0F2440;
    --pt-color-navy-600: #1B3A5C;
    --pt-color-navy-500: #2A5280;
    --pt-color-navy-400: #3A6FA0;
    --pt-color-navy-300: #5A7A9A;
    --pt-color-navy-200: #8BA4C4;
    --pt-color-navy-100: #B8CCDE;
    --pt-color-navy-50:  #E2EBF3;

    --pt-color-blue-700: #1E4F96;
    --pt-color-blue-600: #2E62AB;
    --pt-color-blue-500: #3A7BD5;
    --pt-color-blue-400: #5A9BE6;
    --pt-color-blue-300: #7EB5F0;
    --pt-color-blue-200: #A3CFF8;
    --pt-color-blue-100: #D1E7FC;

    --pt-color-gold-700: #7A6020;
    --pt-color-gold-600: #A8872E;
    --pt-color-gold-500: #C9A84C;
    --pt-color-gold-400: #D9BF6E;
    --pt-color-gold-300: #E8D48B;
    --pt-color-gold-200: #F0E4B4;
    --pt-color-gold-100: #F8F2DA;

    --pt-color-green-600: #059669;
    --pt-color-green-500: #10B981;
    --pt-color-green-400: #34D399;
    --pt-color-green-300: #6EE7B7;

    --pt-color-yellow-600: #D97706;
    --pt-color-yellow-500: #F59E0B;
    --pt-color-yellow-400: #FBBF24;
    --pt-color-yellow-300: #FCD34D;

    --pt-color-red-600: #DC2626;
    --pt-color-red-500: #EF4444;
    --pt-color-red-400: #F87171;
    --pt-color-red-300: #FCA5A5;

    --pt-color-white: #FFFFFF;
    --pt-color-black: #000000;

    /* Spacing scale (4px base) */
    --pt-space-0: 0;
    --pt-space-1: 0.25rem;   /* 4px */
    --pt-space-2: 0.5rem;    /* 8px */
    --pt-space-3: 0.75rem;   /* 12px */
    --pt-space-4: 1rem;      /* 16px */
    --pt-space-5: 1.25rem;   /* 20px */
    --pt-space-6: 1.5rem;    /* 24px */
    --pt-space-8: 2rem;      /* 32px */
    --pt-space-10: 2.5rem;   /* 40px */
    --pt-space-12: 3rem;     /* 48px */
    --pt-space-16: 4rem;     /* 64px */

    /* Type scale */
    --pt-text-xs: 0.65rem;    /* 10.4px - labels, badges */
    --pt-text-sm: 0.75rem;    /* 12px - captions */
    --pt-text-base: 0.875rem; /* 14px - body */
    --pt-text-md: 1rem;       /* 16px - subheadings */
    --pt-text-lg: 1.125rem;   /* 18px */
    --pt-text-xl: 1.25rem;    /* 20px - page titles */
    --pt-text-2xl: 1.5rem;    /* 24px */
    --pt-text-3xl: 2rem;      /* 32px - big metrics */
    --pt-text-4xl: 2.5rem;    /* 40px */

    /* Font weights */
    --pt-font-light: 300;
    --pt-font-normal: 400;
    --pt-font-medium: 500;
    --pt-font-semibold: 600;
    --pt-font-bold: 700;

    /* Line heights */
    --pt-leading-tight: 1.2;
    --pt-leading-normal: 1.5;
    --pt-leading-relaxed: 1.65;

    /* Border radius */
    --pt-radius-sm: 4px;
    --pt-radius-md: 8px;
    --pt-radius-lg: 12px;
    --pt-radius-xl: 16px;
    --pt-radius-full: 9999px;

    /* Shadows */
    --pt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --pt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --pt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    --pt-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35);

    /* Transitions */
    --pt-transition-fast: 0.1s ease;
    --pt-transition-normal: 0.15s ease;
    --pt-transition-slow: 0.3s ease;

    /* Z-index layers */
    --pt-z-base: 1;
    --pt-z-dropdown: 10;
    --pt-z-sticky: 50;
    --pt-z-sidebar: 100;
    --pt-z-overlay: 200;
    --pt-z-modal: 300;
    --pt-z-toast: 400;
    --pt-z-command: 500;
}


/* ---- SEMANTIC TOKENS (Dark theme - default) ---- */
:root,
[data-theme="dark"] {
    /* Surfaces */
    --pt-bg-app: var(--pt-color-navy-800);
    --pt-bg-sidebar: var(--pt-color-navy-700);
    --pt-bg-surface: #162E4A;
    --pt-bg-surface-hover: #1C3756;
    --pt-bg-elevated: var(--pt-color-navy-600);
    --pt-bg-overlay: rgba(6, 13, 23, 0.75);

    /* Text */
    --pt-text-primary: #F1F5F9;
    --pt-text-secondary: var(--pt-color-navy-200);
    --pt-text-muted: var(--pt-color-navy-300);
    --pt-text-inverse: var(--pt-color-navy-800);

    /* Borders */
    --pt-border-default: rgba(255, 255, 255, 0.08);
    --pt-border-accent: rgba(201, 168, 76, 0.25);
    --pt-border-focus: var(--pt-color-blue-500);

    /* Interactive */
    --pt-interactive-primary: var(--pt-color-blue-500);
    --pt-interactive-primary-hover: var(--pt-color-blue-400);
    --pt-interactive-accent: var(--pt-color-gold-500);
    --pt-interactive-accent-hover: var(--pt-color-gold-400);

    /* Status */
    --pt-status-success: var(--pt-color-green-500);
    --pt-status-success-bg: rgba(16, 185, 129, 0.12);
    --pt-status-warning: var(--pt-color-yellow-500);
    --pt-status-warning-bg: rgba(245, 158, 11, 0.12);
    --pt-status-danger: var(--pt-color-red-500);
    --pt-status-danger-bg: rgba(239, 68, 68, 0.12);
    --pt-status-info: var(--pt-color-blue-500);
    --pt-status-info-bg: rgba(58, 123, 213, 0.12);

    /* Gradients */
    --pt-gradient-primary: linear-gradient(135deg, var(--pt-color-blue-500) 0%, var(--pt-color-gold-500) 100%);
    --pt-gradient-gold: linear-gradient(135deg, var(--pt-color-gold-500) 0%, var(--pt-color-gold-600) 100%);
    --pt-gradient-navy: linear-gradient(135deg, var(--pt-color-navy-600) 0%, var(--pt-color-navy-700) 100%);
    --pt-gradient-subtle: linear-gradient(135deg, rgba(58, 123, 213, 0.15) 0%, rgba(201, 168, 76, 0.15) 100%);

    /* Scrollbar */
    --pt-scrollbar-track: var(--pt-color-navy-800);
    --pt-scrollbar-thumb: var(--pt-color-navy-500);
}


/* ---- SEMANTIC TOKENS (Light theme) ---- */
[data-theme="light"] {
    /* Surfaces */
    --pt-bg-app: #F3F6FA;
    --pt-bg-sidebar: var(--pt-color-white);
    --pt-bg-surface: var(--pt-color-white);
    --pt-bg-surface-hover: #F1F5F9;
    --pt-bg-elevated: var(--pt-color-white);
    --pt-bg-overlay: rgba(0, 0, 0, 0.4);

    /* Text */
    --pt-text-primary: var(--pt-color-navy-800);
    --pt-text-secondary: var(--pt-color-navy-500);
    --pt-text-muted: var(--pt-color-navy-300);
    --pt-text-inverse: var(--pt-color-white);

    /* Borders */
    --pt-border-default: #E2E8F0;
    --pt-border-accent: rgba(201, 168, 76, 0.35);
    --pt-border-focus: var(--pt-color-blue-500);

    /* Interactive */
    --pt-interactive-primary: var(--pt-color-blue-500);
    --pt-interactive-primary-hover: var(--pt-color-blue-600);
    --pt-interactive-accent: var(--pt-color-gold-600);
    --pt-interactive-accent-hover: var(--pt-color-gold-700);

    /* Status */
    --pt-status-success: var(--pt-color-green-600);
    --pt-status-success-bg: rgba(16, 185, 129, 0.08);
    --pt-status-warning: var(--pt-color-yellow-600);
    --pt-status-warning-bg: rgba(245, 158, 11, 0.08);
    --pt-status-danger: var(--pt-color-red-600);
    --pt-status-danger-bg: rgba(239, 68, 68, 0.08);
    --pt-status-info: var(--pt-color-blue-600);
    --pt-status-info-bg: rgba(58, 123, 213, 0.08);

    /* Gradients */
    --pt-gradient-primary: linear-gradient(135deg, var(--pt-color-blue-500) 0%, var(--pt-color-gold-500) 100%);
    --pt-gradient-gold: linear-gradient(135deg, var(--pt-color-gold-500) 0%, var(--pt-color-gold-600) 100%);
    --pt-gradient-navy: linear-gradient(135deg, var(--pt-color-navy-600) 0%, var(--pt-color-navy-700) 100%);
    --pt-gradient-subtle: linear-gradient(135deg, rgba(58, 123, 213, 0.06) 0%, rgba(201, 168, 76, 0.06) 100%);

    /* Scrollbar */
    --pt-scrollbar-track: #F1F5F9;
    --pt-scrollbar-thumb: #CBD5E1;

    /* Shadows (lighter for light mode) */
    --pt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --pt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --pt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --pt-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
}


/* ---- COMPONENT TOKENS ---- */
:root {
    /* Sidebar */
    --pt-sidebar-width: 260px;
    --pt-sidebar-collapsed-width: 72px;
    --pt-sidebar-bg: var(--pt-bg-sidebar);
    --pt-sidebar-border: var(--pt-border-default);

    /* Topbar */
    --pt-topbar-height: 70px;
    --pt-topbar-bg: var(--pt-bg-app);

    /* Cards */
    --pt-card-bg: var(--pt-bg-sidebar);
    --pt-card-border: var(--pt-border-default);
    --pt-card-radius: var(--pt-radius-lg);
    --pt-card-padding: var(--pt-space-5);

    /* Buttons */
    --pt-btn-radius: var(--pt-radius-md);
    --pt-btn-padding-x: var(--pt-space-4);
    --pt-btn-padding-y: var(--pt-space-2);

    /* Inputs */
    --pt-input-bg: var(--pt-bg-surface);
    --pt-input-border: var(--pt-border-default);
    --pt-input-radius: var(--pt-radius-md);
    --pt-input-padding: var(--pt-space-2) var(--pt-space-4);

    /* Tables */
    --pt-table-header-bg: var(--pt-bg-surface);
    --pt-table-row-hover: var(--pt-bg-surface-hover);
    --pt-table-border: var(--pt-border-default);

    /* Badges */
    --pt-badge-radius: var(--pt-radius-full);
    --pt-badge-padding: 0.2rem 0.6rem;
    --pt-badge-font-size: var(--pt-text-xs);

    /* Toast */
    --pt-toast-bg: var(--pt-bg-elevated);
    --pt-toast-border: var(--pt-border-default);
    --pt-toast-radius: var(--pt-radius-lg);
}