/*
 Theme Name:   dots & boxes Basic Theme
 Theme URI:    https://dotsnboxes.de
 Description:  Basic child theme for bricks builder
 Author:       dots & boxes
 Author URI:   https://dotsnboxes.de
 Template:     bricks
 Version:      1.1
 Text Domain:  dnb-child
*/

html.dnb-theme-dark {
    color-scheme: dark;
}

:root {
    --btn-border-radius: var(--radius-xs);
    --btn-text-size: var(--text-lg);
    --btn-border-with: 0;

    --link-text-size: var(--text-base);
    --link-text-decoration: none;
    --link-letter-spacing: 0;
    --side-margin: var(--side-margin-desktop);
    --grid-gap: var(--grid-gap-desktop);
  --action-inverse: var(--light);
  

    /* Brand Colors */
}

@media screen and (max-width: 767px) {
    :root {
        --side-margin: var(--side-margin-mobile);
        --grid-gap: var(--grid-gap-mobile);
    }
}

html {
    font-size: 100%;
    background-color: var(--bg-body);
}

body {
    color: var(--text-body);
    font-size: var(--text-m);
    font-family: var(--body-font);
    letter-spacing: var(--body-letter-spacing, 0);
    line-height: var(--body-line-height, 1.5);
}

.headline,
h6,
h5,
h4,
h3,
h2,
h1 {
    font-family: var(--title-font);
    color: var(--text-title);
}

button, a {
  cursor: pointer;
}

/* --- Compontents --- */
.highlight {
    --action: var(--tertiary);
    --text-body: var(--tertiary);
    --text-title: var(--tertiary);
    background: var(--primary);
    color: var(--text-body);
}

.highlight._secondary {
    --action: var(--secondary-l-1);
    --action-inverse: var(--primary);
    --text-body: var(--secondary-l-1);
    --text-title: var(--secondary-l-1);
    background: var(--secondary);
    color: var(--text-body);

}


.badge {
    --badge-text: var(--primary);
    --badge-bg: var(--secondary-l-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4xs);
    padding: var(--space-2xs) var(--space-s);
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: var(--text-s);
    font-weight: 500;
    border-radius: var(--radius-full);
    border: 0;
    outline: 0;
}

.badge.secondary {
    --badge-text: var(--secondary);
    --bdge-bg: var(--primary);
}

.text-current {
    color: currentColor;
}