/* =========================================================
   PHUE BASE / UTILITIES
   ---------------------------------------------------------
   RULES FOR EXPANSION:
   1. Purpose: Atomic, immutable utility classes.
   2. Scope: One class should handle exactly one styling job.
   3. Naming: .phue-[property]-[value].
   4. Variables: ALWAYS use var(--...) for values.
   ========================================================= */

/* =========================
   Resets & Normalization
========================= */

/* PROPER BOX-SIZING RESET */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* Force full height for sticky footer propagation */
  height: 100%; 
}

/* =========================================================
   Phue Utilities (namespaced)
   Tailwind-compatible utility layer
   Uses ONLY exposed Phue variables
   ========================================================= */


/* -------------------------
   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));
}

/* Font weights */
.phue-font-normal { font-weight: 400; }
.phue-font-medium { font-weight: 500; }
.phue-font-bold   { font-weight: 700; }

/* Text colors */
.phue-text-brand     { color: var(--color-brand); }
.phue-text-primary   { color: var(--color-primary); }
.phue-text-secondary { color: var(--color-secondary); }
.phue-text-accent    { color: var(--color-accent); }
.phue-text-muted     { color: var(--color-muted); }
.phue-text           { color: var(--color-text); }

/* Text alignment */
.phue-text-left   { text-align: left; }
.phue-text-center { text-align: center; }
.phue-text-right  { text-align: right; }


/* -------------------------
   Headings (explicit levels)
-------------------------- */

.phue-heading {
  font-family: var(--heading-font, var(--font-family, system-ui, sans-serif));
  color: var(--color-text);
  line-height: 1.25;
  margin: 0;
}

.phue-heading-1 { font-size: 3rem; }
.phue-heading-2 { font-size: 2.25rem; }
.phue-heading-3 { font-size: 1.875rem; }
.phue-heading-4 { font-size: 1.5rem; }
.phue-heading-5 { font-size: 1.25rem; }
.phue-heading-6 { font-size: 1rem; }


/* -------------------------
   Paragraph
-------------------------- */

.phue-paragraph {
  font-family: var(--font-family, system-ui, sans-serif);
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}


/* -------------------------
   Backgrounds
-------------------------- */

.phue-bg-brand    { background-color: var(--color-brand); }
.phue-bg-primary  { background-color: var(--color-primary); }
.phue-bg-secondary{ background-color: var(--color-secondary); }
.phue-bg-accent   { background-color: var(--color-accent); }

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


/* -------------------------
   Layout
-------------------------- */

.phue-block  { display: block; }
.phue-inline { display: inline; }
.phue-flex   { display: flex; }
.phue-grid   { display: grid; }

.phue-flex-row { flex-direction: row; }
.phue-flex-col { flex-direction: column; }

.phue-items-start  { align-items: flex-start; }
.phue-items-center { align-items: center; }
.phue-items-end    { align-items: flex-end; }

.phue-justify-start   { justify-content: flex-start; }
.phue-justify-center  { justify-content: center; }
.phue-justify-between { justify-content: space-between; }

.phue-w-full { width: 100%; }
.phue-h-full { height: 100%; }

/* Flexbox Growth */
.phue-grow { flex-grow: 1; }


/* -------------------------
   Spacing (hard primitives)
-------------------------- */

/* Margin */
.phue-m-0  { margin: 0; }
.phue-mt-2 { margin-top: 0.5rem; }
.phue-mt-4 { margin-top: 1rem; }
.phue-mt-auto { margin-top: auto; }
.phue-mb-2 { margin-bottom: 0.5rem; }
.phue-mb-4 { margin-bottom: 1rem; }

/* Padding */
.phue-p-2  { padding: 0.5rem; }
.phue-p-4  { padding: 1rem; }

.phue-px-2 { padding-inline: 0.5rem; }
.phue-px-4 { padding-inline: 1rem; }

.phue-py-2 { padding-block: 0.5rem; }
.phue-py-4 { padding-block: 1rem; }


/* -------------------------
   Borders & Radius
-------------------------- */

.phue-border {
  border: 1px solid var(--color-muted);
}

.phue-rounded {
  border-radius: var(--border-radius, 0.5rem);
}


/* -------------------------
   Shadows
-------------------------- */

/* Provide a valid default shadow token (can be overridden by --shadow-style) */
:root {
  --phue-shadow-soft: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.phue-shadow {
  box-shadow: var(--shadow-style, var(--phue-shadow-soft));
}


/* -------------------------
   Interaction helpers
-------------------------- */

.phue-cursor-pointer { cursor: pointer; }

.phue-hover-accent:hover {
  color: var(--color-accent);
}

.phue-hover-bg-accent:hover {
  background-color: var(--color-accent);
}


/* -------------------------
   Safety resets
-------------------------- */

button,
input,
textarea,
select {
  font-family: inherit;
  color: inherit;
}

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

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