@import 'tailwindcss';

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

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

/* === AMIR Design Tokens (locked F1 — do not hardcode values inline) === */
:root {
    /* Colour — brand */
    --color-primary:        #1B5E3F;
    --color-primary-hover:  #16523A;
    --color-primary-light:  #D8F0E2;
    --color-secondary:      #475569;

    /* Colour — semantic */
    --color-success:        #15803D;
    --color-success-light:  #D1FAE5;
    --color-warning:        #B45309;
    --color-warning-light:  #FEF3C7;
    --color-error:          #B91C1C;
    --color-error-light:    #FEE2E2;
    --color-info:           #1D4ED8;
    --color-info-light:     #DBEAFE;
    --color-neutral:        #475569;
    --color-neutral-light:  #F1F5F9;

    /* Colour — background */
    --color-bg-primary:     #F8FAFC;
    --color-bg-secondary:   #FFFFFF;
    --color-bg-tertiary:    #F1F5F9;
    --color-bg-hover:       #F8FAFC;
    --color-bg-selected:    #ECF7EF;

    /* Colour — border */
    --color-border:         #CBD5E1;
    --color-border-light:   #E2E8F0;
    --color-border-focus:   #1B5E3F;

    /* Colour — text */
    --color-text-primary:   #0F172A;
    --color-text-secondary: #334155;
    --color-text-muted:     #64748B;
    --color-text-inverse:   #FFFFFF;

    /* Colour — special */
    --color-ai:             #7C3AED;
    --color-debit:          #0F172A;
    --color-credit:         #1B5E3F;
    --color-logo-accent:    #A7E1C4;

    /* Colour — Platform Operator accent (purple) */
    --color-po-primary:       #6D28D9;
    --color-po-primary-hover: #5B21B6;
    --color-po-logo-accent:   #C4B5FD;

    /* Layout */
    --sidebar-width:        240px;
    --topbar-height:        56px;

    /* Typography */
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-lg:   16px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  32px;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Radius */
    --radius-sm:   3px;
    --radius-md:   4px;
    --radius-lg:   6px;
    --radius-xl:   8px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
    --shadow-md:    0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
    --shadow-lg:    0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);
    --shadow-focus: 0 0 0 3px rgba(27,94,63,.20);
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
}

/* === Button system === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    height: 36px;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-sm {
    height: 30px;
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--color-bg-tertiary);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
    background: var(--color-bg-hover);
}

.btn-danger,
.btn-error {
    background: var(--color-error-light);
    color: var(--color-error);
    border-color: var(--color-error-light);
}

.btn-danger:hover:not(:disabled),
.btn-error:hover:not(:disabled) {
    background: #FECACA;
    border-color: #FECACA;
}

/* === Page layout utilities === */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
}

.page-header > div:first-child {
    min-width: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* === Card system === */
.card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.card-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.card-body {
    padding: var(--space-5);
}

.card-body.no-pad {
    padding: 0;
}