@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Lora:wght@400;700&display=swap');

/* ==========================
   1. RESET
   ========================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================
   2. DESIGN TOKENS
   ========================== */
:root {
    /* Color */
    --color-accent: #4d1979;
    --color-accent-strong: #321052;
    --color-text: #172033;
    --color-muted: #657186;
    --color-border: #d9dfeb;
    --color-bg: #f7f8fb;
    --color-surface: #ffffff;
    --color-surface-alt: #f1f5f9;
    --color-danger: #b42318;
    

    /* Spacing — a modular scale */
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Typography */
    --font-stack: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Lora', Georgia, serif;
    --text-base: 1rem;
    --text-h3: 1.25rem;
    --text-h2: 1.5rem;
    --text-h1: 2.25rem;
    --leading-body: 1.6;
    --leading-heading: 1.2;

    /* Layout */
    --page-width: 64rem;
    --radius-md: 8px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);


}

/* ==========================
   3. BASE
   ========================== */
body {
    font-family: var(--font-stack);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-body);
}

h1 {
    font-size: var(--text-h1);
    line-height: var(--leading-heading);
}

h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-heading);
}

h3 {
    font-size: var(--text-h3);
    line-height: var(--leading-heading);
}

h1,
h2,
h3 {
    font-family: var(--font-serif);
    margin-bottom: var(--space-sm);
}

p {
    margin-bottom: var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-accent);
}

a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================
   4. LAYOUT
   ========================== */
body {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
}

/* ==========================
   5. HEADER
   ========================== */
header {
    padding: var(--space-lg);
    background-color: var(--color-surface-alt);
    margin-bottom: var(--space-lg);
}

/* ==========================
   6. SECTIONS
   ========================== */
section {
    margin-bottom: var(--space-xl);
}

/* ==========================
   7. FORMS
   ========================== */
label {
    display: block;
    margin-bottom: var(--space-sm);
}

input,
select,
textarea {
    width: 100%;
    font: inherit;
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* ==========================
   8. BUTTONS
   ========================== */

button {
    font: inherit;
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-surface);
}

.btn-primary:hover {
    background-color: var(--color-accent-strong);
}

.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-surface);
}




/* ==========================
   9. SEARCH
   ========================== */

/* ==========================
   10. CARDS
   ========================== */

.favorite-card {
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.favorites-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.empty-message {
    grid-column: 1 / -1;
}

/* ==========================
   11. FOOTER
   ========================== */

/* ==========================
   12. RESPONSIVE
   ========================== */
@media (min-width: 768px) {
    .favorites-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}
/* This is the end of my file */