@import "tailwindcss";


/* -------------------------
   Typography
-------------------------- */

/* Font families */
.phue-font-body {
  font-family: var(--font-family, system-ui, sans-serif);
}

.phue-font-heading {
  font-family: var(--heading-font, var(--font-family, system-ui, sans-serif));
}

/* Text colors */

.phue-text-text       { color: var(--color-text); }
.phue-text-text-muted { color: var(--color-text-muted); }
.phue-text-primary    { color: var(--color-primary-text); }
.phue-text-accent     { color: var(--color-accent-text); }
.phue-text-danger     { color: var(--color-danger); }
.phue-text-success    { color: var(--color-success); }

/* Background colors */

.phue-bg-bg         { background-color: var(--color-background); }
.phue-bg-brand    { background-color: var(--color-brand); }
.phue-bg-surface  { background-color: var(--color-surface); }
.phue-bg-surface-muted { background-color: var(--color-surface-muted); }
.phue-bg-transparent { background-color: transparent; }

/* Border colors */

.phue-border-border { border-color: var(--color-border); }
.phue-border-transparent { border-color: transparent; }

/* Alpine */
[x-cloak] { display: none !important; }

/* Better one-page navigation */
html { scroll-behavior: smooth; }


/* Markdown Styles - Clean Slate/Indigo Theme */
.phue-markdown {
  color: #334155; /* slate-700 */
  font-size: 1rem;
  line-height: 1.75;
}

/* Dark mode support specifically for this block if parent has dark class, or system preference */
@media (prefers-color-scheme: dark) {
  .phue-markdown {
    color: #94a3b8; /* slate-400 */
  }
}
/* Manual dark mode override if you use a .dark class on body/html */
:is(.dark .phue-markdown) {
  color: #94a3b8; /* slate-400 */
}

.phue-markdown h1 {
  color: #0f172a; /* slate-900 */
  font-weight: 800;
  font-size: 2.25rem;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
  letter-spacing: -0.025em;
}

.phue-markdown h2 {
  color: #0f172a; /* slate-900 */
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
  letter-spacing: -0.025em;
}

.phue-markdown h3 {
  color: #0f172a; /* slate-900 */
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

/* Dark mode for headings */
@media (prefers-color-scheme: dark) {
  .phue-markdown h1, .phue-markdown h2, .phue-markdown h3, .phue-markdown h4 {
    color: #f1f5f9; /* slate-100 */
  }
}
:is(.dark .phue-markdown) h1,
:is(.dark .phue-markdown) h2,
:is(.dark .phue-markdown) h3 {
  color: #f1f5f9; /* slate-100 */
}

.phue-markdown p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.phue-markdown ul {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.phue-markdown ol {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.phue-markdown li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Marker colors */
.phue-markdown ul > li::marker,
.phue-markdown ol > li::marker {
  color: #94a3b8; /* slate-400 */
}

.phue-markdown blockquote {
  font-weight: 500;
  font-style: italic;
  color: #0f172a; /* slate-900 */
  border-left-width: 0.25rem;
  border-color: #e2e8f0; /* slate-200 */
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}

@media (prefers-color-scheme: dark) {
  .phue-markdown blockquote {
    color: #e2e8f0; /* slate-200 */
    border-color: #1e293b; /* slate-800 */
  }
}
:is(.dark .phue-markdown) blockquote {
  color: #e2e8f0; /* slate-200 */
  border-color: #1e293b; /* slate-800 */
}

.phue-markdown code {
  color: #0f172a; /* slate-900 */
  font-weight: 600;
  font-size: 0.875em;
  background-color: #f1f5f9; /* slate-100 */
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  .phue-markdown code {
    color: #e2e8f0; /* slate-200 */
    background-color: #1e293b; /* slate-800 */
  }
}
:is(.dark .phue-markdown) code {
  color: #e2e8f0; /* slate-200 */
  background-color: #1e293b; /* slate-800 */
}

.phue-markdown pre {
  color: #e2e8f0; /* slate-200 */
  background-color: #1e293b; /* slate-800 */
  overflow-x: auto;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding: 0.8571429em 1.1428571em;
}

.phue-markdown pre code {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.phue-markdown a {
  color: #4f46e5; /* indigo-600 */
  text-decoration: underline;
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  .phue-markdown a {
    color: #818cf8; /* indigo-400 */
  }
}
:is(.dark .phue-markdown) a {
  color: #818cf8; /* indigo-400 */
}