@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Lora:wght@500;600;700&display=swap');
@import 'tailwindcss';
@import 'tw-animate-css';
@plugin "@tailwindcss/typography";
@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-card-border: hsl(var(--card-border));
  --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));
  --font-sans: var(--app-font-sans);
  --font-serif: var(--app-font-serif);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --background: 42 33% 97%;
  --foreground: 224 59% 15%;
  --border: 38 24% 88%;
  --card: 0 0% 100%;
  --card-foreground: 224 59% 15%;
  --card-border: 38 24% 88%;
  --sidebar: 224 59% 15%;
  --sidebar-foreground: 41 37% 94%;
  --sidebar-border: 224 45% 24%;
  --sidebar-primary: 26 79% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 224 45% 22%;
  --sidebar-accent-foreground: 41 37% 94%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 59% 15%;
  --primary: 224 59% 15%;
  --primary-foreground: 0 0% 100%;
  --secondary: 35 45% 93%;
  --secondary-foreground: 224 59% 15%;
  --muted: 42 22% 93%;
  --muted-foreground: 221 20% 43%;
  --accent: 26 79% 55%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 64% 48%;
  --destructive-foreground: 0 0% 100%;
  --input: 39 22% 82%;
  --ring: 26 79% 55%;
  --app-font-sans: 'DM Sans', sans-serif;
  --app-font-serif: 'Lora', Georgia, serif;
  --radius: 1rem;
  --shadow-xs: 0 2px 6px hsl(224 59% 15% / .05);
  --shadow-sm: 0 5px 15px hsl(224 59% 15% / .06);
  --shadow: 0 10px 26px hsl(224 59% 15% / .08);
  --shadow-md: 0 16px 36px hsl(224 59% 15% / .1);
}
.dark {
  --background: 224 59% 9%;
  --foreground: 42 33% 97%;
  --border: 224 35% 23%;
  --card: 224 45% 14%;
  --card-foreground: 42 33% 97%;
  --card-border: 224 35% 23%;
  --sidebar: 224 59% 7%;
  --sidebar-foreground: 42 33% 97%;
  --sidebar-border: 224 35% 20%;
  --sidebar-primary: 26 79% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 224 35% 17%;
  --sidebar-accent-foreground: 42 33% 97%;
  --popover: 224 45% 14%;
  --popover-foreground: 42 33% 97%;
  --primary: 26 79% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 224 35% 20%;
  --secondary-foreground: 42 33% 97%;
  --muted: 224 35% 19%;
  --muted-foreground: 42 20% 72%;
  --accent: 26 79% 55%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 64% 56%;
  --destructive-foreground: 0 0% 100%;
  --input: 224 35% 28%;
  --ring: 26 79% 55%;
}

@layer base {
  * { @apply border-border; }
  body { @apply font-sans antialiased bg-background text-foreground; min-width: 320px; }
}
@layer components {
  .app-shell { min-height: 100dvh; background: hsl(var(--background)); }
  .serif { font-family: var(--app-font-serif); font-weight: 700; }
  .brand-mark { letter-spacing: -.045em; font-weight: 700; }
  .quiet-grid { background-image: linear-gradient(hsl(var(--primary) / .035) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--primary) / .035) 1px, transparent 1px); background-size: 28px 28px; }
  .soft-card { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: var(--shadow-xs); }
  .interactive { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
  .interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .interactive:active { transform: translateY(0); }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-soft { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.animate-rise { animation: rise-in .5s ease both; }
.animate-pulse-soft { animation: pulse-soft 1.7s ease-in-out infinite; }