@import "tailwindcss";

/* Scan for Tailwind classes in views, layouts, and JavaScript */
@source "../../views/**/*.{html,erb}";
@source "../../javascript/**/*.js";

/* Preline UI — scan component classes + load interactive variants */
@source "../../../node_modules/preline/dist/*.js";
@import "../../../node_modules/preline/variants.css";

/* Brand tokens */
@theme {
  /* Colors */
  --color-green:         #2f6b3c;
  --color-green-hover:   #245530;
  --color-green-soft:    #e8f1e6;
  --color-orange:        #e0651c;
  --color-orange-hover:  #c95611;
  --color-orange-soft:   #fbeadb;
  --color-rose:          #ff385c;
  --color-ink:           #222222;
  --color-ink-2:         #3a3a3a;
  --color-muted:         #6a6a6a;
  --color-muted-2:       #9c9c9c;
  --color-line:          #ebebeb;
  --color-line-2:        #dddddd;
  --color-grey-active:   #ebebeb;

  /* Typography */
  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* CSS custom properties for use in component CSS */
:root {
  --green:        #2f6b3c;
  --green-2:      #245530;
  --green-soft:   #e8f1e6;
  --orange:       #e0651c;
  --orange-2:     #c95611;
  --orange-soft:  #fbeadb;
  --rose:         #ff385c;
  --ink:          #222222;
  --ink-2:        #3a3a3a;
  --muted:        #6a6a6a;
  --muted-2:      #9c9c9c;
  --line:         #ebebeb;
  --line-2:       #dddddd;
  --topbar-h:     88px;
  --catbar-h:     64px;
  --shell-h:      152px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background-color: #ffffff;
  line-height: 1.6;
}

/* Brand mark: "24chefs." */
.brand-num {
  font-weight: 800;
  font-size: 26px;
  color: var(--green);
  letter-spacing: -0.04em;
}

.brand-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
}

.brand-dot {
  color: var(--orange);
  font-weight: 700;
}

/* Button components */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  background-color: var(--green);
  color: #ffffff;
  font-weight: 500;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--green-2);
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  background-color: var(--orange);
  color: #ffffff;
  font-weight: 500;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-decoration: none;
}

.btn-accent:hover {
  background-color: var(--orange-2);
}