/*
Theme Name:        YaMaMe
Theme URI:         https://yamame.io
Author:            Tony
Author URI:        https://yamame.io
Description:       Llámame. The dark, teal-accented block theme for yamame.io — built for pages composed of core blocks pushed through the YaMaMe MCP connector.
Version:           0.1.0
Requires at least: 6.9
Tested up to:      7.0
Requires PHP:      8.1
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       yamame-theme
*/

/* Component styles for the ym-* classes used in page content.
   Loaded on the front end via functions.php. Colors reference the
   theme.json palette through WordPress preset variables so palette
   edits propagate here automatically. */

:root {
  --ym-bg: var(--wp--preset--color--base);
  --ym-card: var(--wp--preset--color--card);
  --ym-text: var(--wp--preset--color--contrast);
  --ym-dim: var(--wp--preset--color--dim);
  --ym-accent: var(--wp--preset--color--accent);
  --ym-accent-dark: var(--wp--preset--color--accent-dark);
  --ym-border: #232725;
  --ym-radius: 14px;
}

/* Highlighter mark in headlines */
.ym-mark, mark.ym-mark {
  background: var(--ym-accent);
  color: #04211d;
  padding: 0 12px;
  border-radius: 4px;
}

/* Announcement bar */
.ym-bar {
  background: var(--ym-accent);
  color: #04211d;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 7px 16px;
}

/* Terminal card */
.ym-term {
  background: var(--ym-card);
  border: 1px solid var(--ym-border);
  border-radius: var(--ym-radius);
  padding: 26px 28px 34px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13.5px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.ym-term p.ym-term-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ym-dim);
  margin-bottom: 18px;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 700;
}
.ym-term p.ym-term-label::before { content: none; }
.ym-term p {
  padding: 5px 0;
  margin: 0;
  color: #d7dedb;
  font-size: 13.5px;
}
.ym-term p::before {
  content: ">";
  color: var(--ym-accent);
  margin-right: 10px;
  font-weight: 500;
}
.ym-term p.ym-cursor::after {
  content: "▋";
  color: var(--ym-accent);
  animation: ym-blink 1.1s step-end infinite;
  margin-left: 2px;
}
@keyframes ym-blink { 50% { opacity: 0; } }

/* Bordered cards */
.ym-card {
  background: var(--ym-card);
  border: 1px solid var(--ym-border);
  border-radius: var(--ym-radius);
  padding: 28px !important;
}
.ym-card h3 { font-size: 18px; margin-bottom: 10px; }
.ym-card p { font-size: 14px; color: var(--ym-dim); }

.ym-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ym-accent-dark);
  color: var(--ym-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 18px;
}

/* Big step number */
.ym-num {
  font-size: 44px;
  font-weight: 800;
  color: var(--ym-accent);
  line-height: 1;
}

/* Works-with strip */
.ym-strip {
  border-top: 1px solid var(--ym-border);
  border-bottom: 1px solid var(--ym-border);
}
.ym-strip-label {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--ym-dim);
}
.ym-logos {
  font-weight: 700;
  font-size: 18px;
  color: #cfd6d3;
}

/* Permission gates list */
.ym-gates { list-style: none; padding-left: 0; }
.ym-gates li {
  padding: 12px 0;
  border-bottom: 1px solid var(--ym-border);
  font-size: 14.5px;
  color: #d7dedb;
}
.ym-gates li:last-child { border-bottom: none; }
.ym-gates .ym-g {
  color: var(--ym-accent);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  white-space: nowrap;
  margin-right: 12px;
}

/* Dim helper text */
.ym-dim { color: var(--ym-dim); }
.ym-fine { font-size: 12.5px; color: var(--ym-dim); }

/* Security band */
.ym-band {
  background: var(--ym-card);
  border-top: 1px solid var(--ym-border);
  border-bottom: 1px solid var(--ym-border);
}

/* Ghost button variant */
.ym-btn-ghost .wp-block-button__link {
  background: transparent;
  color: var(--ym-text);
  border: 1px solid var(--ym-border);
}
.ym-btn-ghost .wp-block-button__link:hover { border-color: var(--ym-accent); }

/* Buttons: subtle lift on hover */
.wp-block-button__link { transition: transform .12s ease, box-shadow .12s ease; }
.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(45, 212, 191, .35);
}
.ym-btn-ghost .wp-block-button__link:hover { box-shadow: none; }

/* Inline code chips */
p code, li code {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  background: var(--ym-accent-dark);
  color: var(--ym-accent);
  border-radius: 6px;
  padding: 2px 7px;
}