@import 'tailwindcss';

/* Qoodz brand fonts — self-hosted from qoodz.app (Inter for Latin, Almarai for Arabic) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/inter-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../fonts/inter-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/almarai-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/almarai-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../fonts/almarai-800.woff2') format('woff2');
}

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/*
 | Qoodz brand design tokens
 | Source: كودز بروفايل.pdf (brand profile) + qoodz.app
 | Use logical utilities (ms-*, me-*, ps-*, pe-*, start-*, end-*)
 | so layouts adapt automatically between RTL and LTR.
 */
@theme {
    --font-sans: 'Inter', 'Almarai', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    /* Brand colors */
    --color-brand: #7a11f4;
    --color-brand-deep: #14022c;
    --color-brand-light: #b087ff;
    --color-cream: #f1ede9;
    --color-mint: #17f1d1;
    --color-peach: #ffd074;
    --color-leaf: #61d28f;

    /* Neutrals */
    --color-ink: #141414;
    --color-ink-soft: #525252;
    --color-paper: #f7f7f7;
}

/*
 | Rendered Markdown content (blog posts, case studies)
 */
.markdown-content h1,
.markdown-content h2 {
    margin-block-start: 2rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-brand-deep);
}
.markdown-content h3,
.markdown-content h4 {
    margin-block-start: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-brand-deep);
}
.markdown-content p { margin-block-start: 1rem; }
.markdown-content > :first-child { margin-block-start: 0; }
.markdown-content ul,
.markdown-content ol {
    margin-block-start: 1rem;
    padding-inline-start: 1.5rem;
}
.markdown-content ul { list-style: disc; }
.markdown-content ol { list-style: decimal; }
.markdown-content li { margin-block-start: 0.375rem; }
.markdown-content a {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.markdown-content blockquote {
    margin-block-start: 1rem;
    border-inline-start: 3px solid var(--color-brand-light);
    padding-inline-start: 1rem;
    color: var(--color-ink-soft);
}
.markdown-content img {
    margin-block: 1.5rem;
    max-width: 100%;
    border-radius: 1rem;
}
.markdown-content hr { margin-block: 2rem; border-color: rgb(0 0 0 / 0.1); }
.markdown-content code {
    background: var(--color-paper);
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.875em;
}
.markdown-content pre {
    margin-block-start: 1rem;
    overflow-x: auto;
    border-radius: 0.75rem;
    background: var(--color-brand-deep);
    padding: 1rem;
    color: var(--color-paper);
}
.markdown-content pre code { background: transparent; padding: 0; }