/**
 * Design tokens — synced from noads-next/src/app/globals.css
 */

:root {
  --font-size: 16px;

  --background: #eee8de;
  --foreground: #1a1410;

  --card: #faf7f2;
  --card-foreground: #1a1410;

  --popover: #ffffff;
  --popover-foreground: #1a1410;

  --primary: #c8562f;
  --primary-foreground: #faf7f2;

  --secondary: #7a9e76;
  --secondary-foreground: #1a1410;

  --muted: #dfd8cc;
  --muted-foreground: #786055;

  --accent: #e8c050;
  --accent-foreground: #1a1410;

  --destructive: #c43d4f;
  --destructive-foreground: #faf7f2;

  --border: rgba(26, 20, 16, 0.12);
  --control-border: rgba(26, 20, 16, 0.24);
  --input: transparent;
  --input-background: #e8e3db;
  --switch-background: #c8c0b6;

  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #c8562f;

  --chart-1: #c8562f;
  --chart-2: #7a9e76;
  --chart-3: #e8c050;
  --chart-4: #6b8fa3;
  --chart-5: #c97a62;

  --radius: 0.25rem;
  --radius-sm: calc(var(--radius) - 0.25rem);
  --radius-md: calc(var(--radius) - 0.125rem);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 0.25rem);
  --radius-2xl: calc(var(--radius) + 0.5rem);
  --radius-3xl: calc(var(--radius) + 0.75rem);
  --radius-4xl: calc(var(--radius) + 1rem);

  --sidebar: #eee8de;
  --sidebar-foreground: #1a1410;
  --sidebar-primary: #c8562f;
  --sidebar-primary-foreground: #faf7f2;
  --sidebar-accent: #dfd8cc;
  --sidebar-accent-foreground: #1a1410;
  --sidebar-border: rgba(26, 20, 16, 0.12);
  --sidebar-ring: #c8562f;

  --font-display: "DM Serif Display", serif;
  --font-body: "DM Sans", sans-serif;

  --primary-10: rgba(200, 86, 47, 0.12);
  --primary-20: rgba(200, 86, 47, 0.22);
  --primary-30: rgba(200, 86, 47, 0.32);
  --primary-90: rgba(200, 86, 47, 0.92);

  --wash-peach: rgba(200, 86, 47, 0.12);
  --wash-sage: rgba(122, 158, 118, 0.14);
  --wash-butter: rgba(232, 192, 80, 0.14);

  --text-50: rgba(26, 20, 16, 0.5);

  --shadow-vintage-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
  --shadow-vintage: 0 2px 8px rgba(0, 0, 0, 0.09);
  --shadow-vintage-md: 0 3px 10px rgba(0, 0, 0, 0.09);
  --shadow-vintage-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-vintage-xl: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.dark {
  --background: #2d2520;
  --foreground: #faf8f3;
  --card: #3a3430;
  --card-foreground: #faf8f3;
  --popover: #3a3430;
  --popover-foreground: #faf8f3;
  --primary: #e87a65;
  --primary-foreground: #2d2520;
  --primary-90: rgba(232, 122, 101, 0.9);
  --secondary: #8fa97f;
  --secondary-foreground: #faf8f3;
  --muted: #4a4340;
  --muted-foreground: #c4bbb3;
  --accent: #f5d77e;
  --accent-foreground: #2d2520;
  --destructive: #c43d4f;
  --destructive-foreground: #faf8f3;
  --border: rgba(250, 248, 243, 0.12);
  --control-border: rgba(250, 248, 243, 0.2);
  --input: rgba(250, 248, 243, 0.12);
  --input-background: #4a4340;
  --ring: #e87a65;
  --font-weight-medium: 600;
  --sidebar: #3a3430;
  --sidebar-foreground: #faf8f3;
  --sidebar-primary: #e87a65;
  --sidebar-primary-foreground: #2d2520;
  --sidebar-accent: #4a4340;
  --sidebar-accent-foreground: #faf8f3;
  --sidebar-border: rgba(250, 248, 243, 0.12);
  --sidebar-ring: #e87a65;
}

html {
  font-size: var(--font-size);
}

.watercolor-peach {
  background: var(--wash-peach);
}

.watercolor-sage {
  background: var(--wash-sage);
}

.watercolor-butter {
  background: var(--wash-butter);
}