/* Custom Utility Tokens and Component States */
@layer base {
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        vertical-align: middle;
    }
    .requirement-met { color: #8cd6b1; }
    .requirement-unmet { color: #938f99; }
}

<script id="tailwind-config">
    script = {
        darkMode: "class",
        theme: {
            extend: {
                "colors": {
                    "inverse-surface": "#f0f1f2",
                    "secondary": "#8cd6b1",
                    "on-tertiary-fixed-variant": "#c0c7d6",
                    "inverse-primary": "#05021f",
                    "on-secondary-fixed": "#002114",
                    "surface-container": "#1d2538",
                    "primary": "#c7c2e9",
                    "surface-container-low": "#131b2e",
                    "surface-dim": "#0b1326",
                    "on-surface": "#e1e3e4",
                    "on-secondary-fixed-variant": "#a8f2cc",
                    "background": "#0b1326",
                    "surface-bright": "#31394d",
                    "on-primary-fixed-variant": "#e4dfff",
                    "surface-container-highest": "#31394d",
                    "on-tertiary-container": "#dce2f3",
                    "on-surface-variant": "#c9c5ce",
                    "tertiary-fixed": "#181f2b",
                    "primary-fixed-dim": "#464363",
                    "outline": "#938f99",
                    "on-error": "#690005",
                    "on-background": "#e1e3e4",
                    "on-tertiary-fixed": "#ffffff",
                    "surface-container-high": "#283042",
                    "secondary-fixed-dim": "#246f51",
                    "on-secondary": "#003825",
                    "tertiary": "#c0c7d6",
                    "inverse-on-surface": "#191c1d",
                    "on-secondary-container": "#a8f2cc",
                    "on-primary": "#1b1835",
                    "tertiary-fixed-dim": "#404754",
                    "error": "#ffb4ab",
                    "on-primary-fixed": "#ffffff",
                    "on-tertiary": "#020610",
                    "error-container": "#93000a",
                    "secondary-fixed": "#005237",
                    "secondary-container": "#005237",
                    "on-error-container": "#ffdad6",
                    "surface-variant": "#47464d",
                    "primary-fixed": "#1e1b39",
                    "primary-container": "#c7c2e9",
                    "surface-container-lowest": "#060e20",
                    "surface": "#0b1326",
                    "tertiary-container": "#c0c7d6",
                    "on-primary-container": "#1b1835",
                    "surface-tint": "#c7c2e9",
                    "outline-variant": "#47464d"
                },
                "borderRadius": {
                    "DEFAULT": "0.25rem",
                    "lg": "0.25rem",
                    "xl": "0.5rem"
                },
                "spacing": {
                    "md": "20px",
                    "base": "4px",
                    "gutter": "24px",
                    "container-max": "1140px",
                    "xl": "48px",
                    "sm": "12px",
                    "xs": "8px",
                    "lg": "32px"
                },
                "fontFamily": {
                    "headline-lg": ["Kwame Yeboah"],
                    "body-lg": ["Hanken Grotesk"],
                    "body-md": ["Hanken Grotesk"],
                    "headline-md": ["Hanken Grotesk"],
                    "label-lg": ["Hanken Grotesk"],
                    "label-sm": ["Hanken Grotesk"],
                    "mono-sample": ["JetBrains Mono"]
                },
                "fontSize": {
                    "headline-lg": ["30px", {"lineHeight": "38px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
                    "body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
                    "body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
                    "headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
                    "label-lg": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
                    "label-sm": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
                    "mono-sample": ["13px", {"lineHeight": "20px", "fontWeight": "400"}]
                }
            },
        },
    }
</script>