@import "tailwindcss";
@import "./remixicon.css";

/* 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: "remixicon";
    src: url("/assets/remixicon-93de9955.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@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;
}

/* Accutax Africa Accounting Design Tokens
   Brand palette: "Purple Raindrops" (coolors.co) */
@theme {
    /* Primary — brand blue-violet (#3A0CA3) */
    --color-primary: #3a0ca3;
    --color-primary-light: #4361ee;
    --color-primary-dark: #2a0778;
    --color-primary-50: #ece8fa;
    --color-primary-100: #d8d0f5;
    --color-primary-200: #b4a6eb;
    --color-primary-500: #3a0ca3;
    --color-primary-600: #2a0778;
    --color-primary-700: #1e0558;

    /* Secondary — brand violet (#7209B7) */
    --color-secondary: #7209b7;
    --color-secondary-light: #b5179e;
    --color-secondary-dark: #560bad;
    --color-secondary-50: #f2e8fb;
    --color-secondary-100: #e4d2f7;
    --color-secondary-500: #7209b7;
    --color-secondary-600: #560bad;
    --color-secondary-700: #480ca8;

    /* Accent — brand cyan (#4CC9F0) */
    --color-accent: #4cc9f0;
    --color-accent-dark: #4895ef;
    --color-accent-light: #e3f7fc;

    /* Cream (kept as alias of accent for backwards compat) */
    --color-cream: #4cc9f0;
    --color-cream-dark: #4895ef;

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

    /* Semantic feedback, drawn from the brand palette.
       Text values are darkened for WCAG AA on their -light backgrounds. */
    --color-success: #0a7488;
    --color-success-light: #e3f7fc;
    --color-warning: #b5179e;
    --color-warning-light: #fce4f6;
    --color-danger: #c81e63;
    --color-danger-light: #fde4ef;
    --color-info: #4361ee;
    --color-info-light: #e7ecfe;

    --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);
}