@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    /* Typography */
    --font-family: 'Poppins', 'Helvetica Neue', 'Arial Nova', Arial, sans-serif;

    /* Core Colors */
    --color-bg: #ffffff;
    --color-fg: rgb(58, 58, 58);
    --color-primary: #000000;
    --color-secondary: #333333;
    --color-border: #e0e0e0;
    --color-muted: #777777;

    /* Buttons */
    --btn-bg: #000000;
    --btn-fg: #ffffff;
    --btn-hover-bg: #ffffff;
    --btn-hover-fg: #000000;
    --btn-border: #000000;
    --btn-hover-border: #000000;

    /* Inputs */
    --input-bg: #ffffff;
    --input-fg: #000000;
    --input-border: #e0e0e0;
    --input-focus-border: #000000;

    /* Layout & Borders */
    --border-radius: 1px;
    --border-width: 1px;
    --shadow-none: 0 0 0 rgba(0, 0, 0, 0);

    /* Modal Specific */
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);
    --modal-bg: #ffffff;
    --modal-header-bg: #f8f8f8;
    --modal-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --detail-label-bg: #f5f5f5;

    /* Transitions */
    --transition: all 0.2s ease;
}

body {
    font-family: var(--font-family) !important;
}