/* @dox :: define a property :

    @property --property-name {
        syntax: "<D>";
        inherits: true;
        initial-value: V;
    }

    D ~   <length>, <number>, <percentage>, <length-percentage>, <color>, <image>
        , <url>, <integer>, <angle>, <time>, <resolution>, <transform-function>, 
        , <custom-ident>
        
        or 
        
        + (space-separated) list of values

    e.g. ~ <integer>+ : space-separated list of <integer>        

        # (comma-separated) list of values 

    e.g. ~ <integer># : comma-separated list of <integer>

        | (or-condition)
       
    e.g. ~ <color># | <integer># : comma-separated list of <color> or a comma-separated list of <integer>

    use a property : 

    body {
        background-color: var(---property-name);
    }
*/

/* @dox :: font-size : 62.5 ~ rem pix sizing is 10 now 1.5rem = 15px  */
@property --html-font-size        { syntax:"<percentage>"; inherits: true; initial-value: 62.5%; }
@property --html-background-color { syntax:"<color>";      inherits: true; initial-value: #fff; }
@property --html-background-image { syntax:"<url>";        inherits: true; initial-value: url(); }
@property --html-line-height      { syntax:"<number>";     inherits: true; initial-value: 1.6; }
@property --html-font-weight      { syntax:"<number>";     inherits: true; initial-value: 400; }
@property --html-view-height      { syntax:"<percentage>"; inherits: true; initial-value: 100%; }
@property --html-view-width       { syntax:"<percentage>"; inherits: true; initial-value: 100%; }
@property --html-text-color       { syntax:"<color>"; inherits:true; initial-value:#000; }

@property --body-font-size  { syntax:"<length>"; inherits:true; initial-value:15px; }

@property --selection-text-color       { syntax:"<color>"; inherits: true; initial-value: #fff; }
@property --selection-background-color { syntax:"<color>"; inherits: true; initial-value: #000; }

@property --h-font-weight    { syntax:"<number>"; inherits:true; initial-value:800; }
@property --h-font-size      { syntax:"<length>"; inherits:true; initial-value:15px; }
@property --h-line-height    { syntax:"<number>"; inherits:true; initial-value:1.6; }
@property --h-letter-spacing { syntax:"<length>"; inherits:true; initial-value:0.25px; }
@property --h-margin-bottom  { syntax:"<length>"; inherits:true; initial-value:15px; }
@property --h-text-color     { syntax:"<color>";  inherits:true; initial-value:#000; }

@property --h1-line-height    { syntax:"<number>"; inherits:true; initial-value:1.2; }
@property --h1-font-size      { syntax:"<length>"; inherits:true; initial-value:56px; }
@property --h2-line-height    { syntax:"<number>"; inherits:true; initial-value:1.25; }
@property --h2-font-size      { syntax:"<length>"; inherits:true; initial-value:43px; }
@property --h3-line-height    { syntax:"<number>"; inherits:true; initial-value:1.3; }
@property --h3-font-size      { syntax:"<length>"; inherits:true; initial-value:34px; }
@property --h4-line-height    { syntax:"<number>"; inherits:true; initial-value:1.35; }
@property --h4-font-size      { syntax:"<length>"; inherits:true; initial-value:27px; }
@property --h5-line-height    { syntax:"<number>"; inherits:true; initial-value:1.4;}
@property --h5-font-size      { syntax:"<length>"; inherits:true; initial-value:22px; }
@property --h6-line-height    { syntax:"<number>"; inherits:true; initial-value:1.5; }
@property --h6-font-size      { syntax:"<length>"; inherits:true; initial-value:18px; }

@property --row-margin  { syntax:"<length>"; inherits:true; initial-value:7.5px; }
@property --col-margin  { syntax:"<length>"; inherits:true; initial-value:7.5px; }
@property --highlight-text-color  { syntax:"<color>";      inherits:true; initial-value:#f00; }
@property --background-text-color { syntax:"<color>";      inherits:true; initial-value:#666; }

@property --box-width-s       { syntax:"<percentage>"; inherits:true; initial-value:15%; }
@property --box-width-m       { syntax:"<percentage>"; inherits:true; initial-value:25%; }
@property --box-width-l       { syntax:"<percentage>"; inherits:true; initial-value:35%; }
@property --box-width-xl      { syntax:"<percentage>"; inherits:true; initial-value:50%; }
@property --box-height-max    { syntax:"<percentage>"; inherits:true; initial-value:35%; }
@property --box-padding       { syntax:"<length>";     inherits:true; initial-value:15px; }
@property --box-border-width  { syntax:"<length>";     inherits:true; initial-value:1px; }
@property --box-border-radius { syntax:"<length>";     inherits:true; initial-value:4px; }
@property --box-border-color  { syntax:"<color>";      inherits:true; initial-value:#fff; }
@property --box-shadow-x      { syntax:"<length>";     inherits:true; initial-value:0px; }
@property --box-shadow-y      { syntax:"<length>";     inherits:true; initial-value:3px; }
@property --box-shadow-blur   { syntax:"<length>";     inherits:true; initial-value:8px; }
@property --box-shadow-color  { syntax:"<color>";      inherits:true; initial-value:#00000077; }

@property --box-border-info    { syntax:"<color>";     inherits:true; initial-value:#000; }
@property --box-border-success { syntax:"<color>";     inherits:true; initial-value:#0f0; }
@property --box-border-warning { syntax:"<color>";     inherits:true; initial-value:#ff0; }
@property --box-border-error   { syntax:"<color>";     inherits:true; initial-value:#f00; }

@property --flex-padding { syntax:"<length>"; inherits:true; initial-value:15px; }
@property --flex-margin  { syntax:"<length>"; inherits:true; initial-value:7.5px; }

/* Buttons */
@property --a-background-color   { syntax:"<color>";  inherits:true; initial-value:#000; }
@property --a-border-color       { syntax:"<color>";  inherits:true; initial-value:#000; }
@property --a-border-width       { syntax:"<length>"; inherits:true; initial-value:1px; }
@property --a-border-radius      { syntax:"<length>"; inherits:true; initial-value:4px; }
@property --a-text-color         { syntax:"<color>";  inherits:true; initial-value:#fff; }
@property --a-margin-bottom      { syntax:"<length>"; inherits:true; initial-value:7.5px; }
@property --a-margin-top         { syntax:"<length>"; inherits:true; initial-value:15px; }
@property --a-padding-vertical   { syntax:"<length>"; inherits:true; initial-value:2px; }
@property --a-padding-horizontal { syntax:"<length>"; inherits:true; initial-value:2px; }
@property --a-action-padding     { syntax:"<length>"; inherits:true; initial-value:12.5px; }

@property --a-primary-background { syntax:"<color>"; inherits:true; initial-value:#000; }
@property --a-primary-border { syntax:"<color>"; inherits:true; initial-value:#000; }
@property --a-primary-text { syntax:"<color>"; inherits:true; initial-value:#fff; }
@property --a-primary-error   { syntax:"<color>"; inherits:true; initial-value:#ff0000; }
@property --a-primary-success { syntax:"<color>"; inherits:true; initial-value:#00ff00; }
@property --a-primary-warning { syntax:"<color>"; inherits:true; initial-value:#ffff00; }
@property --a-primary-info    { syntax:"<color>"; inherits:true; initial-value:#000; }

@property --a-light-background { syntax:"<color>"; inherits:true; initial-value:transparent; }
@property --a-light-border { syntax:"<color>"; inherits:true; initial-value:#000; }
@property --a-light-text { syntax:"<color>"; inherits:true; initial-value:#000; }
@property --a-light-error   { syntax:"<color>"; inherits:true; initial-value:#ff0000; }
@property --a-light-success { syntax:"<color>"; inherits:true; initial-value:#00ff00; }
@property --a-light-warning { syntax:"<color>"; inherits:true; initial-value:#ffff00; }
@property --a-light-info    { syntax:"<color>"; inherits:true; initial-value:#000; }

/* Inputs */
@property --input-background-color   { syntax:"<color>";  inherits:true; initial-value:#fff; }
@property --input-border-color       { syntax:"<color>";  inherits:true; initial-value:#fff; }
@property --input-border-width       { syntax:"<length>"; inherits:true; initial-value:1px; }
@property --input-border-radius      { syntax:"<length>"; inherits:true; initial-value:4px; }
@property --input-text-color         { syntax:"<color>";  inherits:true; initial-value:#000; }
@property --input-margin-bottom      { syntax:"<length>"; inherits:true; initial-value:7.5px; }
@property --input-line-height        { syntax:"<number>"; inherits:true; initial-value:1.6; }
@property --input-padding-horizontal { syntax:"<length>"; inherits:true; initial-value:7.5px; }
@property --input-padding-vertical   { syntax:"<length>"; inherits:true; initial-value:2px; }
@property --input-icon-padding       { syntax:"<length>"; inherits:true; initial-value:7.5px; }

@property --input-border-info       { syntax:"<color>";  inherits:true; initial-value:#000; }
@property --input-border-success    { syntax:"<color>";  inherits:true; initial-value:#0f0; }
@property --input-border-warning    { syntax:"<color>";  inherits:true; initial-value:#ff0; }
@property --input-border-error      { syntax:"<color>";  inherits:true; initial-value:#f00; }