global.css

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@import "nativewind/theme";

@theme {
    --color-background: #fff9e3;
    --color-foreground: #081126;
    --color-card: #fff8e7;
    --color-muted: #f6eecf;
    --color-muted-foreground: rgba(0, 0, 0, 0.6);
    --color-primary: #081126;
    --color-accent: #ea7a53;
    --color-border: rgba(0, 0, 0, 0.1);
    --color-success: #16a34a;
    --color-destructive: #dc2626;
    --color-subscription: #8fd1bd;

    --spacing-0: 0px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-11: 44px;
    --spacing-12: 48px;
    --spacing-14: 56px;
    --spacing-16: 64px;
    --spacing-18: 72px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --spacing-30: 120px;

    --font-sans: PixelifySans_400Regular;
    --font-sans-light: PixelifySans_400Regular;
    --font-sans-medium: PixelifySans_500Medium;
    --font-sans-semibold: PixelifySans_600SemiBold;
    --font-sans-bold: PixelifySans_700Bold;
    --font-sans-extrabold: PixelifySans_700Bold;
}

/* React Native: map font-weight utilities to Pixelify Sans face names */
@layer utilities {
    .font-sans {
        font-family: PixelifySans_400Regular;
    }

    .font-normal {
        font-family: PixelifySans_400Regular;
    }

    .font-medium {
        font-family: PixelifySans_500Medium;
    }

    .font-semibold {
        font-family: PixelifySans_600SemiBold;
    }

    .font-bold {
        font-family: PixelifySans_700Bold;
    }

    .font-extrabold {
        font-family: PixelifySans_700Bold;
    }
}

@layer components {
    .tabs-icon {
        @apply size-12 items-center justify-center;
    }

    .tabs-pill {
        @apply size-12 items-center justify-center rounded-full bg-transparent;
    }

    .tabs-active {
        @apply bg-accent;
    }

    .tabs-glyph {
        @apply size-6;
    }

    .home-header {
        @apply mb-2.5 flex-row items-center justify-between;
    }

    .home-user {
        @apply flex-row items-center;
    }

    .home-avatar {
        @apply size-16 rounded-full;
    }

    .home-user-name {
        @apply ml-4 text-2xl font-sans-bold text-primary;
    }

    .home-add-icon {
        @apply size-12;
    }

    .home-balance-card {
        @apply my-2.5 min-h-50 justify-between gap-5 rounded-bl-4xl rounded-tr-4xl bg-accent p-6;
    }

    .home-balance-label {
        @apply text-xl font-sans-semibold text-white/80;
    }

    .home-balance-row {
        @apply flex-row items-center justify-between;
    }

    .home-balance-amount {
        @apply text-4xl font-sans-extrabold text-white;
    }

    .home-balance-date {
        @apply text-xl font-sans-medium text-white;
    }

    .list-head {
        @apply my-5 flex-row items-center justify-between;
    }

    .list-title {
        @apply text-2xl font-sans-bold text-primary;
    }

    .list-action {
        @apply rounded-full border border-black/20 px-4 py-1;
    }

    .list-action-text {
        @apply text-lg font-sans-semibold text-primary;
    }

    .upcoming-card {
        @apply mr-4 w-44 rounded-2xl border border-black/10 bg-background p-4;
    }

    .upcoming-row {
        @apply flex-row items-center gap-3;
    }

    .upcoming-icon {
        @apply size-14;
    }

    .upcoming-price {
        @apply text-lg font-sans-bold text-primary;
    }

    .upcoming-meta {
        @apply text-sm font-sans-semibold text-muted-foreground;
    }

    .upcoming-name {
        @apply mt-2 text-lg font-sans-bold text-primary;
    }

    .sub-card {
        @apply rounded-2xl border border-border p-4;
    }

    .sub-card-expanded {
        @apply bg-subscription;
    }

    .sub-head {
        @apply flex-row items-center py-2;
    }

    .sub-main {
        @apply min-w-0 flex-1 flex-row items-center gap-3;
    }

    .sub-icon {
        @apply size-16 rounded-lg;
    }

    .sub-copy {
        @apply min-w-0 flex-1;
    }

    .sub-title {
        @apply mb-1 text-lg font-sans-bold text-primary;
    }

    .sub-meta {
        @apply text-sm font-sans-semibold text-muted-foreground;
    }

    .sub-price-box {
        @apply ml-3 shrink-0 items-end;
    }

    .sub-price {
        @apply mb-1 text-lg font-sans-bold text-primary;
    }

    .sub-billing {
        @apply text-sm font-sans-medium text-muted-foreground;
    }

    .sub-body {
        @apply mt-6 gap-4;
    }

    .sub-details {
        @apply gap-6;
    }

    .sub-row {
        @apply flex-row items-center justify-between gap-3;
    }

    .sub-row-copy {
        @apply min-w-0 flex-1 flex-row items-center gap-2;
    }

    .sub-label {
        @apply shrink-0 text-base font-sans-medium text-muted-foreground;
    }

    .sub-value {
        @apply flex-1 font-sans-bold text-primary;
    }

    .sub-cancel {
        @apply mt-2 items-center rounded-full bg-primary py-4;
    }

    .sub-cancel-disabled {
        @apply bg-primary/35;
    }

    .sub-cancel-text {
        @apply font-sans-bold text-background;
    }

    .home-empty-state {
        @apply py-4 text-sm font-sans-medium text-black/60;
    }

    .auth-safe-area {
        @apply flex-1 bg-background;
    }

    .auth-screen {
        @apply flex-1 bg-background;
    }

    .auth-scroll {
        @apply flex-1;
    }

    .auth-content {
        @apply grow px-5 pb-10 pt-8;
    }

    .auth-brand-block {
        @apply mt-2 items-center;
    }

    .auth-logo-wrap {
        @apply mb-7 flex-row items-center gap-3;
    }

    .auth-logo-mark {
        @apply relative size-14 items-center justify-center rounded-2xl bg-accent;
    }

    .auth-logo-mark-text {
        @apply text-2xl font-sans-extrabold text-background;
    }

    .auth-wordmark {
        @apply text-3xl font-sans-extrabold text-primary;
    }

    .auth-wordmark-sub {
        @apply -mt-1 text-xs font-sans-semibold uppercase tracking-[1px] text-muted-foreground;
    }

    .auth-title {
        @apply text-3xl font-sans-bold text-primary;
    }

    .auth-subtitle {
        @apply mt-2 max-w-[320px] text-center text-base font-sans-medium text-muted-foreground;
    }

    .auth-card {
        @apply mt-8 rounded-3xl border border-border bg-card p-5;
    }

    .auth-form {
        @apply gap-4;
    }

    .auth-field {
        @apply gap-2;
    }

    .auth-label {
        @apply text-sm font-sans-semibold text-primary;
    }

    .auth-input {
        @apply rounded-2xl border border-border bg-background px-4 py-4 text-base font-sans-medium text-primary;
    }

    .auth-input-error {
        @apply border-destructive;
    }

    .auth-error {
        @apply text-xs font-sans-medium text-destructive;
    }

    .auth-helper {
        @apply text-sm font-sans-medium text-muted-foreground;
    }

    .auth-button {
        @apply mt-1 items-center rounded-2xl bg-accent py-4;
    }

    .auth-button-disabled {
        @apply bg-accent/45;
    }

    .auth-button-text {
        @apply text-base font-sans-bold text-primary;
    }

    .auth-secondary-button {
        @apply items-center rounded-2xl border border-accent/30 bg-accent/10 py-3;
    }

    .auth-secondary-button-text {
        @apply text-sm font-sans-semibold text-accent;
    }

    .auth-divider-row {
        @apply my-4 flex-row items-center gap-3;
    }

    .auth-divider-line {
        @apply h-px flex-1 bg-border;
    }

    .auth-divider-text {
        @apply text-[11px] font-sans-semibold uppercase tracking-[1px] text-muted-foreground;
    }

    .auth-link-row {
        @apply mt-5 flex-row items-center justify-center gap-1;
    }

    .auth-link-copy {
        @apply text-sm font-sans-medium text-muted-foreground;
    }

    .auth-link {
        @apply text-sm font-sans-bold text-accent;
    }

    .modal-overlay {
        @apply flex-1 bg-black/50;
    }

    .modal-container {
        @apply mt-auto max-h-[85%] rounded-t-3xl bg-background;
    }

    .modal-header {
        @apply flex-row items-center justify-between border-b border-border px-5 py-4;
    }

    .modal-title {
        @apply text-xl font-sans-bold text-primary;
    }

    .modal-close {
        @apply size-8 items-center justify-center rounded-full bg-muted;
    }

    .modal-close-text {
        @apply text-lg font-sans-bold text-primary;
    }

    .modal-body {
        @apply gap-5 p-5;
    }

    .picker-row {
        @apply flex-row gap-3;
    }

    .picker-option {
        @apply flex-1 items-center rounded-2xl border border-border bg-background py-3;
    }

    .picker-option-active {
        @apply border-accent bg-accent/10;
    }

    .picker-option-text {
        @apply text-sm font-sans-semibold text-muted-foreground;
    }

    .picker-option-text-active {
        @apply text-accent;
    }

    .category-scroll {
        @apply flex-row flex-wrap gap-2;
    }

    .category-chip {
        @apply rounded-full border border-border bg-background px-4 py-2;
    }

    .category-chip-active {
        @apply border-accent bg-accent/10;
    }

    .category-chip-text {
        @apply text-sm font-sans-semibold text-muted-foreground;
    }

    .category-chip-text-active {
        @apply text-accent;
    }
}