{% import 'css/macros/colours.macro.twig' as colours %}

:root {
    /* Typography */
    --font-primary: 'Amazon Ember', Helvetica, Arial, sans-serif;
    --font-secondary: 'Open Sans', Helvetica, Arial, sans-serif;
    --font-monospace: 'Source Code Pro', monospace;
    --line-height--primary: 1.6;
    --letter-spacing--primary: .05rem;
    --text-base-size: 1em;
    --text-scale-ratio: 1.2;

    --text-xxs: calc(var(--text-base-size) / var(--text-scale-ratio) / var(--text-scale-ratio) / var(--text-scale-ratio));
    --text-xs: calc(var(--text-base-size) / var(--text-scale-ratio) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-base-size) / var(--text-scale-ratio));
    --text-md: var(--text-base-size);
    --text-lg: calc(var(--text-base-size) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxxxl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxxxxl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));

    --color-hue-red: {{ colours.hue('red') }};
    --color-hue-pink: {{ colours.hue('pink') }};
    --color-hue-purple: {{ colours.hue('purple') }};
    --color-hue-deep-purple: {{ colours.hue('deep-purple') }};
    --color-hue-indigo: {{ colours.hue('indigo') }};
    --color-hue-blue: {{ colours.hue('blue') }};
    --color-hue-light-blue: {{ colours.hue('light-blue') }};
    --color-hue-cyan: {{ colours.hue('cyan') }};
    --color-hue-teal: {{ colours.hue('teal') }};
    --color-hue-green: {{ colours.hue('green') }};
    --color-hue-phpdocumentor-green: {{ colours.hue('phpdocumentor-green') }};
    --color-hue-light-green: {{ colours.hue('light-green') }};
    --color-hue-lime: {{ colours.hue('lime') }};
    --color-hue-yellow: {{ colours.hue('yellow') }};
    --color-hue-amber: {{ colours.hue('amber') }};
    --color-hue-orange: {{ colours.hue('orange') }};
    --color-hue-deep-orange: {{ colours.hue('deep-orange') }};
    --color-hue-brown: {{ colours.hue('brown') }};

    /* Colors */
    --primary-color-hue: var(--color-hue-{{ parameter.color|default('blue') }}, --color-hue-blue);
    --primary-color-saturation: 57%;
    --primary-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 60%);
    --primary-color-darken: hsl(var(--primary-color-hue), var(--primary-color-saturation), 40%);
    --primary-color-darker: hsl(var(--primary-color-hue), var(--primary-color-saturation), 25%);
    --primary-color-darkest: hsl(var(--primary-color-hue), var(--primary-color-saturation), 10%);
    --primary-color-lighten: hsl(var(--primary-color-hue), calc(var(--primary-color-saturation) - 20%), 85%);
    --primary-color-lighter: hsl(var(--primary-color-hue), calc(var(--primary-color-saturation) - 45%), 97.5%);
    --dark-gray: #d1d1d1;
    --light-gray: #f0f0f0;

    --text-color: var(--primary-color-darkest);

    --header-height: var(--spacing-xxxxl);
    --header-bg-color: var(--primary-color);
    --code-background-color: var(--primary-color-lighter);
    --code-border-color: --primary-color-lighten;
    --button-border-color: var(--primary-color-darken);
    --button-color: transparent;
    --button-color-primary: var(--primary-color);
    --button-text-color: #555;
    --button-text-color-primary: white;
    --popover-background-color: rgba(255, 255, 255, 0.75);
    --link-color-primary: var(--primary-color-darker);
    --link-hover-color-primary: var(--primary-color-darkest);
    --form-field-border-color: var(--dark-gray);
    --form-field-color: #fff;
    --admonition-success-color: var(--primary-color);
    --admonition-border-color: silver;
    --table-separator-color: var(--primary-color-lighten);
    --title-text-color: var(--primary-color);

    --sidebar-border-color: var(--primary-color-lighten);

    /* Grid */
    --container-width: 1400px;

    /* Spacing */
    --spacing-base-size: 1rem;
    --spacing-scale-ratio: 1.5;

    --spacing-xxxs: calc(var(--spacing-base-size) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio));
    --spacing-xxs: calc(var(--spacing-base-size) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio));
    --spacing-xs: calc(var(--spacing-base-size) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio));
    --spacing-sm: calc(var(--spacing-base-size) / var(--spacing-scale-ratio));
    --spacing-md: var(--spacing-base-size);
    --spacing-lg: calc(var(--spacing-base-size) * var(--spacing-scale-ratio));
    --spacing-xl: calc(var(--spacing-base-size) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio));
    --spacing-xxl: calc(var(--spacing-base-size) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio));
    --spacing-xxxl: calc(var(--spacing-base-size) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio));
    --spacing-xxxxl: calc(var(--spacing-base-size) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio));

    --border-radius-base-size: 3px;
}