/* CSS Custom Properties - Colors, Spacing, Typography */
/* Matches dna.html lines 7-220 exactly */

/* Custom Font Loading */
/* Note: ArbelG is for UI elements if available */
@font-face {
    font-family: 'ArbelG';
    src: url('../fonts/ui/ArbelG-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Additional fonts are loaded dynamically from fonts/fonts.json */

:root {
    /* Color Mode (Default) - dna.html lines 22-23 */
    --color-bg-default: #423028;
    --color-text-default: #A9DEFE;

    /* Dark Mode - dna.html lines 30-33 */
    --color-bg-dark: #050505;
    --color-text-dark: #ffffff;

    /* Light Mode - dna.html lines 35-39 */
    --color-bg-light: #fafafa;
    --color-text-light: #000000;

    /* Spacing - from dna.html positioning */
    --spacing-left: 2.64vw;      /* 38/1440 */
    --spacing-top-small: 1.95vh; /* 20/1024 */
    --spacing-top-medium: 2.34vh; /* 24/1024 */

    /* Typography */
    --font-size-small: 12px;
    --font-size-medium: 14px;

    /* UI Elements */
    --button-width: 104px;
    --button-height: 41px;
    --icon-size: 24px;
    --slider-thumb-size: 8px;
    --slider-track-width: 1px;
    --slider-height: 45vh;

    /* Gaps */
    --metrics-gap: 7.81vh;  /* 80/1024 */
}