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;

  --font-sans: sans-regular;
  --font-sans-light: sans-light;
  --font-sans-medium: sans-medium;
  --font-sans-semibold: sans-semibold;
  --font-sans-bold: sans-bold;
  --font-sans-extrabold: sans-extrabold;

  --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: sans-regular;
  --font-sans-light: sans-light;
  --font-sans-medium: sans-medium;
  --font-sans-semibold: sans-semibold;
  --font-sans-bold: sans-bold;
  --font-sans-extrabold: sans-extrabold;
}

@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;
  }
}