@import "tailwindcss";

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

/* Saudi Riyal Sign (U+20C1) — official glyph until OS fonts ship Unicode 17 support.
   unicode-range keeps this face off normal Latin/Arabic text.
   Vite bundles the relative font URL so production CSS always loads it.
   SaudiRiyal must lead every UI font stack (Tailwind, PrimeVue) or U+20C1 renders as .notdef tofu. */
@font-face {
    font-family: "SaudiRiyal";
    src: url("../fonts/saudi-riyal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+20C1;
}

/* Public path fallback for print/export windows and non-Vite consumers */
@font-face {
    font-family: "SaudiRiyal";
    src: url("/fonts/saudi-riyal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+20C1;
}

:root,
:host {
    --saudi-riyal-font: "SaudiRiyal";
    --p-font-family: ui-sans-serif, "SaudiRiyal", system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

html,
body,
#app {
    font-family: var(--p-font-family);
}

/* Keep tabular money rows and generic Prime components on the stack too */
.p-component,
.tabular-nums {
    font-family: var(--p-font-family);
}

/* ============================================
   CSS Variables - RGB Values (without function)
   Usage: bg-primary/50, text-accent/80, etc.
   ============================================ */

:root {
    /* Core Colors - RGB format for opacity modifier */
    --primary: 37, 179, 149;      /* #25b395 - Teal */
    --accent: 255, 114, 1;        /* #ff7201 - Orange */
    --neutral: 100, 116, 139;     /* Slate gray */
    --success: 34, 197, 94;       /* Green */
    --warning: 245, 158, 11;      /* Amber */
    --error: 239, 68, 68;         /* Red */
    --info: 59, 130, 246;         /* Blue */

    /* Surface Colors */
    --background: 255, 255, 255;
    --foreground: 15, 23, 42;
    --surface: 248, 250, 252;
    --border: 226, 232, 240;
    --muted: 148, 163, 184;
}

/* Dark mode */
.dark, [data-theme="dark"] {
    --background: 15, 23, 42;
    --foreground: 248, 250, 252;
    --surface: 30, 41, 59;
    --border: 71, 85, 105;
    --muted: 100, 116, 139;
}

@theme {
    /* Prepend SaudiRiyal so font-sans / preflight stacks can still draw U+20C1 */
    --font-sans: "SaudiRiyal", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";

    /* Core Colors - use with opacity: bg-primary/50, text-accent/80 */
    --color-primary: rgb(var(--primary));
    --color-accent: rgb(var(--accent));
    --color-neutral: rgb(var(--neutral));
    --color-success: rgb(var(--success));
    --color-warning: rgb(var(--warning));
    --color-error: rgb(var(--error));
    --color-info: rgb(var(--info));

    /* Surface Colors */
    --color-background: rgb(var(--background));
    --color-foreground: rgb(var(--foreground));
    --color-surface: rgb(var(--surface));
    --color-border: rgb(var(--border));
    --color-muted: rgb(var(--muted));
}