/* 
 * Pontem Analytics Style System 
 * Based on Brand Style Guide 2023
 */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');

:root {
    /* Primary Typography */
    --font-primary: 'Titillium Web', sans-serif;
    --font-system: Tahoma, sans-serif;

    /* Primary Color Palette */
    --color-midnight: #001E33; /* R:0, G:30, B:51 */
    --color-bright-cyan: #44FFF5; /* R:68, G:255, B:245 */
    --color-tower: #7B9FA1; /* R:123, G:159, B:161 */
    --color-crystal: #DCFFE8; /* R:220, G:255, B:232 */
    --color-sun: #FFDC00; /* R:255, G:220, B:0 */

    /* Secondary Color Palette (Data Visualization) */
    --color-teal: #1BACAA;
    --color-ultramarine: #5B57E6;
    --color-heather: #B59BB0;
    --color-coral: #F78F69;
    --color-mint: #7ED2A6;
    --color-fuchsia: #E90D5D;

    /* Typography Scale */
    --text-headline-main: 700 24px/1.2 var(--font-primary);
    --text-headline-support: 400 16px/1.4 var(--font-primary); /* Equivalent 12pt for web */
    --text-callout: 700 16px/1.2 var(--font-primary); /* Equivalent 12pt */
    --text-body: 400 11px/1.5 var(--font-primary); /* Equivalent 8pt */
}

/* Typography Utilities */
.pontem-headline {
    font: var(--text-headline-main);
    text-transform: uppercase;
    letter-spacing: 0.05em; /* Approximate tracking 50 */
}

.pontem-support-headline {
    font: var(--text-headline-support);
}

.pontem-callout {
    font: var(--text-callout);
    text-transform: uppercase;
    letter-spacing: 0.05em; /* Approximate tracking 50 */
}

.pontem-body-text {
    font: var(--text-body);
}

/* Core Base Styles */
body.pontem-theme {
    font-family: var(--font-primary);
    background-color: var(--color-midnight);
    color: white; /* Assuming light text for midnight backgrounds */
}