@import "tailwindcss";
@plugin "tailwindcss-animate";

@custom-variant data-open (&[data-state="open"], &[data-state="active"]);
@custom-variant data-closed (&[data-state="closed"], &[data-state="inactive"]);
@custom-variant data-active (&[data-state="active"], &[data-state="open"]);
@custom-variant data-checked (&[data-state="checked"], &[aria-checked="true"]);
@custom-variant data-horizontal (&[data-orientation="horizontal"]);
@custom-variant data-vertical (&[data-orientation="vertical"]);
@custom-variant data-popup-open (&[data-state="open"]);

@theme inline {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);

  --radius: 0px;
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 0px;

  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --color-surface: var(--surface);
  --color-surface-dim: var(--surface-dim);
  --color-surface-bright: var(--surface-bright);
  --color-surface-container-lowest: var(--surface-container-lowest);
  --color-surface-container-low: var(--surface-container-low);
  --color-surface-container: var(--surface-container);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-container-highest: var(--surface-container-highest);
}

:root {
  --radius: 0;
  --background: #f4e9dc;
  --foreground: #201a16;
  --card: #fcf3e8;
  --card-foreground: #201a16;
  --popover: #fff8f5;
  --popover-foreground: #201a16;
  --primary: #e58e58;
  --primary-hover: #d47e48;
  --primary-foreground: #201a16;
  --secondary: #f5e6d3;
  --secondary-foreground: #201a16;
  --muted: #efe0cd;
  --muted-foreground: #6d6354;
  --accent: #ffd966;
  --accent-foreground: #201a16;
  --destructive: #ba1a1a;
  --destructive-foreground: #ffffff;
  --border: #5c544e;
  --input: #fff8f5;
  --ring: #e58e58;

  --sidebar: #fcf3e8;
  --sidebar-foreground: #201a16;
  --sidebar-primary: #e58e58;
  --sidebar-primary-foreground: #201a16;
  --sidebar-accent: #ffd966;
  --sidebar-accent-foreground: #201a16;
  --sidebar-border: #5c544e;
  --sidebar-ring: #e58e58;

  --surface: #fff8f5;
  --surface-dim: #e4d8d0;
  --surface-bright: #fff8f5;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #fef1e9;
  --surface-container: #f8ece3;
  --surface-container-high: #f2e6de;
  --surface-container-highest: #ece0d8;
}

.dark {
  --background: #181310;
  --foreground: #fff8f5;
  --card: #362f2a;
  --card-foreground: #fff8f5;
  --popover: #201a16;
  --popover-foreground: #fff8f5;
  --primary: #e58e58;
  --primary-hover: #ffb68c;
  --primary-foreground: #201a16;
  --secondary: #54433a;
  --secondary-foreground: #fbeee6;
  --muted: #362f2a;
  --muted-foreground: #d9c2b6;
  --accent: #c1a032;
  --accent-foreground: #201a16;
  --destructive: #ffdad6;
  --destructive-foreground: #93000a;
  --border: #877369;
  --input: #362f2a;
  --ring: #e58e58;

  --sidebar: #201a16;
  --sidebar-foreground: #fff8f5;
  --sidebar-primary: #e58e58;
  --sidebar-primary-foreground: #201a16;
  --sidebar-accent: #c1a032;
  --sidebar-accent-foreground: #201a16;
  --sidebar-border: #877369;
  --sidebar-ring: #e58e58;

  --surface: #201a16;
  --surface-dim: #362f2a;
  --surface-bright: #201a16;
  --surface-container-lowest: #201a16;
  --surface-container-low: #362f2a;
  --surface-container: #362f2a;
  --surface-container-high: #54433a;
  --surface-container-highest: #54433a;
}

@utility text-headline-lg {
  font-family: var(--font-head);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@utility text-headline-md {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

@utility text-headline-sm {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}

@utility text-body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

@utility text-body-md {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

@utility text-label-sm {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}
