/* 
21/07/2022 - Talles Roque de Freitas - Começo do Scap CSS - Style Capsule CSS

A idéia é ter um arquivo "dispositivo" principal fixo (scap.css) que recebe um
arquivo "cápsula" customizável (scap.cap.css) que contém a identidade visual de um site.

Os termos são definidos/configurados na "cápsula", através de variáveis css, 
e organizados/aglomerados em classes no "dispositivo". O html então chama as classes/id's
do dispositivo. A idéia é facilitar e organizar a criação de identidades visuais distintas
para sites.

Possui também um arquivo "opinionated" (scap.opinionated.css) que define tags html no css.
Normalmente scap.css não define nenhuma tag html, define apenas classes para só influenciar
seu layout quando for explicitamente chamado. "Opinionated" define as tags diretamente, te
dando um layout "padrão" sem você ter que se preocupar muito em estilizar. O scap.opinionated.css
não precisa ser chamado diretamente no layout pois é declarado dentro do scap.css. Para não
utilizá-lo basta comentar a linha onde ele é chamado.

Ordem recomendada de css no layout:

scap.cap.css  <--- identidade visual do site, customizável, pode ser renomeado.
scap.css  <------- arquivo scap padrão, organiza as variáveis do scap.cap.css em classes.
override.css <---- opcional, arquivo seu para sobreescrever qualquer coisa do scap que não sirva no seu site.


*/




:root{

    /* >>>colors */
    --color-main: #bc2828; /* main color, usually a midtone */
    --color-main-lighten-01: #e43636;
    --color-main-darken-01: #b02a37;

    --color-backside: #343a40; /* alternate more neutral color, like the backside of a product */
    --color-background: #ffffff;   

    --color-font-over-light: #000;
    --color-font-over-dark: #ffffff;
    --color-font-main: #000;

    /* >>>shadows */
    --box-shadow-main: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
    --box-shadow-light: 0 0 0 0.25rem rgba(255, 255, 255, 0.2);
    --box-shadow-dark:  0 0 0 0.25rem rgba(0, 0, 0, 0.2);

    /* >>>shapes */
    --border-radius-main: 0.25rem;
    --border-radius-large: 0.4rem;
    --border-radius-small: 0.1rem;
    --border-main: none; /* border property */
    --border-contrast: 1px solid black;
    --border-button: var(--border-main);
    --padded-text-main: 0.3rem 0.7rem;
    --padded-text-large: 0.8rem 0.9rem;

    /* >>>font and text */
    --font-size-main: 1rem;
    --text-line-height-main: 1.6;
    --text-line-height-close-01: 1.5;
    --text-decoration-button: none;
    






}