/* ============================================================
   Eagle Agency 2.0 — Component Primitives
   ------------------------------------------------------------
   Built entirely on design-tokens.css. Load order:
     design-tokens.css  →  components.css  →  page-specific CSS

   This file defines the shared vocabulary (§28). It does not
   replace theme-depth / theme-glass / theme-tactile — those
   remain the public site's cinematic surface treatment. Admin
   surfaces use the plain variants here (no glass, no depth
   wash), per §29: shared language, different density.
   ============================================================ */

/* ---------- layout primitives (§05) ---------- */
.eg-container{
  width:100%;
  max-width:var(--container-lg);
  margin-inline:auto;
  padding-inline:clamp(var(--sp-md), 4vw, var(--sp-2xl));
}
.eg-container--wide{ max-width:var(--container-xl); }
.eg-container--narrow{ max-width:var(--container-sm); }

.eg-section{ padding-block: var(--sp-4xl); }
.eg-section--tight{ padding-block: var(--sp-2xl); }
@media (max-width: 700px){
  .eg-section{ padding-block: var(--sp-3xl); }
}

.eg-stack{ display:flex; flex-direction:column; gap:var(--sp-md); }
.eg-stack--sm{ gap:var(--sp-sm); }
.eg-stack--lg{ gap:var(--sp-xl); }

.eg-cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-sm); }

.eg-grid{
  display:grid;
  gap:var(--grid-gutter);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

/* ---------- typography primitives (§03) ---------- */
.eg-display{ font-family:var(--font-display); font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:-.02em; margin:0; }
.eg-h1{ font-family:var(--font-display); font-size:var(--fs-h1); line-height:var(--lh-heading); margin:0; }
.eg-h2{ font-family:var(--font-display); font-size:var(--fs-h2); line-height:var(--lh-heading); margin:0; }
.eg-h3{ font-family:var(--font-display); font-size:var(--fs-h3); line-height:var(--lh-heading); margin:0; }
.eg-h4{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-h4); margin:0; }
.eg-body-lg{ font-family:var(--font-body); font-size:var(--fs-body-lg); line-height:var(--lh-body); color:var(--color-text-muted); }
.eg-body{ font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); }
.eg-caption{ font-family:var(--font-body); font-size:var(--fs-caption); color:var(--color-text-muted); }
.eg-label{
  font-family:var(--font-body); font-size:var(--fs-label); font-weight:600;
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--color-gold-soft);
}
html.eagle-rtl .eg-label{ letter-spacing:0; }

/* ---------- 09 buttons ---------- */
.eg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-xs);
  min-height:44px; padding:0 var(--sp-lg);
  font-family:var(--font-body); font-size:var(--fs-button); font-weight:600;
  letter-spacing:var(--ls-label); text-transform:uppercase; text-decoration:none;
  border-radius:var(--radius-md); border:var(--border-hairline);
  background:transparent; color:var(--color-text);
  cursor:pointer; user-select:none;
  transition:border-color var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             transform var(--dur-instant) var(--ease-press);
}
html.eagle-rtl .eg-btn{ letter-spacing:0; }
.eg-btn:active{ transform:scale(.97); transition-duration:var(--dur-instant); }
.eg-btn:focus-visible{ outline:none; box-shadow:var(--shadow-focus-gold); }
.eg-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.eg-btn--primary{ background:var(--color-text); color:var(--color-bg); border-color:var(--color-text); }
.eg-btn--primary:hover{ background:var(--color-gold-soft); border-color:var(--color-gold-soft); }

.eg-btn--secondary{ border-color:var(--color-border-strong); }
.eg-btn--secondary:hover{ border-color:var(--color-gold-soft); color:var(--color-gold-soft); }

.eg-btn--ghost{ border-color:transparent; background:rgba(255,255,255,.04); }
.eg-btn--ghost:hover{ background:rgba(255,255,255,.08); }

.eg-btn--text{ min-height:auto; padding:0; border:0; background:none; text-transform:none;
  letter-spacing:0; font-weight:500; color:var(--color-gold-soft); }
.eg-btn--text:hover{ text-decoration:underline; }

.eg-btn--danger{ border-color:rgba(209,97,93,.5); color:var(--color-danger); }
.eg-btn--danger:hover{ background:rgba(209,97,93,.12); border-color:var(--color-danger); }

/* Admin Action: same shape, admin's faster timing, accent focus */
.eg-btn--admin{ border-radius:var(--radius-admin); transition-duration:var(--dur-admin-base); }
.eg-btn--admin:focus-visible{ box-shadow:var(--shadow-focus-accent); }

/* ---------- 10 links ---------- */
.eg-link{ color:var(--color-text); text-decoration:none; position:relative; }
.eg-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:var(--color-gold-soft); transition:right var(--dur-slow) var(--ease-out);
}
.eg-link:hover::after{ right:0; }
.eg-link:focus-visible{ outline:none; box-shadow:var(--shadow-focus-gold); }

/* ---------- 11 cards ---------- */
.eg-card{
  background:var(--color-surface); border:var(--border-hairline); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm), var(--shadow-md);
  padding:var(--sp-lg);
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.eg-card--editorial{ background:transparent; border-color:rgba(243,241,234,.1); }
.eg-card--admin{ border-radius:var(--radius-admin); box-shadow:var(--shadow-sm); }
.eg-card--interactive:hover{ border-color:var(--color-gold-soft); box-shadow:var(--shadow-sm), var(--shadow-lg); }

/* Card variants — same base, semantic class for intent only */
.eg-card--project, .eg-card--service, .eg-card--capability,
.eg-card--process, .eg-card--info{ /* inherit .eg-card; class kept for content targeting */ }

/* ---------- form system (§12) ---------- */
.eg-field{ display:flex; flex-direction:column; gap:var(--sp-2xs); margin-bottom:var(--sp-md); }
.eg-field label{ font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--color-text-muted); }
.eg-field .eg-help{ font-size:var(--fs-caption); color:var(--color-text-muted); }

.eg-input, .eg-textarea, .eg-select{
  width:100%; background:rgba(255,255,255,.035); border:var(--border-hairline);
  border-radius:var(--radius-sm); color:var(--color-text);
  font-family:var(--font-body); font-size:var(--fs-body); padding:var(--sp-sm) var(--sp-md);
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.eg-textarea{ min-height:96px; resize:vertical; line-height:var(--lh-body); }
.eg-input:focus, .eg-textarea:focus, .eg-select:focus{
  outline:none; border-color:var(--color-gold-soft); box-shadow:var(--shadow-focus-gold);
}
/* Admin inputs focus with the accent, not gold — gold stays reserved for commitment/selection */
.eg-input--admin:focus, .eg-textarea--admin:focus, .eg-select--admin:focus{
  border-color:rgba(111,227,255,.5); box-shadow:var(--shadow-focus-accent);
}

.eg-field--error .eg-input, .eg-field--error .eg-textarea, .eg-field--error .eg-select{
  border-color:var(--color-danger); box-shadow:0 0 0 3px rgba(209,97,93,.22);
}
.eg-field--error .eg-error-text{ display:flex; align-items:center; gap:var(--sp-2xs); font-size:var(--fs-caption); color:var(--color-danger); }
.eg-field--error .eg-error-text::before{ content:"!"; display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%; background:var(--color-danger); color:#0a0a0c; font-size:10px; font-weight:700; }
.eg-field--success .eg-input{ border-color:var(--color-success); }

/* toggle */
.eg-toggle{ position:relative; width:40px; height:22px; flex:none; }
.eg-toggle input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.eg-toggle .eg-toggle-track{ position:absolute; inset:0; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12); border:var(--border-hairline); transition:background var(--dur-base) var(--ease-out); }
.eg-toggle .eg-toggle-thumb{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--color-text-muted); transition:transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.eg-toggle input:checked ~ .eg-toggle-track{ background:rgba(233,205,138,.28); border-color:var(--color-gold-soft); }
.eg-toggle input:checked ~ .eg-toggle-thumb{ transform:translateX(18px); background:var(--color-gold-soft); }
.eg-toggle input:focus-visible ~ .eg-toggle-track{ box-shadow:var(--shadow-focus-gold); }

/* ---------- status badges (§16) ---------- */
.eg-badge{
  display:inline-flex; align-items:center; gap:var(--sp-2xs);
  font-size:var(--fs-caption); font-weight:600; letter-spacing:.04em;
  padding:.2em .65em; border-radius:var(--radius-pill); border:1px solid transparent;
}
.eg-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.eg-badge--published{ color:var(--color-success); background:rgba(78,161,114,.12); border-color:rgba(78,161,114,.35); }
.eg-badge--draft{ color:var(--color-text-muted); background:rgba(255,255,255,.06); border-color:var(--color-border-strong); }
.eg-badge--hidden{ color:var(--color-text-muted); background:transparent; border-color:var(--color-border); }
.eg-badge--scheduled{ color:var(--color-gold-soft); background:rgba(233,205,138,.12); border-color:rgba(233,205,138,.4); }
.eg-badge--active{ color:var(--color-success); background:rgba(78,161,114,.12); border-color:rgba(78,161,114,.35); }
.eg-badge--inactive{ color:var(--color-text-muted); background:rgba(255,255,255,.04); border-color:var(--color-border); }
.eg-badge--processing{ color:var(--color-warning); background:rgba(213,160,60,.12); border-color:rgba(213,160,60,.4); }
.eg-badge--failed{ color:var(--color-danger); background:rgba(209,97,93,.12); border-color:rgba(209,97,93,.4); }
/* status is never color-only: badge text always states the word itself (§16) */

/* ---------- toasts (§18) ---------- */
.eg-toast-region{ position:fixed; right:var(--sp-lg); bottom:var(--sp-lg); z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--sp-sm); max-width:340px; }
html.eagle-rtl .eg-toast-region{ right:auto; left:var(--sp-lg); }
.eg-toast{
  display:flex; align-items:flex-start; gap:var(--sp-sm);
  background:var(--color-surface-elevated); border:var(--border-hairline); border-radius:var(--radius-admin);
  padding:var(--sp-sm) var(--sp-md); box-shadow:var(--shadow-md);
  animation:eg-toast-in var(--dur-base) var(--ease-out);
}
@keyframes eg-toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.eg-toast--success{ border-left:3px solid var(--color-success); }
.eg-toast--error{ border-left:3px solid var(--color-danger); }
.eg-toast--warning{ border-left:3px solid var(--color-warning); }
.eg-toast--info{ border-left:3px solid var(--color-accent); }
html.eagle-rtl .eg-toast{ border-left:0; border-right:3px solid currentColor; }

/* ---------- modal / drawer (§17) ---------- */
.eg-modal-backdrop{ position:fixed; inset:0; z-index:var(--z-overlay); background:rgba(5,5,6,.7);
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out); }
.eg-modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
.eg-modal{
  position:fixed; z-index:var(--z-modal); left:50%; top:50%;
  transform:translate(-50%,-48%) scale(.98); opacity:0; pointer-events:none;
  width:min(560px, calc(100vw - var(--sp-lg)*2));
  background:var(--color-surface-elevated); border:var(--border-hairline); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:var(--sp-xl);
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.eg-modal.is-open{ transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }

.eg-drawer{
  position:fixed; z-index:var(--z-modal); top:0; right:0; bottom:0;
  width:min(420px, 92vw); background:var(--color-surface-elevated);
  border-left:var(--border-hairline); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform var(--dur-base) var(--ease-out);
  padding:var(--sp-xl); overflow-y:auto;
}
.eg-drawer.is-open{ transform:translateX(0); }
html.eagle-rtl .eg-drawer{ right:auto; left:0; border-left:0; border-right:var(--border-hairline); transform:translateX(-100%); }
html.eagle-rtl .eg-drawer.is-open{ transform:translateX(0); }

/* ---------- loading / skeleton (§19) ---------- */
.eg-skeleton{
  position:relative; overflow:hidden; background:rgba(255,255,255,.06); border-radius:var(--radius-sm);
}
.eg-skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  animation:eg-skeleton-sweep 1.5s ease-in-out infinite;
}
@keyframes eg-skeleton-sweep{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .eg-skeleton::after{ animation:none; opacity:.5; } }

.eg-spinner{
  width:20px; height:20px; border-radius:50%; flex:none;
  border:2px solid var(--color-border-strong); border-top-color:var(--color-gold-soft);
  animation:eg-spin .7s linear infinite;
}
@keyframes eg-spin{ to{ transform:rotate(360deg); } }

.eg-progress{ height:3px; border-radius:var(--radius-pill); background:var(--color-border); overflow:hidden; }
.eg-progress > i{ display:block; height:100%; background:linear-gradient(90deg, var(--color-gold), var(--color-accent));
  transition:width var(--dur-base) var(--ease-out); }

/* ---------- empty states (§20) ---------- */
.eg-empty{ text-align:center; padding:var(--sp-3xl) var(--sp-lg); color:var(--color-text-muted); }
.eg-empty .eg-empty-title{ color:var(--color-text); font-family:var(--font-body); font-weight:600; margin-bottom:var(--sp-xs); }
.eg-empty .eg-empty-action{ margin-top:var(--sp-lg); }

/* ---------- reduced motion: global cut ---------- */
@media (prefers-reduced-motion: reduce){
  .eg-btn, .eg-link::after, .eg-card, .eg-input, .eg-textarea, .eg-select,
  .eg-toggle-track, .eg-toggle-thumb, .eg-modal, .eg-drawer{ transition-duration: var(--dur-instant) !important; }
}