/**
 * SEAM — shared design tokens and base styles
 * Import this on every page for consistent colors and typography.
 */

:root {
    /* Colors */
    --cosy-cream: #f8f6f3;
    --cosy-warm: #e8e2db;
    --cosy-brown: #6b5b4f;
    --cosy-brown-light: #8b7b6f;
    --cosy-accent: #0d305f;
    --cosy-accent-hover: #0a284d;
    --cosy-white: #fff;

    /* Spacing & layout */
    --touch-min: 44px;

    /* Radii */
    --cosy-radius: 1.25rem;
    --cosy-radius-sm: 0.75rem;

    /* Shadows */
    --cosy-shadow: 0 4px 24px rgba(107, 91, 79, 0.08);
    --cosy-shadow-focus: 0 0 0 3px rgba(13, 48, 95, 0.2);
}

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--cosy-brown);
    background: var(--cosy-cream);
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(13, 48, 95, 0.08), transparent),
        radial-gradient(ellipse 80% 50% at 100% 100%, rgba(232, 226, 219, 0.9), transparent);
}

/* Reusable focus style for form controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--cosy-accent);
    box-shadow: var(--cosy-shadow-focus);
}

/* Reusable primary button style */
.btn-cosy-primary {
    min-height: var(--touch-min);
    border-radius: var(--cosy-radius-sm);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    background: var(--cosy-accent);
    border: none;
    color: var(--cosy-white);
    transition: background 0.2s ease, transform 0.1s ease;
}
.btn-cosy-primary:hover,
.btn-cosy-primary:focus-visible {
    background: var(--cosy-accent-hover);
    color: var(--cosy-white);
}
.btn-cosy-primary:active {
    transform: scale(0.98);
}

/* Alert (flash) styling to match cosy theme — smaller, cosy colors */
.alert {
    border-radius: var(--cosy-radius-sm);
    border: none;
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.alert:last-child {
    margin-bottom: 0;
}
#flash-messages {
    margin-bottom: 1rem;
}
.alert-success {
    background-color: #e6eef5;
    color: var(--cosy-accent);
}
.alert-danger {
    background-color: #f0e8e6;
    color: #8b4a3d;
}
.alert-info {
    background-color: #e8eef2;
    color: var(--cosy-accent);
}
.alert-warning {
    background-color: #f5f0e6;
    color: var(--cosy-brown);
}
.alert-dismissible {
    padding-right: 0.85rem;
}
.alert-dismissible .btn-close {
    position: static;
}
.alert .btn-close {
    padding: 0.35rem;
    font-size: 0.65rem;
    flex-shrink: 0;
    align-self: center;
}

/* Links */
a {
    color: var(--cosy-accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}