accounted/app/globals.css

@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Force light mode */
html, :root {
  color-scheme: light only !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 40 30% 97% !important;
    --foreground: 30 10% 15% !important;
    --card: 40 40% 99% !important;
    --card-foreground: 30 10% 15% !important;
    --popover: 40 40% 99% !important;
    --popover-foreground: 30 10% 15% !important;
    --primary: 28 40% 35% !important;
    --primary-foreground: 40 40% 99% !important;
    --secondary: 35 25% 93% !important;
    --secondary-foreground: 30 10% 15% !important;
    --muted: 35 15% 91% !important;
    --muted-foreground: 30 8% 45% !important;
    --accent: 18 45% 55% !important;
    --accent-foreground: 40 40% 99% !important;
    --destructive: 0 45% 55% !important;
    --destructive-foreground: 40 40% 99% !important;
    --border: 35 20% 88% !important;
    --input: 35 20% 88% !important;
    --ring: 28 40% 35% !important;
  }
}

:root {
  /* Nordic Warmth Color Palette */
  /* Inspired by Swedish nature: forest, stone, linen, birch */

  --background: 40 30% 97%;              /* Warm paper white */
  --foreground: 30 10% 15%;              /* Soft charcoal, not harsh black */

  --card: 40 40% 99%;                    /* Natural white with warmth */
  --card-foreground: 30 10% 15%;

  --popover: 40 40% 99%;
  --popover-foreground: 30 10% 15%;

  /* Primary - Leather Brown (warm, dark) */
  --primary: 28 40% 35%;                 /* Dark leather brown */
  --primary-foreground: 40 40% 99%;

  /* Secondary - Warm Linen */
  --secondary: 35 25% 93%;               /* Soft linen/oat */
  --secondary-foreground: 30 10% 15%;

  /* Muted - Stone */
  --muted: 35 15% 91%;                   /* Warm stone gray */
  --muted-foreground: 30 8% 45%;         /* Soft warm gray */

  /* Accent - Terracotta */
  --accent: 18 45% 55%;                  /* Muted terracotta/clay */
  --accent-foreground: 40 40% 99%;

  /* Destructive - Muted Rose */
  --destructive: 0 45% 55%;              /* Soft dusty rose */
  --destructive-foreground: 40 40% 99%;

  /* Borders & Input - Soft warm line */
  --border: 35 20% 88%;
  --input: 35 20% 88%;
  --ring: 28 40% 35%;

  /* Radius - Subtle, refined */
  --radius: 0.5rem;

  /* Success - Forest green */
  --success: 150 30% 40%;
  --success-foreground: 40 40% 99%;

  /* Warning - Warm honey */
  --warning: 38 70% 55%;
  --warning-foreground: 30 10% 15%;

  /* Custom tokens */
  --font-display: var(--font-fraunces), Georgia, serif;
  --font-body: var(--font-geist-sans), system-ui, sans-serif;

  /* Refined shadows */
  --shadow-sm: 0 1px 2px rgba(30, 25, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(30, 25, 20, 0.06);
  --shadow-lg: 0 12px 40px rgba(30, 25, 20, 0.08);

  /* Animation */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));
  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --font-sans: var(--font-body);
  --font-mono: var(--font-geist-mono), monospace;
  --font-serif: var(--font-display);
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Display typography - Fraunces */
.font-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}

/* Number styling - tabular for alignment */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Text balance for better line wrapping on descriptions */
.text-balance {
  text-wrap: balance;
}

/* Safe area padding for mobile devices with notch/home indicator */
.safe-area-bottom {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Animation Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gentlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Staggered entrance animation */
.stagger-enter > * {
  animation: slideUp var(--duration-slow) var(--ease-out) both;
}
.stagger-enter > *:nth-child(1) { animation-delay: 0ms; }
.stagger-enter > *:nth-child(2) { animation-delay: 80ms; }
.stagger-enter > *:nth-child(3) { animation-delay: 160ms; }
.stagger-enter > *:nth-child(4) { animation-delay: 240ms; }
.stagger-enter > *:nth-child(5) { animation-delay: 320ms; }
.stagger-enter > *:nth-child(6) { animation-delay: 400ms; }
.stagger-enter > *:nth-child(7) { animation-delay: 480ms; }
.stagger-enter > *:nth-child(8) { animation-delay: 560ms; }
.stagger-enter > *:nth-child(9) { animation-delay: 640ms; }
.stagger-enter > *:nth-child(10) { animation-delay: 720ms; }

/* Utility animations */
.animate-fade-in {
  animation: fadeIn var(--duration-base) var(--ease-out);
}

.animate-slide-up {
  animation: slideUp var(--duration-slow) var(--ease-out);
}

.animate-scale-in {
  animation: scaleIn var(--duration-base) var(--ease-out);
}

/* Refined hover effects */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Soft focus states */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--primary) / 0.3);
}

/* Custom scrollbar - minimal */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.3);
}

/* Selection color */
::selection {
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--foreground));
}