/**
 * PosInTech Core Typography & Theme Tokens Design System
 */
:root {
    /* Layout Tokens */
    --pos-container-width: 1300px;
    --pos-border-radius: 12px;
    --pos-radius-leaf: 6px 20px 6px 20px;
    
    /* Typography Matrix */
    --pos-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --pos-font-heading: "Inter", var(--pos-font-main);
    
    /* Global Core Brand Accents */
    --pos-accent-purple: #a855f7;
    --pos-accent-purple-rgb: 168, 85, 247;
    
    /* Dark Mode Defaults (Active on initialization) */
    --pos-bg-main: #0c0c0c;
    --pos-bg-card: #121212;
    --pos-bg-mirror: #161616;
    --pos-border-card: #1f1f1f;
    --pos-text-main: #ffffff;
    --pos-text-muted: #888888;
    
    /* Shadows */
    --pos-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --pos-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Light Theme Variables (Triggered seamlessly when class is applied to html or body) */
html.light-theme,
body.light-theme {
    --pos-bg-main: #f8fafc;
    --pos-bg-card: #ffffff;
    --pos-bg-mirror: #f1f5f9;
    --pos-border-card: #e2e8f0;
    --pos-text-main: #0f172a;
    --pos-text-muted: #64748b;
    --pos-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --pos-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
}
/* Global Reset Typography Bindings */
body {
    font-family: var(--pos-font-main);
    background-color: var(--pos-bg-main);
    color: var(--pos-text-main);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pos-font-heading);
    color: var(--pos-text-main);
    font-weight: 800;
}