@use "sass:map";
@use "sass:color";

// ====
// BASE
// ====

$colors: (
    "default": #f5f5f5,
    "dark": #232e33,

    "info": #1cb4fb,
    "safe": #28dd74,
    "warning": #ffcb1e,
    "alert": #f44336,

    "link": #018fe8
);

$base: (
    font-color: #232e33,
    font-size: 1em,
    line-height: 1.6,
    font: ('Segoe UI', 'San Francisco', 'Helvetica Neue', 'Arial', 'sans-serif')
);

$main-padding: 15px;
$brand-font-size: 1.7em;

$container: (
    width: 960px,
    width-sm: 800px
);

$util: (
    hr-bg: #eee,
    anchor-color: map.get($colors, "link")
);

// =======
// GENERIC
// =======

$button: (
    bg: #fafafa
);

$btn-x2: (
    bg: #fafafa
);

$btn-default: (
    bg: #f5f5f5
);

$btn-primary: (
    bg: map.get($colors, "info")
);

$btn-safe: (
    bg: map.get($colors, "safe")
);

$btn-warning: (
    bg: map.get($colors, "warning")
);

$btn-risk: (
    bg: map.get($colors, "alert")
);

// Inputs
$input: (
    bg: #fff
);

// =======
// MODULES
// =======

$nav: (
    border-color: #ccc,
    link-color: #212121,
    mobile-bg: #fff,
    mobile-hover-bg: #eee
);

$header: (
    bg: #fff,
    border-color: #ccc
);

$footer: (
    header-bg: #f5f5f5,
    header-color: #212121,
    link-color: map.get($colors, "link")
);

$card: (
    bg: #fff
);

$notice: (
    color: #fafafa,
    bg: #eee,
    safe-bg: map.get($colors, "safe"),
    info-bg: map.get($colors, "info"),
    warning-bg: map.get($colors, "warning"),
    alert-bg: map.get($colors, "alert")
);

$label: $notice;

$message: (
    bg: #fff
);

$code: (
    bg: #fce4ec,
    color: #ef2669,
    block-bg: #f5f5f5,
    block-color: #212121
);

$table: (
    td-color: #fff,
    td-border-color: #ccc
);

$progressbar: (
    bg: #f5f5f5,
    progress-bg: #018fe8,
    progress-color: #fff
);
