@import url('https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,700&display=swap');
@import 'colors.css';

:root {
    /* Global universal values */
    --color-primary: #FFB800;
    --color-black: #242325;
    --color-light-gray: #CACACA;
    --color-white: #FFFFFF;
    --color-white-with-primary-tint: #F9F8F3;
    --color-destructive: #E80000;
    --color-destructive-light: #FFE2E5;

    --color-background: var(--color-white);
    --color-page-background: #EEF0F8;
    --color-text: var(--color-black);
    --font-family: Inter;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-size-small: 10px;
    --font-size-normal: 14px;
    --font-size-larger: 18px;
    --font-size-large: 24px;


    /* Per Component Styles */

    /* Icon */
    --icon-color-default: var(--color-black);
    --icon-color-primary: var(--color-primary);
    --icon-color-dark: var(--color-black);
    --icon-color-light: var(--color-white);
    --icon-color-accent: var(--color-light-gray);
    --icon-color-destructive: var(--color-destructive);

    /* Sheet */
    --sheet-color-background: var(--color-background);

    /* Timeline */
    --timeline-color-line: var(--color-light-gray);
    --timeline-color-marker-pending: var(--color-light-gray);
    --timeline-color-marker-completed: var(--color-primary);
    --timeline-color-marker-failed: var(--color-destructive);

    /* Buttons */
    --button-color-background-primary: var(--color-black);
    --button-color-background-primary-hover: #000000;
    --button-color-background-flat-hover: #FFF4DE;
    --button-color-text-primary: var(--color-white);
    --button-color-text-flat: var(--color-black);
    --button-color-text-flat-accented: var(--color-primary);

    /* Inputs */
    --input-color-label: var(--color-black);
    --input-color-text: var(--color-black);
    --input-color-border-active: var(--color-black);
    --input-color-background: #EEF0F8;
    --input-opacity-placeholder: 0.7;

    /* Tooltips */
    --tooltip-color-background: var(--color-black);
    --tooltip-color-text: var(--color-white);

    /* Alerts */
    --alert-color-text: var(--color-destructive);
    --alert-color-background: var(--color-destructive-light);

    /* Navbar */
    --navbar-color-background: white;
    --navbar-color-link-text: var(--color-black);
    --navbar-color-link-background-hover: #FFF4DE;
    --navbar-color-link-background-active: #FFF4DE;
    --navbar-color-link-text-active: #FFB800;
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color-page-background);
    color: var(--color-text);
    font-family: var(--font-family), sans-serif;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-normal);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: 400;
}

p {
    margin: 0;
    padding: 0;
}