/*  Manifest Theme CSS
/*  By Andrew Matlock under MIT license
/*  https://manifestx.dev/styles/theme
/*  Modify values to customize your project theme
*/

@layer base, components, utilities;

:root,
::selection {

    /* Light mode */
    --color-page: var(--color-neutral-50);
    --color-surface-1: var(--color-neutral-100);
    --color-surface-2: var(--color-neutral-200);
    --color-surface-3: var(--color-neutral-300);
    --color-content-stark: var(--color-neutral-900);
    --color-content-neutral: var(--color-neutral-600);
    --color-content-subtle: var(--color-neutral-500);
    --color-field-surface: var(--color-neutral-300);
    --color-field-surface-hover: var(--color-neutral-400);
    --color-field-inverse: var(--color-content-stark);
    --color-popover-surface: var(--color-page);
    --color-line: color-mix(in oklch, var(--color-content-stark) 11%, transparent);
    --color-brand-surface: var(--color-yellow-300);
    --color-brand-surface-hover: var(--color-yellow-400);
    --color-brand-inverse: var(--color-yellow-700);
    --color-brand-content: var(--color-yellow-600);
    --color-accent-surface: var(--color-neutral-900);
    --color-accent-surface-hover: var(--color-neutral-700);
    --color-accent-inverse: var(--color-neutral-50);
    --color-accent-content: var(--color-neutral-900);
    --color-positive-surface: var(--color-green-300);
    --color-positive-surface-hover: var(--color-green-400);
    --color-positive-inverse: var(--color-green-800);
    --color-positive-content: var(--color-green-600);
    --color-negative-surface: var(--color-red-300);
    --color-negative-surface-hover: var(--color-red-400);
    --color-negative-inverse: var(--color-red-800);
    --color-negative-content: var(--color-red-600);

    /* Fonts */
    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    /* Sizes */
    --radius: 0.5rem;
    --spacing: 0.25rem;
    --spacing-content-width: 74rem;
    --spacing-field-padding: calc(var(--spacing) * 2.5);
    --spacing-field-height: calc(var(--spacing) * 9);
    --spacing-popover-offset: calc(var(--spacing) * 2);
    --spacing-resize-handle: 1rem;
    --spacing-viewport-padding: 2rem;

    /* Effects */
    --transition: all .05s ease-in-out;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tooltip-hover-delay: .5s;
    --view-transition-duration: 200ms;
    --view-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Icons */
    --icon-accordion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E");
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --icon-dismiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
    --icon-previous: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    --icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* Dark mode overrides */
.dark {
    --color-page: var(--color-neutral-950);
    --color-surface-1: var(--color-neutral-900);
    --color-surface-2: var(--color-neutral-800);
    --color-surface-3: var(--color-neutral-700);
    --color-field-surface: var(--color-neutral-700);
    --color-field-surface-hover: var(--color-neutral-600);
    --color-popover-surface: var(--color-neutral-800);
    --color-content-stark: var(--color-neutral-50);
    --color-content-neutral: var(--color-neutral-400);
    --color-content-subtle: var(--color-neutral-500);
    --color-brand-surface: var(--color-yellow-400);
    --color-brand-surface-hover: var(--color-yellow-500);
    --color-brand-inverse: var(--color-yellow-800);
    --color-brand-content: var(--color-yellow-500);
    --color-accent-surface: var(--color-neutral-50);
    --color-accent-surface-hover: var(--color-neutral-200);
    --color-accent-inverse: var(--color-neutral-900);
    --color-accent-content: var(--color-neutral-50);
    --color-positive-surface: var(--color-green-400);
    --color-positive-surface-hover: var(--color-green-500);
    --color-positive-inverse: var(--color-green-900);
    --color-positive-content: var(--color-green-500);
    --color-negative-surface: var(--color-red-400);
    --color-negative-surface-hover: var(--color-red-500);
    --color-negative-inverse: var(--color-red-900);
    --color-negative-content: var(--color-red-500);
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter.woff2') format('woff2');
    font-weight: 400 500 600 700;
    font-display: swap
}

@layer base {

    /* Default font and colors */
    :where(html),
    :host {
        line-height: 1.5;
        font-family: var(--font-sans);
        color: var(--color-content-stark, inherit);
        background-color: var(--color-page, inherit)
    }

    /* Text selection */
    ::selection {
        background-color: color-mix(in oklch, currentColor 25%, transparent)
    }

    /* Focus state */
    :where(:focus-visible, :is(label, .label):has(> input[type=search], > input[type=file], > button[command="--copy"]):focus-within) {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 30%, transparent)
    }
}