@import 'tailwindcss';

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

@theme {
    /* Fonts */
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-headline: 'Newsreader', serif;
    --font-body: 'Inter', sans-serif;
    --font-label: 'Inter', sans-serif;
    --font-serif: 'Newsreader', serif;

    /* Material Design 3 Color Tokens */
    --color-primary: #af0017;
    --color-primary-container: #d71e28;
    --color-primary-fixed: #ffdad6;
    --color-primary-fixed-dim: #ffb3ad;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #ffeeec;
    --color-on-primary-fixed: #410003;
    --color-on-primary-fixed-variant: #930011;

    --color-secondary: #765a25;
    --color-secondary-container: #fed797;
    --color-secondary-fixed: #ffdea9;
    --color-secondary-fixed-dim: #e6c183;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #785c28;
    --color-on-secondary-fixed: #271900;
    --color-on-secondary-fixed-variant: #5c4210;

    --color-tertiary: #565656;
    --color-tertiary-container: #6e6e6e;
    --color-tertiary-fixed: #e4e2e2;
    --color-tertiary-fixed-dim: #c7c6c6;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #f3f1f1;
    --color-on-tertiary-fixed: #1b1c1c;
    --color-on-tertiary-fixed-variant: #464747;

    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;
    --color-on-error: #ffffff;
    --color-on-error-container: #93000a;

    --color-surface: #f9f9f9;
    --color-surface-dim: #dadada;
    --color-surface-bright: #f9f9f9;
    --color-surface-variant: #e2e2e2;
    --color-surface-tint: #c0011b;
    --color-surface-container: #eeeeee;
    --color-surface-container-low: #f3f3f3;
    --color-surface-container-high: #e8e8e8;
    --color-surface-container-highest: #e2e2e2;
    --color-surface-container-lowest: #ffffff;
    --color-on-surface: #1a1c1c;
    --color-on-surface-variant: #5c3f3d;

    --color-background: #f9f9f9;
    --color-on-background: #1a1c1c;

    --color-outline: #916f6c;
    --color-outline-variant: #e6bdb9;

    --color-inverse-surface: #2f3131;
    --color-inverse-on-surface: #f1f1f1;
    --color-inverse-primary: #ffb3ad;

    /* Dashboard Tokens */
    --color-wf-red: #D71E28;
    --color-wf-gold: #FFFF00;
    --color-wf-dark-grey: #333333;
    --color-wf-light-grey: #F4F4F4;
    --color-wf-border-grey: #D8D8D8;
    --color-wf-bg: #F0F0F0;

    /* Border Radius */
    --radius: 0.125rem;
    --radius-lg: 0.25rem;
    --radius-xl: 0.5rem;
    --radius-full: 0.75rem;
}

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Typography Utilities */
h1, h2, h3, .font-serif {
    font-family: 'Newsreader', serif;
}

.serif-italic {
    font-family: 'Newsreader', serif;
    font-style: italic;
}

.serif-bold {
    font-family: 'Newsreader', serif;
    font-weight: 700;
}

.newsreader {
    font-family: 'Newsreader', serif;
}

.wf-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.input-focus-gold:focus {
    outline: none;
    border-bottom: 2px solid #765a25 !important;
}
