/* Variable font: one file covers weights 100-900 (Google serves identical
   bytes for every static-weight request of Roboto). */
@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/gpt-calculator/assets/fonts/roboto.woff2') format('woff2');
}

/* Only weight 700 is ever requested: h1-h5 set the family with no
   font-weight, so the UA default bold applies. */
@font-face {
    font-family: 'Hind Vadodara';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/gpt-calculator/assets/fonts/hind-vadodara-700.woff2') format('woff2');
}

:root {
    /* Colors */
    --white: #fff;
    --black-1: #16121c;
    --black-2: #2d2d41;
    --gray-1: #75747e;
    --gray-2: #a0a0a9;
    --gray-3: #bebdc4;
    --gray-4: #e2e2ea;
    --gray-5: #f0f0f7;
    --gray-6: #fafafc;
    --blue-0: #0e61b4;
    --blue-1: #0970ce;
    --blue-2: #b6d4f1;
    --blue-3: #e6f1fb;
    --red-0: #d85430;
    --red-1: #ff7d5a;
    --red-2: #ffdace;
    --red-3: #fff3ed;
    --shadow-opacity: 0.1;
    --green-0: #468A6F;
    --green-1: #54A788;
    --green-2: #cde7de;
    --green-3: #EDF7F4;
    --orange-2: #fbe3c4;
    --orange-3: #fff8ef;
    --black-opacity: rgb(22 18 28 / 10%);

    /* Typography */
    --font-family: roboto, sans-serif;
    --font-weight-bold: 500;
    --font-weight-medium: 400;
    --line-height: 1.6;
    --font-small: 12px;
    --font-medium: 14px;
    --font-large: 16px;

    /* Spacing */
    --container-max-width: 1180px;
    --content-block-max-width: 700px;
    --content-block-max-width-wide: 940px;
    --content-block-extra-max-width: 840px;
    --content-block-margin: 40px;
    --container-padding: 20px;
    --small-spacing: 5px;
    --medium-spacing: 10px;
    --large-spacing: 20px;

    /* Borders and Shadows */
    --default-border: 1px solid var(--gray-4);
    --border-dark: 1px solid var(--gray-1);
    --border-radius-default: 4px;
    --border-radius-medium: 6px;
    --border-radius-soft: 12px;
    --box-shadow: 0 0 12px var(--black-opacity);

    /* Transitions */
    --transition: background-color 0.2s;

    /* Z-Index */
    --z-index-1: 1;
    --z-index-top: 1000;

}