/* =========================================================
   ALPEKIN COMPONENTS LAYER
   ---------------------------------------------------------
   Purpose:
   Reusable UI primitives shared across Pages, Users,
   Journal, Core, and future Collections.

   Rules:
   - Keep these components generic.
   - Page-specific styling belongs in page/app CSS.
   - Components should use tokens, not hardcoded values.
   ========================================================= */


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--touch-min);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: var(--border-width) solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration-standard) ease,
    border-color var(--duration-standard) ease,
    color var(--duration-standard) ease,
    box-shadow var(--duration-standard) ease,
    transform var(--duration-standard) ease;
}

.button:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}


/* Primary button: strongest CTA. */
.button--primary {
  background: var(--tree-gold);
  color: var(--dark-soil);
  box-shadow: var(--elevation-sm);
}

.button--primary:hover {
  background: color-mix(in srgb, var(--tree-gold) 88%, var(--ivory-bone));
  color: var(--dark-soil);
  box-shadow: var(--elevation-md);
}


/* Secondary button: darker, grounded, brand-forward. */
.button--secondary {
  background: var(--deep-moss);
  color: var(--ivory-bone);
  border-color: color-mix(in srgb, var(--tree-gold) 28%, transparent);
}

.button--secondary:hover {
  background: color-mix(in srgb, var(--deep-moss) 88%, var(--bone-black));
  color: var(--ivory-bone);
}


/* Outline button: quiet action. */
.button--outline {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--control-border);
}

.button--outline:hover {
  background: color-mix(in srgb, var(--tree-gold) 14%, transparent);
  color: var(--text-strong);
  border-color: var(--control-border-hover);
}


/* Ghost button: used inside dense UI, dashboards, dropdowns. */
.button--ghost {
  background: transparent;
  color: inherit;
}

.button--ghost:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}


/* Size variants. */
.button--sm {
  min-height: var(--touch-min);
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--fs-small);
}

.button--lg {
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
}


/* Compact, reusable page sharing actions. */
.share-actions {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  border: var(--border-width) solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--surface-clean);
  box-shadow: var(--elevation-sm);
}

.share-actions .button[hidden] {
  display: none;
}

.share-actions__button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-strong);
  box-shadow: none;
  white-space: nowrap;
}

.share-actions__button:first-of-type {
  border-start-start-radius: calc(var(--radius-md) - var(--border-width));
  border-end-start-radius: calc(var(--radius-md) - var(--border-width));
}

.share-actions__button:last-of-type {
  border-start-end-radius: calc(var(--radius-md) - var(--border-width));
  border-end-end-radius: calc(var(--radius-md) - var(--border-width));
}

.share-actions__button + .share-actions__button {
  border-inline-start: var(--border-width) solid var(--border-gold-soft);
}

.share-actions__button[hidden] + .share-actions__button {
  border-inline-start: 0;
  border-start-start-radius: calc(var(--radius-md) - var(--border-width));
  border-end-start-radius: calc(var(--radius-md) - var(--border-width));
}

.share-actions__button:hover,
.share-actions__button:active,
.share-actions__button[data-copied] {
  background: color-mix(in srgb, var(--tree-gold) 14%, transparent);
  color: var(--text-strong);
  box-shadow: none;
  transform: none;
}

.share-actions__icon {
  width: 1.125em;
  height: 1.125em;
  fill: none;
  color: var(--link);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.share-actions__icon[hidden] {
  display: none;
}

@media (max-width: 40rem) {
  .share-actions {
    width: 100%;
  }

  .share-actions__button {
    flex: 1 1 0;
  }
}


/* =========================================================
   CARDS
   ========================================================= */

.card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-clean);
  box-shadow: var(--elevation-md);
  transition:
    border-color var(--duration-standard) ease,
    box-shadow var(--duration-standard) ease,
    transform var(--duration-standard) ease;
}

:is(a.card, button.card, .card--interactive):hover {
  border-color: color-mix(in srgb, var(--tree-gold) 38%, var(--moon-ash));
  box-shadow: var(--elevation-lg);
  transform: translateY(-2px);
}

.card--quiet {
  box-shadow: none;
}

.card--dark {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--border);
}

.card__title {
  margin: 0 0 var(--space-2);
  color: inherit;
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-card-title-min), 0.7vw + 0.95rem, var(--fs-card-title-max));
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
}

.card__body {
  margin: 0;
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-size: clamp(var(--fs-card-body-min), 0.4vw + 0.9rem, var(--fs-card-body-max));
  line-height: 1.65;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 0.28rem 0.6rem;
  border: var(--border-width) solid var(--border-gold-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tree-gold) 12%, transparent);
  color: var(--text-strong);
  font-size: var(--fs-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-wide);
  line-height: 1;
  text-transform: var(--text-case-label);
}

.badge--dark {
  background: color-mix(in srgb, var(--ivory-bone) 10%, transparent);
  color: var(--ivory-bone);
}


/* =========================================================
   ALERTS
   ========================================================= */

.alert {
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--border-dark);
  border-radius: var(--radius-md);
  background: var(--surface-clean);
}

.alert--success {
  border-color: color-mix(in srgb, var(--status-success) 50%, transparent);
}

.alert--warning {
  border-color: color-mix(in srgb, var(--status-warning) 55%, transparent);
}

.alert--danger {
  border-color: color-mix(in srgb, var(--status-danger) 55%, transparent);
}

.alert--info {
  border-color: color-mix(in srgb, var(--status-info) 55%, transparent);
}


/* =========================================================
   FORMS
   ---------------------------------------------------------
   Used by contact, login, signup, dashboard tools, future shop.
   ========================================================= */

.form {
  display: grid;
  gap: var(--space-5);
}

.form-field {
  display: grid;
  gap: var(--space-2);
}

.label {
  color: var(--text-strong);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border-width) solid var(--control-border);
  border-radius: var(--input-radius);
  background: var(--surface-clean);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.45;
  transition:
    border-color var(--duration-standard) ease,
    box-shadow var(--duration-standard) ease,
    background var(--duration-standard) ease;
}

.textarea {
  min-height: 140px;
  resize: vertical;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--control-border-hover);
  box-shadow: var(--focus-ring);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted-dark);
}

.checkbox,
.radio {
  accent-color: var(--tree-gold);
}


/* =========================================================
   TABLES
   ========================================================= */

.table,
.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--control-border);
  border-radius: var(--table-radius);
  background: var(--surface-clean);
}

.table th,
.table td,
.prose th,
.prose td {
  padding: var(--table-row-padding-y) var(--table-row-padding-x);
  text-align: start;
  border-block-end: var(--border-width) solid var(--border);
}

.table th,
.prose th {
  color: var(--text-strong);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
}

.table tr:last-child td,
.prose tr:last-child td {
  border-block-end: 0;
}

.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}


/* =========================================================
   NAVIGATION PRIMITIVES
   ========================================================= */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted-dark);
  font-size: var(--fs-small);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}


/* =========================================================
   EMPTY STATE
   ---------------------------------------------------------
   Useful for dashboards, content lists, product states.
   ========================================================= */

.empty-state {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-5);
  border: var(--border-width) dashed var(--control-border);
  border-radius: var(--radius-lg);
  text-align: center;
}


/* Touch devices should not simulate hover lift. */
@media (hover: none) {
  .button:hover,
  :is(a.card, button.card, .card--interactive):hover {
    transform: none;
  }
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--table-radius);
}






.messages-shell {
  padding-block-start: var(--space-5);
}

.messages-shell .alert {
  margin-block-end: var(--space-4);
}

.alert--error {
  border-color: color-mix(in srgb, var(--status-danger) 55%, transparent);
}

.alert--success {
  border-color: color-mix(in srgb, var(--status-success) 55%, transparent);
}

.alert--error,
.alert--danger {
  background: color-mix(in srgb, var(--status-danger) 7%, var(--surface-clean));
}

.alert--success {
  background: color-mix(in srgb, var(--status-success) 7%, var(--surface-clean));
}

.alert p {
  margin: 0;
}

.alert p + p {
  margin-block-start: var(--space-2);
}