/**
 * Filipe Lopes — Creative Tools UI tokens
 * Source: POLISphone (polisphone/extras/main.css)
 *
 * Usage: link or @import this file from your project (adjust path as needed).
 * Map project variables to --filipe-* tokens, or use utility classes below.
 */

:root {
  /* ── Surfaces ── */
  --filipe-bg: #f0e4e4;
  --filipe-stage: #e2d6d6;
  --filipe-panel-dark: #1a1a1e;
  --filipe-panel-dark-2: #2a2a30;
  --filipe-modal: rgb(225, 233, 180);

  /* ── Accent & semantic ── */
  --filipe-accent: #88d8b0;
  --filipe-accent-hover: #9fe9af;
  --filipe-accent-bright: #96ceb4;
  --filipe-active-lime: #a8d30d;
  --filipe-play: #6d9652;
  --filipe-play-hover: #9fe9af;
  --filipe-play-border: #03611b;
  --filipe-record: #8f6767;
  --filipe-record-active: #d30909;
  --filipe-stop: #727070;
  --filipe-save: #949692;
  --filipe-danger: #f03333;
  --filipe-close: #e28f8f;

  /* ── Text ── */
  --filipe-text: #000000;
  --filipe-text-muted: #6b6969;
  --filipe-text-on-dark: #f0e4e4;
  --filipe-text-meta: #9a9595;
  --filipe-text-hint: #777777;
  --filipe-text-icon: #393a39;
  --filipe-text-map-icon: #4d4a4a;
  --filipe-tip-highlight: rgb(255, 0, 21);

  /* ── Borders & overlays ── */
  --filipe-border: #444444;
  --filipe-border-soft: #555555;
  --filipe-canvas-border-width: 3px;
  --filipe-overlay: rgba(0, 0, 0, 0.6);
  --filipe-overlay-blur: 3px;

  /* ── p5 / canvas screens ── */
  --filipe-screen-mint: rgb(136, 216, 176);
  --filipe-screen-button-fill: rgb(20, 20, 20);
  --filipe-screen-button-stroke: rgb(255, 255, 255);

  /* ── Typography ── */
  --filipe-font-mono: "Roboto Mono", monospace;
  --filipe-font-display: "Raleway", sans-serif;
  --filipe-font-alt: "Dosis", sans-serif;

  /* ── Type scale ── */
  --filipe-text-h1: 30px;
  --filipe-text-h2: 20px;
  --filipe-text-h3: 18px;
  --filipe-text-body: 14px;
  --filipe-text-small: 0.85rem;
  --filipe-text-tip: 15px;

  /* ── Icon toolbar ── */
  --filipe-icon-size: 27px;
  --filipe-icon-size-lg: 32px;
  --filipe-icon-size-sm: 16px;
  --filipe-icon-color: var(--filipe-text-muted);
  --filipe-icon-hover: var(--filipe-text);

  /* ── Motion ── */
  --filipe-transition: 0.3s;
  --filipe-tip-animation: 3s infinite ease-out;

  /* ── Radii ── */
  --filipe-radius-sm: 3px;
  --filipe-radius: 4px;
  --filipe-radius-md: 5px;
  --filipe-radius-lg: 8px;
  --filipe-radius-pill: 10px;

  /* ── Shadows ── */
  --filipe-shadow-modal: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  --filipe-shadow-panel: 0 1rem 3rem rgba(0, 0, 0, 0.45);
}

/* ── Base (optional — include when starting a new tool page) ── */
.filipe-ui {
  font-family: var(--filipe-font-mono);
  background-color: var(--filipe-bg);
  color: var(--filipe-text);
}

.filipe-stage {
  background-color: var(--filipe-stage);
  text-align: center;
}

/* ── Icon toolbar ── */
.filipe-icon {
  color: var(--filipe-icon-color);
  font-size: var(--filipe-icon-size);
  cursor: pointer;
  transition: color var(--filipe-transition);
}

.filipe-icon:hover {
  color: var(--filipe-icon-hover);
}

.filipe-icon-accent:hover,
.filipe-icon.is-active {
  color: var(--filipe-accent);
}

.filipe-icon-record:hover,
.filipe-icon-record.is-recording {
  color: var(--filipe-record-active);
}

.filipe-icon-play:hover,
.filipe-icon-play.is-playing {
  color: var(--filipe-play-hover);
}

/* ── Buttons ── */
.filipe-btn {
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--filipe-border-soft);
  background: var(--filipe-panel-dark-2);
  color: var(--filipe-text-on-dark);
  border-radius: var(--filipe-radius);
  cursor: pointer;
  font-family: var(--filipe-font-mono);
  font-size: var(--filipe-text-small);
  transition: border-color var(--filipe-transition), color var(--filipe-transition);
}

.filipe-btn:hover {
  border-color: var(--filipe-accent);
  color: var(--filipe-accent);
}

.filipe-btn-primary {
  background: var(--filipe-accent);
  color: var(--filipe-panel-dark);
  border-color: var(--filipe-accent);
  font-weight: bold;
}

.filipe-btn-primary:hover {
  background: var(--filipe-accent-hover);
  color: var(--filipe-text);
}

/* ── Modals & overlays ── */
.filipe-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--filipe-overlay);
  backdrop-filter: blur(var(--filipe-overlay-blur));
  z-index: 5;
}

.filipe-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(740px, 92vw);
  background-color: var(--filipe-modal);
  color: var(--filipe-text);
  padding: 2rem 3rem;
  border-radius: var(--filipe-radius-md);
  box-shadow: var(--filipe-shadow-modal);
  z-index: 10;
  font-size: var(--filipe-text-body);
}

.filipe-panel-dark {
  background: var(--filipe-panel-dark);
  color: var(--filipe-text-on-dark);
  padding: 1.5rem 2rem;
  border-radius: var(--filipe-radius-lg);
  box-shadow: var(--filipe-shadow-panel);
}

.filipe-panel-dark h3 {
  color: var(--filipe-accent);
}

.filipe-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 2rem;
  color: var(--filipe-text-meta);
  cursor: pointer;
  border: none;
  background: none;
  line-height: 1;
}

.filipe-close:hover {
  color: var(--filipe-danger);
}

/* ── Tips (toolbar hint line) ── */
.filipe-tip {
  font-size: var(--filipe-text-tip);
  font-style: italic;
  font-weight: bolder;
  animation: filipe-tip-pulse var(--filipe-tip-animation);
}

@keyframes filipe-tip-pulse {
  0%,
  100% {
    color: var(--filipe-tip-highlight);
    font-weight: bolder;
  }
  30%,
  60% {
    color: var(--filipe-text);
    font-weight: bold;
  }
}

/* ── Loader ── */
.filipe-loader {
  border: 16px solid #f3f3f3;
  border-top-color: var(--filipe-accent-bright);
  border-radius: 50%;
  animation: filipe-spin 2s linear infinite;
}

@keyframes filipe-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Links ── */
.filipe-ui a:link,
.filipe-ui a:visited {
  background-color: var(--filipe-bg);
  color: var(--filipe-text);
}

.filipe-ui a:hover,
.filipe-ui a:active {
  color: var(--filipe-accent);
}