/* Base Button */
@import url("./common_button.css");
@import url("./common_utility.css");

:root {
    /* Common */
    --app-color-surface-0: #ffffff;
    --app-color-surface-50: #f8fafc;
    --app-color-surface-100: #f1f5f9;
    --app-color-surface-200: #e2e8f0;
    --app-color-surface-300: #cbd5e1;
    --app-color-surface-400: #94a3b8;
    --app-color-surface-500: #64748b;
    --app-color-surface-600: #475569;
    --app-color-surface-700: #334155;
    --app-color-surface-800: #1e293b;
    --app-color-surface-900: #0f172a;
    --app-color-surface-950: #020617;
    --app-color-black: #000;
    --app-color-white: #fff;
    --app-color-success: #acc034;
    --app-color-success-hover: #9eb030; 
    --app-color-success-active: #7f9026;
    --app-color-primary: #f68b1c;
    --app-color-primary-hover: #e37d14;
    --app-color-primary-active: #b45f0e;

    --app-color-text-1: #222;
    --app-color-text-2: #777;

    --app-font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    --app-font-family-lato: Lato, Arial, sans-serif;

    --app-font-weight-400: 400;
    --app-font-weight-700: 700;
    --app-font-weight-900: 900;

    /* Tabs */
    --app-tabs-background: var(--app-color-surface-0);
    --app-tabs-border-color: var(--app-color-surface-200);
    --app-tabs-border-width: 0;
    --app-tabs-gap: 25px;
}

body, input, button, textarea, select, option, optgroup, label, fieldset, legend, code, pre, kbd, samp {
    font-family: var(--app-font-family-lato);
}

::placeholder {
    font-family: inherit;
}