/* ============================================================
   STUDIO F03 — Component primitives
   Depends on colors_and_type.css tokens.
   ============================================================ */

/* ---------- BUTTONS ---------- */
.f03-btn{
  font-family:var(--font-sub); font-weight:700;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), color var(--dur) var(--ease);
  text-decoration:none; line-height:1; white-space:nowrap;
}
.f03-btn:active{ transform:scale(.98); }
.f03-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }

.f03-btn--primary{ background:var(--f03-ink); color:#fff; }
.f03-btn--primary:hover{ background:#000; box-shadow:var(--shadow-md); transform:translateY(-1px); }

.f03-btn--brand{ background:var(--grad-brand); color:#fff; background-size:140% 140%; background-position:0% 50%; }
.f03-btn--brand:hover{ background-position:100% 50%; box-shadow:var(--shadow-brand); transform:translateY(-1px); }

.f03-btn--ghost{ background:transparent; color:var(--fg1); border-color:var(--border); }
.f03-btn--ghost:hover{ border-color:var(--fg1); color:var(--fg1); }

.f03-btn--link{ background:none;border:0;padding:13px 4px;color:var(--accent); }
.f03-btn--link:hover{ color:var(--f03-roxo); }

.f03-btn--sm{ padding:9px 16px; font-size:11px; }
.f03-btn--lg{ padding:17px 32px; font-size:14px; }

/* On dark surfaces */
[data-theme="dark"] .f03-btn--primary,
.on-dark .f03-btn--primary{ background:#fff; color:var(--f03-ink); }
[data-theme="dark"] .f03-btn--ghost,
.on-dark .f03-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.32); }
[data-theme="dark"] .f03-btn--ghost:hover,
.on-dark .f03-btn--ghost:hover{ border-color:#fff; }

/* ---------- TAGS / BADGES ---------- */
.f03-tag{
  font-family:var(--font-sub); font-weight:700;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--radius-pill);
  background:#E8E8EC; color:var(--fg2); border:1px solid #DADAE0;
}
.f03-tag--brand{ background:#E8E8EC; color:var(--f03-magenta); border-color:#DADAE0; }
.f03-tag--dot::before{ content:""; width:7px;height:7px;border-radius:50%;background:var(--accent); }
.f03-tag--solid{ background:var(--f03-ink); color:#fff; border-color:transparent; }

/* ---------- INPUTS ---------- */
.f03-field{ display:flex; flex-direction:column; gap:7px; }
.f03-label{
  font-family:var(--font-sub); font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg2);
}
.f03-input,.f03-textarea,.f03-select{
  font-family:var(--font-body); font-size:15px; color:var(--fg1);
  background:var(--f03-white); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 14px; width:100%;
  box-sizing:border-box; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.f03-input::placeholder,.f03-textarea::placeholder{ color:var(--fg3); }
.f03-input:focus,.f03-textarea:focus,.f03-select:focus{
  outline:none; border-color:var(--f03-violeta); box-shadow:0 0 0 3px var(--focus-ring);
}

/* ---------- CARDS ---------- */
.f03-card{
  background:var(--f03-white); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.f03-card--hover:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:transparent; }

/* project / portfolio thumbnail card */
.f03-project{ position:relative; display:block; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; background:var(--f03-ink); }
.f03-project img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.f03-project:hover img{ transform:scale(1.045); }
.f03-project__scrim{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px 20px; background:linear-gradient(180deg,transparent 38%,rgba(20,16,28,.82) 100%);
  opacity:.92; transition:opacity var(--dur) var(--ease);
}
.f03-project__type{ font-family:var(--font-sub); font-weight:700; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#C8418E; }
.f03-project__title{ font-family:var(--font-title); font-weight:500; font-size:18px; letter-spacing:.04em; text-transform:uppercase; color:#fff; margin-top:5px; }