@import "tailwindcss";
/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');*/
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "../../node_modules/flowbite";


@theme {
    /* === Warna dari image (biru → hijau gradien) === */

    --color-background: #f0f9f4;          /* putih kehijauan lembut */
    --color-foreground: #0d2a1a;          /* teks gelap natural */

    --color-muted: #dff0e8;               /* muted hijau pudar */
    --color-muted-foreground: #4a7a60;    /* teks muted hijau-abu */

    --color-popover: #ffffff;
    --color-popover-foreground: #0d2a1a;

    --color-card: #ffffff;
    --color-card-foreground: #0d2a1a;

    --color-border: #b2d9c4;              /* border hijau pudar */
    --color-input: #b2d9c4;

    /* Primary → biru dari sisi kiri image */
    --color-primary: #2563eb;             /* biru #2563EB */
    --color-primary-foreground: #ffffff;

    /* Secondary → hijau dari sisi kanan image */
    --color-secondary: #22c55e;           /* hijau #22C55E */
    --color-secondary-foreground: #ffffff;

    /* Accent → oranye/kuning dari bintang di image */
    --color-accent: #f59e0b;              /* amber/oranye aksen */
    --color-accent-foreground: #ffffff;

    --color-destructive: #ef4444;
    --color-destructive-foreground: #fafafa;

    --color-ring: #2563eb;                /* ring ikut primary (biru) */

    --radius-xl: 1rem;
    --radius-lg: 0.5rem;
    --radius-md: calc(0.5rem - 2px);
    --radius-sm: calc(0.5rem - 4px);
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }
}

@layer components {

    .btn {
        @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2;
    }

    .btn-primary {
        /* Gradient biru → hijau seperti background image */
        @apply bg-[#2563eb] text-white shadow hover:opacity-90;
    }

    .btn-outline {
        @apply border border-input bg-background shadow-sm hover:bg-muted hover:text-foreground;
    }

    .btn-ghost {
        @apply hover:bg-muted hover:text-foreground;
    }

    .card {
        @apply rounded-xl border bg-card text-card-foreground;
    }

    .card-header {
        @apply flex flex-col space-y-1.5 p-6;
    }

    .card-title {
        @apply font-semibold leading-none tracking-tight text-2xl;
    }

    .card-description {
        @apply text-sm text-muted-foreground;
    }

    .card-content {
        @apply p-6 pt-0;
    }

    .card-footer {
        @apply flex items-center p-6 pt-0;
    }

    .input {
        @apply flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
    }
}