// RenderKit 0.9.6-beta
// github.com/matteobertoldo/renderkit
// Licensed under MIT Open Source

//  Table of Contents:
//
//  1. Global
//  2. Layout - Accessibility
//  3. Breakpoints
//  4. Fonts
//  5. Typography: Base
//   - 5.1  Typography: Headers
//   - 5.2  Typography: Paragraph & Strong
//  6. XY Grid
//   - 6.1 Flexbox Utilities
//  7. Float Grid
//  8. Colors Global
//  9. Colors Palette
//  10. Form Global
//   - 10.1 Form Input
//   - 10.2 Form Select
//   - 10.3 Form Textarea
//   - 10.4 Form Label
//   - 10.5 Form Validation
//   - 10.6 Form Autofill
//   - 10.7 Form Checkbox-Radio Custom
//   - 10.8 Form Checkbox Custom
//   - 10.9 Form Radio Custom
//  11. Shapes
//  12. Print

// 1. Global
// ---------

$global-flexbox: true;
$global-font-size: 100%;
$global-body-font-size: 16px;
$global-text-direction: ltr;
$global-text-rendering: optimizeLegibility;
$global-letter-spacing-apply: false;
$global-letter-spacing: normal;
$global-font-liga-kern: true;
$global-links-text-decoration: true;
$global-input-reset-appearence: true;
$global-input-disabled-color: inherit;
$global-input-disabled-opacity: 0.5;
$global-input-disabled-cursor: not-allowed;
$global-input-search-cancel-button: true;
$global-select-reset-appearence: true;
$global-select-reset-appearance-options: false;
$global-custom-checkbox-radio: true;
$global-form-inputs-error-class: 'error';

// 2. Layout - Accessibility
// -------------------------

$what-input-outline-keyboard-detect: true;
$focus-links-outline-hidden: true;
$focus-inputs-outline-hidden: true;
$custom-checkbox-radio-outline-detect: true;
$custom-checkbox-radio-what-input-outline-detect: true;
$selection-background-color: #b3d4fc;
$selection-color-apply: false;
$selection-color: initial;
$ios-tap-color: transparent;

// 3. Breakpoints
// --------------

$breakpoints: (
    small: 0,
    medium: 640px,
    large: 1024px,
    xlarge: 1200px,
    xxlarge: 1440px
);
$breakpoint-classes: (small medium large);
$print-breakpoint: large;

// 4. Fonts
// --------

$font-dir: '../fonts/';
$google-fonts-load: true;
$google-fonts-family: 'Work+Sans:400,700|Josefin+Sans:400,400i,700|Abril+Fatface';
$font-face-load: false;
$font-face-map: (
    'MyFontFamily': ('myfilename', normal, 400, eot woff woff2 ttf svg),
);

// 5. Typography: Base
// -------------------

$html-root-font-size: false;
$body-root-font-size: false;
$body-font-family: 'Work Sans', sans-serif;
$body-font-weight: normal;
$body-line-height: 1.15;

// 5.1 Typography: Headers
// -----------------------

$headers-font-family: inherit;
$headers-font-weight: bold;
$headers-line-height: 1.4;
$headers-letter-spacing: normal;
$headers-text-transform: uppercase;
$headers-margin-bottom: 16px;
$header-styles: (
    small: (
        'h1': ('font-size': 24),
        'h2': ('font-size': 20),
        'h3': ('font-size': 19),
        'h4': ('font-size': 18),
        'h5': ('font-size': 17),
        'h6': ('font-size': 16),
    ),
    medium: (
        'h1': ('font-size': 48),
        'h2': ('font-size': 40),
        'h3': ('font-size': 31),
        'h4': ('font-size': 25),
        'h5': ('font-size': 20),
        'h6': ('font-size': 16),
    ),
);

// 5.2 Typography: Paragraph & Strong
// ----------------------------------

$paragraph-font-family: 'Josefin Sans', sans-serif;
$paragraph-font-weight: normal;
$paragraph-line-height: 1.4;
$paragraph-letter-spacing: normal;
$paragraph-text-transform: none;
$paragraph-margin: 0;
$strong-font-family: inherit;
$strong-font-weight: bolder;

// 6. XY Grid
// ----------

$grid-container: 1200px;
$grid-columns: 12;
$grid-margin-gutters: (
    small: 20px,
    medium: 30px
);
$grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters;
$grid-container-max: $grid-container;
$xy-block-grid-max: 8;

// 6.1 Flexbox Utilities
// ---------------------

$flex-source-ordering-count-enable: false;
$flex-source-ordering-count: 6;
$flexbox-responsive-breakpoints: true;

// 7. Float Grid
// -------------

$grid-row-width: 1200px;
$grid-column-count: 12;
$grid-column-gutter: (
    small: 20px,
    medium: 30px,
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
$block-grid-max: 8;

// 8. Colors Palette
// -----------------

$palette-color: (
    primary: #666666,
    suvagrey: #8c8c8c,
    darkgray: #b2b2b2,
    gainsboro: #d9d9d9,
    whitesmoke: #efefef,
    cornflowerblue: #61afef,
    sunset: #c04649,
    coralcandy: #f2c0c1
);

// 9. Colors Global
// ----------------

$body-background-color: #ffffff;
$body-base-color: #666666;
$headers-color: inherit;
$paragraph-color: inherit;
$links-color: #61afef;

// 10. Form Global
// ---------------

$form-inputs-labelclass: 'form-label';
$form-inputs-label-error-class: 'error';

// 10.1 Form Input
// ---------------

$form-input-height: 40px;
$form-input-font-family: 'Josefin Sans', sans-serif;
$form-input-font-size: 14px;
$form-input-letter-spacing: normal;
$form-input-text-transform: none;
$form-input-padding: 10px;
$form-input-background-color: #efefef;
$form-input-color: #666666;
$form-input-border: 1px solid #d9d9d9;
$form-input-border-radius: 5px;
$form-input-box-shadow: 0 0 6px rgba(0, 0, 0, 0);
$form-input-hover-properties: true;
$form-input-hover-border-color: #b2b2b2;
$form-input-hover-background-color: #efefef;
$form-input-hover-box-shadow: 0 0 6px rgba(0, 0, 0, 0);
$form-input-focus-properties: true;
$form-input-focus-background-color: #efefef;
$form-input-focus-border-color: #b2b2b2;
$form-input-focus-box-shadow: 0 0 6px rgba(#666666, 0.25);
$form-input-placeholder-color: #8c8c8c;
$form-input-placeholder-focus-hidden: true;
$form-input-placeholder-focus-color: #8c8c8c;
$form-input-placeholder-font-family: inherit;
$form-input-placeholder-font-style: italic;
$form-input-placeholder-text-transform: capitalize;
$form-input-transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease;

// 10.2 Form Select
// ----------------

$form-select-caret-shape-render: true;
$form-select-caret-color: #8c8c8c;
$form-select-caret-shape: 'arrow';
$form-select-caret-size: 10px;
$form-select-caret-image-url: 'path/to/shape';
$form-select-caret-background-size: 10px;

// 10.3 Form Textarea
// ------------------

$form-textarea-height: 110px;
$form-textarea-resize: false;
$form-textarea-resize-mode: vertical;

// 10.4 Form Label
// ---------------

$form-label-font-family: 'Josefin Sans', sans-serif;
$form-label-font-size: 11px;
$form-label-text-transform: uppercase;
$form-label-letter-spacing: 0.5px;
$form-label-color: #8c8c8c;
$form-label-margin: 0 0 5px 0;

// 10.5 Form Validation
// --------------------

$form-input-error-background-color: #f2c0c1;
$form-input-error-border-color: #c04649;
$form-input-error-box-shadow: 0 0 6px rgba(#c04649, 0.35);
$form-input-error-color: #666666;
$form-input-error-label-color: #c04649;
$form-input-error-placeholder-color: #c04649;
$form-input-error-focus-style: false;

// 10.6 Form Input Autofill
// ------------------------

$form-input-custom-autofill: false;
$form-input-autofill-color: $form-input-color;
$form-input-autofill-background-color: $form-input-background-color;

// 10.7 Form Checkbox-Radio Custom
// -------------------------------

$custom-checkbox-radio-font-family: 'Josefin Sans', sans-serif;
$custom-checkbox-radio-font-size: 13px;
$custom-checkbox-radio-text-transform: none;
$custom-checkbox-radio-letter-spacing: 0.5px;
$custom-checkbox-radio-color: #8c8c8c;
$custom-checkbox-radio-cursor: default;
$custom-checkbox-radio-label-gutter: 10px;
$custom-checkbox-radio-align-center: false;
$custom-checkbox-radio-size: 24px;
$custom-checkbox-radio-background-color: #efefef;
$custom-checkbox-radio-border: 1px solid #d9d9d9;
$custom-checkbox-radio-hover-border: false;
$custom-checkbox-radio-hover-border-color: #b2b2b2;
$custom-checkbox-radio-checked-border: true;

// 10.8 Form Checkbox Custom
// -------------------------

$custom-checkbox-border-radius: 5px;
$custom-checkbox-mark-thick: 3px;
$custom-checkbox-mark-color: #8c8c8c;
$custom-checkbox-checked-border-color: #b2b2b2;
$custom-checkbox-focus-border-color: #b2b2b2;
$custom-checkbox-error-border-color: #c04649;
$custom-checkbox-error-background-color: #f2c0c1;

// 10.9 Form Radio Custom
// ----------------------

$custom-radio-mark-color: #8c8c8c;
$custom-radio-checked-border-color: #b2b2b2;
$custom-radio-focus-border-color: #b2b2b2;
$custom-radio-error-border-color: #c04649;
$custom-radio-error-background-color: #f2c0c1;

// 11. Shapes
// ----------

$shape-arrow-size: 20px;
$shape-arrow-color: #666666;
$shape-arrow-thickness: 3px;
$shape-checkmark-size: 20px;
$shape-checkmark-color: #666666;
$shape-checkmark-thickness: 3px;
$shape-cross-size: 20px;
$shape-cross-color: #666666;
$shape-cross-thickness: 3px;

// 12. Print
// ---------

$print-transparent-background: false;
$print-color-black: false;
$print-margin: 0.5cm;
$print-link-href-show: false;