:root {
    --radius: 0.65rem;

    /* Backgrounds & surfaces (monochrome, neutral) */
    /*--color-bg: oklch(0.985 0 0);*/
	--color-bg: #F5F5F5;
    /*--color-surface: oklch(0.96 0 0);*/
	--color-surface: #FFFFFF;
    --color-surface-muted: oklch(0.91 0 0);
    --color-surface-nav: #EAEAEA;

    /* Borders */
    /*--color-border: oklch(0.922 0 0);*/
	--color-border: #DEDEDE;
    --color-border-strong: #D3D7DC;

    /* Text */
    --color-text: #1F2933;
    --color-text-muted: oklch(0.556 0 0);
    --color-text-subtle: #9AA1AA;

    /* Brand */
    --color-primary: oklch(0.205 0 0);
    --color-primary-soft: #E3EFEC;
    --color-accent: #CFAE70;

    /* Semantic */
    --color-success: #3F7D5A;
    --color-warning: #B7791F;
    --color-danger: #B42318;

    /* Inputs */
    --color-input-bg: var(--color-surface);
    --color-input-border: var(--color-border);
    --color-input-border-focus: var(--color-primary);
    --color-input-placeholder: var(--color-text-subtle);
}

.dark {
    /* Backgrounds & surfaces */
    --color-bg: oklch(0.145 0 0);
    --color-surface: oklch(0.205 0 0);
    --color-surface-muted: oklch(0.269 0 0);
    --color-surface-nav: #2A2A2A;

    /* Borders */
    --color-border: oklch(1 0 0 / 10%);
    --color-border-strong: #323846;

    /* Text */
    --color-text: #E6E8EB;
    --color-text-muted: oklch(0.708 0 0);
    --color-text-subtle: #6E7683;

    /* Brand */
    --color-primary: oklch(0.922 0 0);
    --color-primary-soft: #1E3A36;
    --color-accent: #E6C17A;

    /* Semantic */
    --color-success: #6FCF97;
    --color-warning: #F2C94C;
    --color-danger: #F97066;
    --color-highlight: #1E2A3A;
}

/* Photo Grid Styles */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.photo-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--color-surface-muted);
    border: 2px solid var(--color-border);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.photo-item:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.photo-item--dragging {
    cursor: grabbing;
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.photo-item--drop-before,
.photo-item--drop-after {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
}

.photo-item--drop-before {
    box-shadow: -4px 0 0 0 var(--color-primary);
}

.photo-item--drop-after {
    box-shadow: 4px 0 0 0 var(--color-primary);
}

.photo-item--placeholder {
    border: 2px dashed var(--color-border-strong);
    background-color: var(--color-surface-muted);
}

.photo-item--new {
    border-color: var(--color-success);
}

.photo-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.photo-item__remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--color-danger);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.photo-item:hover .photo-item__remove {
    opacity: 1;
}

.photo-item__remove:hover {
    transform: scale(1.1);
}

.photo-item__badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--color-success);
    color: #fff;
}

.photo-item__badge--cover {
    background-color: var(--color-primary);
}

.photo-upload-input {
    display: block;
    padding: 0.75rem 1rem;
    border: 2px dashed var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.photo-upload-input:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
}

.photo-upload-input::file-selector-button {
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    border: none;
    border-radius: 0.25rem;
    background-color: var(--color-primary);
    color: #fff;
    cursor: pointer;
    font-size: 0.875rem;
}

/* Video Grid Styles */
.video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.video-grid--stories {
    grid-template-columns: repeat(6, 1fr);
}

.video-card {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--color-surface-muted);
    border: 2px solid var(--color-border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.video-card--video {
    aspect-ratio: 16 / 9;
}

.video-card--story {
    aspect-ratio: 9 / 16;
}

.video-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.video-card--ready {
    border-color: var(--color-success);
}

.video-card--error {
    border-color: var(--color-danger);
}

.video-card__preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.video-card__thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card__status {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.video-card__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

.video-card__name {
    font-size: 0.7rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-card__remove {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--color-danger);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.video-card:hover .video-card__remove {
    opacity: 1;
}

.video-card__spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: video-spin 0.8s linear infinite;
}

@keyframes video-spin {
    to { transform: rotate(360deg); }
}

/* Geist Light */
@font-face {
    font-family: "Geist";
    src: url("/assets/geist-latin-300-normal-a58cdbb6.woff2") format("woff2"),
        url("/assets/geist-latin-300-normal-3f3a9d30.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Geist Regular */
@font-face {
    font-family: "Geist";
    src: url("/assets/geist-latin-400-normal-0ad1b888.woff2") format("woff2"),
        url("/assets/geist-latin-400-normal-5cde9670.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Geist Medium */
@font-face {
    font-family: "Geist";
    src: url("/assets/geist-latin-500-normal-0568aa9c.woff2") format("woff2"),
        url("/assets/geist-latin-500-normal-96c5f2c3.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Geist Semi-Bold */
@font-face {
    font-family: "Geist";
    src: url("/assets/geist-latin-600-normal-7e10f290.woff2") format("woff2"),
        url("/assets/geist-latin-600-normal-c1c7942e.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Geist Bold */
@font-face {
    font-family: "Geist";
    src: url("/assets/geist-latin-700-normal-eed57b57.woff2") format("woff2"),
        url("/assets/geist-latin-700-normal-368731bc.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Instrument */
@font-face {
	font-family: "Instrument";
	src: url("/assets/instrument-serif-latin-400-normal-6c5b1c87.woff2") format("woff2"),
		url("/assets/instrument-serif-latin-400-normal-e8cbe3d2.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Cormorant Garamond - Light */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("/assets/cormorant-garamond-latin-300-normal-b0de3097.woff2") format("woff2"),
		url("/assets/cormorant-garamond-latin-300-normal-81c4a8d3.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* Cormorant Garamond - Regular */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("/assets/cormorant-garamond-latin-400-normal-1cc13254.woff2") format("woff2"),
		url("/assets/cormorant-garamond-latin-400-normal-a85700c2.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Cormorant Garamond - Medium */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("/assets/cormorant-garamond-latin-500-normal-c7a7554e.woff2") format("woff2"),
		url("/assets/cormorant-garamond-latin-500-normal-667ff4d7.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Cormorant Garamond - SemiBold */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("/assets/cormorant-garamond-latin-600-normal-093b0202.woff2") format("woff2"),
		url("/assets/cormorant-garamond-latin-600-normal-03350cac.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Cormorant Garamond - Light Italic */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("/assets/cormorant-garamond-latin-300-italic-85668bbb.woff2") format("woff2"),
		url("/assets/cormorant-garamond-latin-300-italic-aa4168f1.woff") format("woff");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

/* Cormorant Garamond - Regular Italic */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("/assets/cormorant-garamond-latin-400-italic-199057bb.woff2") format("woff2"),
		url("/assets/cormorant-garamond-latin-400-italic-6156eca2.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Cormorant Garamond - Medium Italic */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("/assets/cormorant-garamond-latin-500-italic-d3604db8.woff2") format("woff2"),
		url("/assets/cormorant-garamond-latin-500-italic-96532b64.woff") format("woff");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* JetBrains Mono - ExtraLight */
@font-face {
	font-family: "JetBrains Mono";
	src: url("/assets/jetbrains-mono-latin-200-normal-efb70e2c.woff2") format("woff2"),
		url("/assets/jetbrains-mono-latin-200-normal-c21b81bd.woff") format("woff");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

/* JetBrains Mono - Light */
@font-face {
	font-family: "JetBrains Mono";
	src: url("/assets/jetbrains-mono-latin-300-normal-78c70f5e.woff2") format("woff2"),
		url("/assets/jetbrains-mono-latin-300-normal-469ce2d7.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* JetBrains Mono - Regular */
@font-face {
	font-family: "JetBrains Mono";
	src: url("/assets/jetbrains-mono-latin-400-normal-849c32ea.woff2") format("woff2"),
		url("/assets/jetbrains-mono-latin-400-normal-7dd064cf.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

body {
    font-family: "Geist", sans-serif;
}

/* Coming Soon Page Styles */
.coming-soon-page {
    background-color: var(--color-paper);
    color: var(--color-ink);
    font-family: "Geist", sans-serif;
}

.coming-soon-page .font-serif {
    font-family: "Cormorant Garamond", serif;
}

.coming-soon-page .font-mono {
    font-family: "JetBrains Mono", monospace;
}

.vellum-glass {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.5),
        0 20px 40px -4px rgba(0, 0, 0, 0.5);
}

.coming-soon-page ::selection {
    background: #333333;
    color: #FAFAFA;
}

.grid-overlay {
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 1.2s ease-out forwards;
}

.serif {
	font-family: "Instrument", serif;
}