@use "sass:color";

// DSO kleuren                http://webaim.org/resources/contrastchecker/ (contrast op een witte achtergrond)

$grasgroen-130: #285f08;
$grasgroen-120: #2e6c0a;
$grasgroen: #39870c; // 100% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: OK;
$grasgroen-80: #609f3c; //  80% tint       - Normal text: WCAG AA: Fail;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: Fail;
$grasgroen-60: #88b76d;
$grasgroen-40: #afcf9d; //  40% tint       - niet te gebruiken als leestekst
$grasgroen-20: #d7e7ce; //  20% tint       - niet te gebruiken als leestekst
$grasgroen-10: #ebf3e6; //  10% tint       - niet te gebruiken als leestekst

$bosgroen: #275937; // 100% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: OK;
$bosgroen-140: #173521; // 140% tint
$bosgroen-130: #1b3e27;
$bosgroen-120: #1f472c;
$bosgroen-80: #527a5e; //  80% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: OK;
$bosgroen-60: #7d9886; //  60% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: Fail;
$bosgroen-40: #a8bcaf; //  40% tint       - niet te gebruiken als leestekst
$bosgroen-10: #e9eeeb; //  10% tint       - niet te gebruiken als leestekst

$mauve-130: #61344a;
$mauve-120: #6f3b55;
$mauve: #8b4a6a; // 100% tint
$mauve-60: #b992a6;
$mauve-40: #d1b7c4; // 40% tint

$zwart: #000; // 100% tint       - Normal text: WCAG AA: OK;  WCAG AAA: OK - Large text: WCAG AA: OK;  WCAG AAA: OK;
$grijs-90: #191919; //                 - Normal text: WCAG AA: OK;  WCAG AAA: OK - Large text: WCAG AA: OK;  WCAG AAA: OK;
$grijs-80: #323232; //                 - Normal text: WCAG AA: OK;  WCAG AAA: OK - Large text: WCAG AA: OK;  WCAG AAA: OK;
$grijs-70: #4c4c4c; //                 - Normal text: WCAG AA: OK;  WCAG AAA: OK - Large text: WCAG AA: OK;  WCAG AAA: OK;
$grijs-60: #666; //                 - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: OK;
$grijs-50: #7f7f7f; //                 - niet te gebruiken als leestekst
$grijs-40: #999; //                 - niet te gebruiken als leestekst
$grijs-30: #b2b2b2; //                 - niet te gebruiken als leestekst
$grijs-20: #ccc; //                 - niet te gebruiken als leestekst
$grijs-10: #e5e5e5; //                 - niet te gebruiken als leestekst
$grijs-5: #f2f2f2; //                 - niet te gebruiken als leestekst
$wit: #fff;

$lime: #79b929; // 100% tint
$lime-10: #f2f8ea; // 10% tint
$lime-20: #e4f1d4; // 20% tint
$lime-20-5: #d8e5c9; // 20% tint 5% zwart
$lime-20-10: #ced9bf; // 20% tint 10% zwart

$rood-130: #902c39;
$rood-120: #a53241;
$rood-110: #b62f41; // 110% tint
$rood: #ce3f51; // 100% tint
$rood-10: #faecee; // 10% tint
$rood-20: #f5d8dc; // 20% tint
$rood-20-5: #e9cdd1; // 20% tint 5% zwart
$rood-20-10: #ddc3c6; // 20% tint 10% zwart
$rood-60: #e28c97;

$geel-120: #b0aa00;
$geel-110: #c6bf00;
$geel: #dcd400; // 100% tint
$geel-60: #eae566;
$geel-20: #f8f6cc; // 20% tint

$lichtblauw: #6ca4d9; // 100% tint
$lichtblauw-20: #e1ecf7; // 20% tint

$donkerblauw-130: #1e3d5a;
$donkerblauw-120: #224666;
$donkerblauw: #2b5780;
$donkerblauw-60: #809ab3;

$mintgroen: #3fb498;
$bruin: #644f49;
$oranje: #e17000;
$scampi: #676cb0;

$success-color: $grasgroen;
$info-color: $lichtblauw;
$warning-color: $geel;
$danger-color: $rood;
$error-color: $rood;
$invalid-color: $rood-110;

$success-bg-color: $lime-20;
$info-bg-color: $lichtblauw-20;
$warning-bg-color: $geel-20;
$danger-bg-color: $rood-20;
$error-bg-color: $rood-20;

$input-color-placeholder: $grijs-60;
$input-bg: $wit;
$input-color: $grijs-90;
$input-border: $bosgroen;
$input-bg-disabled: $wit;

$input-disabled-color: $grijs-40;
$input-disabled-border-color: $grijs-10;

$text-muted: $grijs-60;

$focus-outline-color: #008ccc;

$contrast-dark: $grijs-90;
$contrast-light: $wit;