@import "tailwindcss";

/* Self-hosted fonts (Neco for headings, Satoshi for body).
   Propshaft flattens all asset load paths to a single namespace, so reference
   fonts by their bare logical path (no ../fonts/ prefix) so the CSS asset URL
   compiler can resolve and digest them. */
/*@font-face {
    font-family: "Neco";
    src: url("/assets/Neco-Variable-64c171c0.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Neco";
    src: url("/assets/Neco-VariableItalic-3ee8a31f.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
    font-style: italic;
}*/
@font-face {
    font-family: "Satoshi";
    src: url("/assets/Satoshi-Variable-0513381f.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Satoshi";
    src: url("/assets/Satoshi-VariableItalic-7955f7fb.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
    font-style: italic;
}

/* MojaBooks Design Tokens */
@theme {
    /* Primary — deep indigo (#23207b) */
    --color-primary: #23207b;
    --color-primary-light: #3d3a9e;
    --color-primary-dark: #181561;
    --color-primary-50: #ecebfa;
    --color-primary-100: #d6d4f3;
    --color-primary-200: #ada9e8;
    --color-primary-500: #23207b;
    --color-primary-600: #181561;
    --color-primary-700: #110f4a;

    /* Secondary — deep maroon (#812046) */
    --color-secondary: #812046;
    --color-secondary-light: #a13a62;
    --color-secondary-dark: #5f1733;
    --color-secondary-50: #fbeaf0;
    --color-secondary-100: #f5d0dd;
    --color-secondary-500: #812046;
    --color-secondary-600: #5f1733;
    --color-secondary-700: #460f25;

    /* Accent — warm soft yellow (#faf0a1) */
    --color-accent: #faf0a1;
    --color-accent-dark: #f0e06a;
    --color-accent-light: #fdf8d0;

    /* Cream (kept as alias of accent for backwards compat) */
    --color-cream: #faf0a1;
    --color-cream-dark: #f0e06a;

    --color-surface: #f6f5fb;
    --color-surface-card: #ffffff;

    --color-success: #16a34a;
    --color-success-light: #dcfce7;
    --color-warning: #d97706;
    --color-warning-light: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-light: #fee2e2;

    --font-heading: "Satoshi", sans-serif;
    --font-body: "Satoshi", sans-serif;
}

/* Base typography */
body {
    font-family: var(--font-body);
    color: #1a1a2e;
    background-color: var(--color-surface);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
    font-family: var(--font-heading);
}

/* Sidebar nav item styles */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    transition: all 0.15s ease;
}

.nav-item:hover {
    background-color: var(--color-primary-50);
    color: var(--color-primary);
}

.nav-item.active {
    background-color: var(--color-primary-50);
    color: var(--color-primary);
    font-weight: 600;
}

/* Card component */
.card {
    background: var(--color-surface-card);
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

/* Button styles */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
}

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

.btn-secondary {
    background-color: white;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-primary);
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.btn-secondary:hover {
    background-color: var(--color-primary-50);
}

.btn-danger-outline {
    background-color: white;
    color: var(--color-danger);
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-danger);
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.btn-danger-outline:hover {
    background-color: var(--color-danger-light);
}