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

:root,
::selection {

    /* Default palette */
    --color-50: oklch(0.985 0 0);
    --color-100: oklch(0.967 0.001 286.375);
    --color-200: oklch(0.92 0.004 286.32);
    --color-300: oklch(0.871 0.006 286.286);
    --color-400: oklch(0.705 0.015 286.067);
    --color-500: oklch(0.552 0.016 285.938);
    --color-600: oklch(0.442 0.017 285.786);
    --color-700: oklch(0.37 0.013 285.805);
    --color-800: oklch(0.274 0.006 286.033);
    --color-900: oklch(0.21 0.006 285.885);
    --color-950: oklch(0.141 0.005 285.823);

    /* Light theme */
    --color-page: var(--color-50);
    --color-surface-1: var(--color-100);
    --color-surface-2: var(--color-200);
    --color-surface-3: var(--color-300);
    --color-content-stark: var(--color-900);
    --color-content-neutral: var(--color-600);
    --color-content-subtle: var(--color-500);
    --color-field-surface: var(--color-300);
    --color-field-surface-hover: var(--color-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: #f6c07b;
    --color-brand-surface-hover: #f19b46;
    --color-brand-inverse: #763518;
    --color-brand-content: #de6618;
    --color-accent-surface: #ffccd3;
    --color-accent-surface-hover: #ffa1ad;
    --color-accent-inverse: #a50036;
    --color-accent-content: #ff637e;
    --color-positive-surface: #16a34a;
    --color-positive-surface-hover: #166534;
    --color-positive-inverse: white;
    --color-positive-content: var(--color-positive-surface);
    --color-negative-surface: #ef4444;
    --color-negative-surface-hover: #dc2626;
    --color-negative-inverse: white;
    --color-negative-content: var(--color-negative-surface);

    /* Sizes */
    --radius: 0.5rem;
    --spacing: 0.25rem;
    --spacing-content-width: 68.75rem;
    --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: 5vw;

    /* Effects */
    --transition: all .05s ease-in-out;
    --tooltip-hover-delay: .5s;

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

    /* 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-checkbox: 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-toast-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");
}

/* Dark theme overrides */
.dark {
    --color-page: var(--color-950);
    --color-surface-1: var(--color-900);
    --color-surface-2: var(--color-800);
    --color-surface-3: var(--color-700);
    --color-field-surface: var(--color-700);
    --color-field-surface-hover: var(--color-600);
    --color-popover-surface: var(--color-700);
    --color-content-stark: var(--color-50);
    --color-content-neutral: var(--color-400);
    --color-content-subtle: var(--color-500);
    --color-brand-content: #f6c07b;
    --color-accent-content: #ffa1ad;
}

@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, var(--color-surface-1) 92%, var(--color-content-stark))
    }

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

    /* Disabled state */
    :where([disabled], :disabled, [aria-disabled=true], .disabled) {
        opacity: .5;
        cursor: default;
        pointer-events: none
    }
}


/* Custom styles */

nav a.selected {
    color: var(--color-brand-content)
}

div a {
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-content-neutral);

    &:hover {
        color: var(--color-brand-content);

        & [x-icon] {
            color: var(--color-content-stark)
        }
    }

    & [x-icon] {
        margin-right: 1ch;
        color: var(--color-content-subtle)
    }
}

h1 {
    font-size: 2.9rem;
    line-height: 3.4rem;
    letter-spacing: -0.025em
}

p {
    font-size: 1.125rem;
    color: var(--color-content-neutral);

    & a {
        font-size: inherit;
        font-weight: normal;
        color: var(--color-brand-content);
        text-decoration: underline;
        text-decoration-color: color-mix(in oklch, var(--color-content-neutral) 50%, transparent);
        text-decoration-thickness: -0.5px;

        &:hover {
            color: var(--color-content-stark)
        }
    }
}

.project {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    width: 100%;
    z-index: 0;

    &:hover::before {
        background-color: var(--color-surface-1);
    }

    &::before {
        position: absolute;
        content: "";
        top: calc(var(--spacing) * -5);
        left: calc(var(--spacing) * -5);
        width: calc(100% + (var(--spacing) * 10));
        height: calc(100% + (var(--spacing) * 10));
        background-color: transparent;
        border-radius: calc(var(--radius) * 2);
        z-index: -1;
        transition: var(--transition);
    }
}