/* Font configuration */

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Sono:wght@400&family=Comfortaa:wght@400;700&display=swap");


/* Font stacks as CSS custom properties */
:root {
    --pico-font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pico-font-family-sans-serif: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pico-font-family-monospace: "Sono", 'Fira Code', 'SF Mono', Consolas, monospace;
    --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    --font-display: "Comfortaa", sans-serif;
    --font-heading: "Comfortaa", sans-serif;
    font-variant-emoji: text;
}

/* Base16 color scheme integration for Nicolino
   Generated from: Default Dark (dark) and Default Light (light)
   Authors: Chris Kempson (http://chriskempson.com) / Chris Kempson (http://chriskempson.com) */

/* Theme: Default Dark */

[data-theme=dark] {
    /* Pico CSS color variables */
    --pico-background-color: #181818;
    --pico-color: #d8d8d8;
    --pico-text-selection-color: #383838;
    --pico-muted-color: #585858;
    --pico-muted-border-color: #383838;
    --pico-primary: #7cafc2;
    --pico-primary-background: #383838;
    --pico-primary-border: var(--pico-primary-background);
    --pico-primary-underline: rgba(7c, af, c2, 0.5);
    --pico-primary-hover: #ba8baf;
    --pico-primary-hover-background: #ba8baf;
    --pico-primary-hover-border: var(--pico-primary-hover-background);
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --pico-primary-focus: rgba(7c, af, c2, 0.5);
    --pico-primary-inverse: #181818;
    --pico-secondary: #b8b8b8;
    --pico-secondary-background: #383838;
    --pico-secondary-border: var(--pico-secondary-background);
    --pico-secondary-underline: rgba(b8, b8, b8, 0.5);
    --pico-secondary-hover: #d8d8d8;
    --pico-secondary-hover-background: #585858;
    --pico-secondary-hover-border: var(--pico-secondary-hover-background);
    --pico-secondary-hover-underline: var(--pico-secondary-hover);
    --pico-secondary-focus: rgba(b8, b8, b8, 0.25);
    --pico-secondary-inverse: #181818;
    --pico-contrast: #e8e8e8;
    --pico-contrast-background: #e8e8e8;
    --pico-contrast-border: var(--pico-contrast-background);
    --pico-contrast-underline: rgba(e8, e8, e8, 0.5);
    --pico-contrast-hover: #f8f8f8;
    --pico-contrast-hover-background: #f8f8f8;
    --pico-contrast-hover-border: var(--pico-contrast-hover-background);
    --pico-contrast-hover-underline: var(--pico-contrast-hover);
    --pico-contrast-focus: rgba(e8, e8, e8, 0.25);
    --pico-contrast-inverse: #181818;
    --pico-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    --pico-h1-color: #e8e8e8;
    --pico-h2-color: #d8d8d8;
    --pico-h3-color: #d8d8d8;
    --pico-h4-color: #b8b8b8;
    --pico-h5-color: #b8b8b8;
    --pico-h6-color: #585858;
    --pico-mark-background-color: #f7ca88;
    --pico-mark-color: #181818;
    --pico-ins-color: #a1b56c;
    --pico-del-color: #ab4642;
    --pico-blockquote-border-color: var(--pico-muted-border-color);
    --pico-blockquote-footer-color: var(--pico-muted-color);
    --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-table-border-color: var(--pico-muted-border-color);
    --pico-table-row-stripped-background-color: #282828;
    --pico-code-background-color: #282828;
    --pico-code-color: #f7ca88;
    --pico-code-kbd-background-color: var(--pico-color);
    --pico-code-kbd-color: var(--pico-background-color);
    --pico-form-element-background-color: #181818;
    --pico-form-element-selected-background-color: #383838;
    --pico-form-element-border-color: #585858;
    --pico-form-element-color: #d8d8d8;
    --pico-form-element-placeholder-color: var(--pico-muted-color);
    --pico-form-element-active-background-color: #181818;
    --pico-form-element-active-border-color: var(--pico-primary-border);
    --pico-form-element-focus-color: var(--pico-primary-border);
    --pico-form-element-disabled-opacity: 0.5;
    --pico-form-element-invalid-border-color: #ab4642;
    --pico-form-element-invalid-active-border-color: #dc9656;
    --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
    --pico-form-element-valid-border-color: #a1b56c;
    --pico-form-element-valid-active-border-color: #86c1b9;
    --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
    --pico-switch-background-color: #585858;
    --pico-switch-checked-background-color: var(--pico-primary-background);
    --pico-switch-color: #181818;
    --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-range-border-color: #383838;
    --pico-range-active-border-color: #585858;
    --pico-range-thumb-border-color: var(--pico-background-color);
    --pico-range-thumb-color: var(--pico-secondary-background);
    --pico-range-thumb-active-color: var(--pico-primary-background);
    --pico-accordion-border-color: var(--pico-muted-border-color);
    --pico-accordion-active-summary-color: var(--pico-primary-hover);
    --pico-accordion-close-summary-color: var(--pico-color);
    --pico-accordion-open-summary-color: var(--pico-muted-color);
    --pico-card-background-color: #181818;
    --pico-card-border-color: var(--pico-muted-border-color);
    --pico-card-box-shadow: var(--pico-box-shadow);
    --pico-card-sectioning-background-color: #282828;
    --pico-dropdown-background-color: #181818;
    --pico-dropdown-border-color: #383838;
    --pico-dropdown-box-shadow: var(--pico-box-shadow);
    --pico-dropdown-color: var(--pico-color);
    --pico-dropdown-hover-background-color: #282828;
    --pico-loading-spinner-opacity: 0.5;
    --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.5);
    --pico-progress-background-color: #383838;
    --pico-progress-color: var(--pico-primary-background);
    --pico-tooltip-background-color: var(--pico-contrast-background);
    --pico-tooltip-color: var(--pico-contrast-inverse);

    /* Base16 palette colors for use in custom styles */
    --b16-base00: #181818; /* Default background */
    --b16-base01: #282828; /* Lighter background */
    --b16-base02: #383838; /* Selection background */
    --b16-base03: #585858; /* Comments, secondary */
    --b16-base04: #b8b8b8; /* Darker foreground */
    --b16-base05: #d8d8d8; /* Default foreground */
    --b16-base06: #e8e8e8; /* Lighter foreground */
    --b16-base07: #f8f8f8; /* Lightest foreground */
    --b16-base08: #ab4642; /* Variables, etc */
    --b16-base09: #dc9656; /* Integers, constants */
    --b16-base0A: #f7ca88; /* Classes, search match */
    --b16-base0B: #a1b56c; /* Strings */
    --b16-base0C: #86c1b9; /* Support, regex */
    --b16-base0D: #7cafc2; /* Functions, methods */
    --b16-base0E: #ba8baf; /* Keywords */
    --b16-base0F: #a16946; /* Builtin, punctuation */
}

/* Theme: Default Light */

:root:not([data-theme=dark]),
[data-theme=light] {
    /* Pico CSS color variables */
    --pico-background-color: #f8f8f8;
    --pico-color: #383838;
    --pico-text-selection-color: #d8d8d8;
    --pico-muted-color: #b8b8b8;
    --pico-muted-border-color: #d8d8d8;
    --pico-primary: #7cafc2;
    --pico-primary-background: #d8d8d8;
    --pico-primary-border: var(--pico-primary-background);
    --pico-primary-underline: rgba(7c, af, c2, 0.5);
    --pico-primary-hover: #ba8baf;
    --pico-primary-hover-background: #ba8baf;
    --pico-primary-hover-border: var(--pico-primary-hover-background);
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --pico-primary-focus: rgba(7c, af, c2, 0.5);
    --pico-primary-inverse: #f8f8f8;
    --pico-secondary: #585858;
    --pico-secondary-background: #d8d8d8;
    --pico-secondary-border: var(--pico-secondary-background);
    --pico-secondary-underline: rgba(58, 58, 58, 0.5);
    --pico-secondary-hover: #383838;
    --pico-secondary-hover-background: #b8b8b8;
    --pico-secondary-hover-border: var(--pico-secondary-hover-background);
    --pico-secondary-hover-underline: var(--pico-secondary-hover);
    --pico-secondary-focus: rgba(58, 58, 58, 0.25);
    --pico-secondary-inverse: #f8f8f8;
    --pico-contrast: #282828;
    --pico-contrast-background: #282828;
    --pico-contrast-border: var(--pico-contrast-background);
    --pico-contrast-underline: rgba(28, 28, 28, 0.5);
    --pico-contrast-hover: #181818;
    --pico-contrast-hover-background: #181818;
    --pico-contrast-hover-border: var(--pico-contrast-hover-background);
    --pico-contrast-hover-underline: var(--pico-contrast-hover);
    --pico-contrast-focus: rgba(28, 28, 28, 0.25);
    --pico-contrast-inverse: #f8f8f8;
    --pico-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    --pico-h1-color: #282828;
    --pico-h2-color: #383838;
    --pico-h3-color: #383838;
    --pico-h4-color: #585858;
    --pico-h5-color: #585858;
    --pico-h6-color: #b8b8b8;
    --pico-mark-background-color: #f7ca88;
    --pico-mark-color: #f8f8f8;
    --pico-ins-color: #a1b56c;
    --pico-del-color: #ab4642;
    --pico-blockquote-border-color: var(--pico-muted-border-color);
    --pico-blockquote-footer-color: var(--pico-muted-color);
    --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-table-border-color: var(--pico-muted-border-color);
    --pico-table-row-stripped-background-color: #e8e8e8;
    --pico-code-background-color: #e8e8e8;
    --pico-code-color: #f7ca88;
    --pico-code-kbd-background-color: var(--pico-color);
    --pico-code-kbd-color: var(--pico-background-color);
    --pico-form-element-background-color: #f8f8f8;
    --pico-form-element-selected-background-color: #d8d8d8;
    --pico-form-element-border-color: #b8b8b8;
    --pico-form-element-color: #383838;
    --pico-form-element-placeholder-color: var(--pico-muted-color);
    --pico-form-element-active-background-color: #f8f8f8;
    --pico-form-element-active-border-color: var(--pico-primary-border);
    --pico-form-element-focus-color: var(--pico-primary-border);
    --pico-form-element-disabled-opacity: 0.5;
    --pico-form-element-invalid-border-color: #ab4642;
    --pico-form-element-invalid-active-border-color: #dc9656;
    --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
    --pico-form-element-valid-border-color: #a1b56c;
    --pico-form-element-valid-active-border-color: #86c1b9;
    --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
    --pico-switch-background-color: #b8b8b8;
    --pico-switch-checked-background-color: var(--pico-primary-background);
    --pico-switch-color: #f8f8f8;
    --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-range-border-color: #d8d8d8;
    --pico-range-active-border-color: #b8b8b8;
    --pico-range-thumb-border-color: var(--pico-background-color);
    --pico-range-thumb-color: var(--pico-secondary-background);
    --pico-range-thumb-active-color: var(--pico-primary-background);
    --pico-accordion-border-color: var(--pico-muted-border-color);
    --pico-accordion-active-summary-color: var(--pico-primary-hover);
    --pico-accordion-close-summary-color: var(--pico-color);
    --pico-accordion-open-summary-color: var(--pico-muted-color);
    --pico-card-background-color: #f8f8f8;
    --pico-card-border-color: var(--pico-muted-border-color);
    --pico-card-box-shadow: var(--pico-box-shadow);
    --pico-card-sectioning-background-color: #e8e8e8;
    --pico-dropdown-background-color: #f8f8f8;
    --pico-dropdown-border-color: #d8d8d8;
    --pico-dropdown-box-shadow: var(--pico-box-shadow);
    --pico-dropdown-color: var(--pico-color);
    --pico-dropdown-hover-background-color: #e8e8e8;
    --pico-loading-spinner-opacity: 0.5;
    --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.5);
    --pico-progress-background-color: #d8d8d8;
    --pico-progress-color: var(--pico-primary-background);
    --pico-tooltip-background-color: var(--pico-contrast-background);
    --pico-tooltip-color: var(--pico-contrast-inverse);

    /* Base16 palette colors for use in custom styles */
    --b16-base00: #f8f8f8; /* Default background */
    --b16-base01: #e8e8e8; /* Lighter background */
    --b16-base02: #d8d8d8; /* Selection background */
    --b16-base03: #b8b8b8; /* Comments, secondary */
    --b16-base04: #585858; /* Darker foreground */
    --b16-base05: #383838; /* Default foreground */
    --b16-base06: #282828; /* Lighter foreground */
    --b16-base07: #181818; /* Lightest foreground */
    --b16-base08: #ab4642; /* Variables, etc */
    --b16-base09: #dc9656; /* Integers, constants */
    --b16-base0A: #f7ca88; /* Classes, search match */
    --b16-base0B: #a1b56c; /* Strings */
    --b16-base0C: #86c1b9; /* Support, regex */
    --b16-base0D: #7cafc2; /* Functions, methods */
    --b16-base0E: #ba8baf; /* Keywords */
    --b16-base0F: #a16946; /* Builtin, punctuation */
}

/* Highlight.js syntax highlighting - dark theme */
pre code.hljs,
[data-theme=dark] pre code.hljs,
[data-theme=dark] .hljs {
    color: #d8d8d8;
    background: #282828;
}
[data-theme=dark] .hljs-comment,
[data-theme=dark] .hljs-quote {
    color: #585858;
    font-style: italic;
}
[data-theme=dark] .hljs-tag,
[data-theme=dark] .hljs-variable,
[data-theme=dark] .hljs-template-variable,
[data-theme=dark] .hljs-selector-tag,
[data-theme=dark] .hljs-name,
[data-theme=dark] .hljs-deletion {
    color: #ab4642;
}
[data-theme=dark] .hljs-symbol,
[data-theme=dark] .hljs-number,
[data-theme=dark] .hljs-link,
[data-theme=dark] .hljs-attr,
[data-theme=dark] .hljs-variable.constant_,
[data-theme=dark] .hljs-literal {
    color: #dc9656;
}
[data-theme=dark] .hljs-title,
[data-theme=dark] .hljs-class .hljs-title,
[data-theme=dark] .hljs-title.class_ {
    color: #f7ca88;
}
[data-theme=dark] .hljs-strong {
    font-weight: bold;
    color: #f7ca88;
}
[data-theme=dark] .hljs-code,
[data-theme=dark] .hljs-addition,
[data-theme=dark] .hljs-title.class_.inherited__,
[data-theme=dark] .hljs-string {
    color: #a1b56c;
}
[data-theme=dark] .hljs-built_in,
[data-theme=dark] .hljs-doctag,
[data-theme=dark] .hljs-quote,
[data-theme=dark] .hljs-keyword.hljs-atrule,
[data-theme=dark] .hljs-regexp {
    color: #86c1b9;
}
[data-theme=dark] .hljs-function .hljs-title,
[data-theme=dark] .hljs-attribute,
[data-theme=dark] .hljs-title.function_ {
    color: #7cafc2;
}
[data-theme=dark] .hljs-type,
[data-theme=dark] .hljs-template-tag,
[data-theme=dark] .diff .hljs-meta,
[data-theme=dark] .hljs-keyword {
    color: #ba8baf;
}
[data-theme=dark] .hljs-emphasis {
    color: #ba8baf;
    font-style: italic;
}
[data-theme=dark] .hljs-meta,
[data-theme=dark] .hljs-meta .hljs-keyword,
[data-theme=dark] .hljs-meta .hljs-string {
    color: #a16946;
}

/* Highlight.js syntax highlighting - light theme */
pre code.hljs,
:root:not([data-theme=dark]) pre code.hljs,
[data-theme=light] pre code.hljs,
:root:not([data-theme=dark]) .hljs,
[data-theme=light] .hljs {
    color: #383838;
    background: #e8e8e8;
}
:root:not([data-theme=dark]) .hljs-comment,
:root:not([data-theme=dark]) .hljs-quote,
[data-theme=light] .hljs-comment,
[data-theme=light] .hljs-quote {
    color: #b8b8b8;
    font-style: italic;
}
:root:not([data-theme=dark]) .hljs-tag,
:root:not([data-theme=dark]) .hljs-variable,
:root:not([data-theme=dark]) .hljs-template-variable,
:root:not([data-theme=dark]) .hljs-selector-tag,
:root:not([data-theme=dark]) .hljs-name,
:root:not([data-theme=dark]) .hljs-deletion,
[data-theme=light] .hljs-tag,
[data-theme=light] .hljs-variable,
[data-theme=light] .hljs-template-variable,
[data-theme=light] .hljs-selector-tag,
[data-theme=light] .hljs-name,
[data-theme=light] .hljs-deletion {
    color: #ab4642;
}
:root:not([data-theme=dark]) .hljs-symbol,
:root:not([data-theme=dark]) .hljs-number,
:root:not([data-theme=dark]) .hljs-link,
:root:not([data-theme=dark]) .hljs-attr,
:root:not([data-theme=dark]) .hljs-variable.constant_,
:root:not([data-theme=dark]) .hljs-literal,
[data-theme=light] .hljs-symbol,
[data-theme=light] .hljs-number,
[data-theme=light] .hljs-link,
[data-theme=light] .hljs-attr,
[data-theme=light] .hljs-variable.constant_,
[data-theme=light] .hljs-literal {
    color: #dc9656;
}
:root:not([data-theme=dark]) .hljs-title,
:root:not([data-theme=dark]) .hljs-class .hljs-title,
:root:not([data-theme=dark]) .hljs-title.class_,
[data-theme=light] .hljs-title,
[data-theme=light] .hljs-class .hljs-title,
[data-theme=light] .hljs-title.class_ {
    color: #f7ca88;
}
:root:not([data-theme=dark]) .hljs-strong,
[data-theme=light] .hljs-strong {
    font-weight: bold;
    color: #f7ca88;
}
:root:not([data-theme=dark]) .hljs-code,
:root:not([data-theme=dark]) .hljs-addition,
:root:not([data-theme=dark]) .hljs-title.class_.inherited__,
:root:not([data-theme=dark]) .hljs-string,
[data-theme=light] .hljs-code,
[data-theme=light] .hljs-addition,
[data-theme=light] .hljs-title.class_.inherited__,
[data-theme=light] .hljs-string {
    color: #a1b56c;
}
:root:not([data-theme=dark]) .hljs-built_in,
:root:not([data-theme=dark]) .hljs-doctag,
:root:not([data-theme=dark]) .hljs-quote,
:root:not([data-theme=dark]) .hljs-keyword.hljs-atrule,
:root:not([data-theme=dark]) .hljs-regexp,
[data-theme=light] .hljs-built_in,
[data-theme=light] .hljs-doctag,
[data-theme=light] .hljs-quote,
[data-theme=light] .hljs-keyword.hljs-atrule,
[data-theme=light] .hljs-regexp {
    color: #86c1b9;
}
:root:not([data-theme=dark]) .hljs-function .hljs-title,
:root:not([data-theme=dark]) .hljs-attribute,
:root:not([data-theme=dark]) .hljs-title.function_,
[data-theme=light] .hljs-function .hljs-title,
[data-theme=light] .hljs-attribute,
[data-theme=light] .hljs-title.function_ {
    color: #7cafc2;
}
:root:not([data-theme=dark]) .hljs-type,
:root:not([data-theme=dark]) .hljs-template-tag,
:root:not([data-theme=dark]) .diff .hljs-meta,
:root:not([data-theme=dark]) .hljs-keyword,
[data-theme=light] .hljs-type,
[data-theme=light] .hljs-template-tag,
[data-theme=light] .diff .hljs-meta,
[data-theme=light] .hljs-keyword {
    color: #ba8baf;
}
:root:not([data-theme=dark]) .hljs-emphasis,
[data-theme=light] .hljs-emphasis {
    color: #ba8baf;
    font-style: italic;
}
:root:not([data-theme=dark]) .hljs-meta,
:root:not([data-theme=dark]) .hljs-meta .hljs-keyword,
:root:not([data-theme=dark]) .hljs-meta .hljs-string,
[data-theme=light] .hljs-meta,
[data-theme=light] .hljs-meta .hljs-keyword,
[data-theme=light] .hljs-meta .hljs-string {
    color: #a16946;
}

/* Theme-specific override for copy button background */
[data-theme=dark] .hljs-copy-button {
    background-color: #444267;
}
[data-theme=light] .hljs-copy-button {
    background-color: #9894b5;
}