/* ==========================================================================
   Amidude Portfolio — Design Tokens & Components
   Mirrors the Figma library (Amidude Portfolio — Design System).
   Load AFTER style.css: these component styles intentionally win the cascade
   so buttons, pills, and cards stay consistent site-wide.
   ========================================================================== */

:root {
  /* Primitives — never use directly; reference semantic tokens below */
  --ink-900:   #1A1A17;
  --bone-50:   #FAF8F3;
  --olive-600: #6B7044;
  --olive-700: #555A35;
  --gold-500:  #C9A227;
  --brown-400: #9A8B7D;
  --brown-600: #7A5C44;
  --stone-200: #E8E4DA;
  --stone-300: #D6D0C2;

  /* Semantic color */
  --color-bg-page:           var(--bone-50);
  --color-bg-card:           var(--stone-200);
  --color-bg-inverse:        var(--ink-900);
  --color-text-primary:      var(--ink-900);
  --color-text-secondary:    var(--brown-600);
  --color-text-muted:        var(--brown-400);
  --color-text-inverse:      var(--bone-50);
  --color-interactive:       var(--olive-600);  /* CTAs, links, focus, hover cues ONLY */
  --color-interactive-hover: var(--olive-700);
  --color-accent:            var(--gold-500);   /* one highlight per view */
  --color-border-subtle:     var(--stone-200);
  --color-border-strong:     var(--stone-300);

  /* Spacing — 8px scale */
  --spacing-xs:  8px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  40px;
  --spacing-xl:  64px;
  --spacing-2xl: 96px;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-pill: 9999px;

  /* Typography */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-heading-card-lg: 600 31px/38px var(--font-heading);
  --text-heading-card-sm: 600 25px/32px var(--font-heading);
  --text-body-outcome:    400 16px/24px var(--font-body);
  --text-label-pill:      500 12px/16px var(--font-body);
  --text-label-button:    500 16px/24px var(--font-body);
  --tracking-pill: 0.8px;
  --tracking-heading-lg: -0.3px;
  --tracking-heading-sm: -0.2px;

  /* Effects & motion */
  --shadow-card-hover: 0 6px 20px rgba(26, 26, 23, 0.14);
  --focus-ring: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-interactive);
  --transition-fast: 180ms ease;
}

/* ==========================================================================
   Buttons — the only two styles on the site (matches Figma Button set)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font: var(--text-label-button);
  border-radius: var(--radius-sm);
  padding: 14px var(--spacing-md);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-solid {
  background: var(--color-interactive);
  color: var(--color-text-inverse);
  border: none;
}

.btn-solid:hover {
  background: var(--color-interactive-hover);
  color: var(--color-text-inverse);
}

.btn-ghost {
  background: transparent;
  color: var(--color-interactive);
  border: 1.5px solid var(--color-interactive);
}

.btn-ghost:hover {
  background: var(--color-bg-card);
  color: var(--color-interactive-hover);
  border-color: var(--color-interactive-hover);
}

/* ==========================================================================
   Availability pill — hero. The pill is the signal; the statement in
   #contact is the message. Gold dot = the one accent on this view.
   ========================================================================== */

.availability-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--color-bg-card);
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  font: var(--text-label-pill);
  letter-spacing: var(--tracking-pill);
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  transition: background-color var(--transition-fast);
}

.availability-pill:hover { background: var(--color-border-subtle); }

.availability-pill:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}

/* ==========================================================================
   Work card + bento grid (matches Figma Work Card set)
   Cards are <article> until case study pages exist; hover lift is scoped
   to a.work-card so non-links never fake clickability.
   ========================================================================== */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.work-card--large { grid-column: span 2; }

.work-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
}

a.work-card {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

a.work-card:hover,
a.work-card:focus-visible {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

a.work-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-card-hover);
}

.work-card__image {
  display: block;
  background: var(--color-bg-inverse);
  height: 220px;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.work-card--large .work-card__image { height: 320px; }

.work-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.work-card__tag {
  background: var(--color-bg-page);
  border-radius: var(--radius-pill);
  color: var(--color-interactive);
  font: var(--text-label-pill);
  letter-spacing: var(--tracking-pill);
  padding: 6px var(--spacing-sm);
  text-transform: uppercase;
}

.work-card__title {
  color: var(--color-text-primary);
  font: var(--text-heading-card-sm);
  letter-spacing: var(--tracking-heading-sm);
  margin: 0;
}

.work-card--large .work-card__title {
  font: var(--text-heading-card-lg);
  letter-spacing: var(--tracking-heading-lg);
}

.work-card__outcome {
  color: var(--color-text-secondary);
  font: var(--text-body-outcome);
  margin: 0;
  max-width: 65ch;
}

/* CTA tile — inverse card, the grid's single interactive endpoint */
.work-card--cta {
  background: var(--color-interactive);
  justify-content: center;
}

.work-card--cta .work-card__title,
.work-card--cta .work-card__outcome {
  color: var(--color-text-inverse);
}

.work-card--cta:hover { background: var(--color-interactive-hover); }

.work-card__arrow {
  color: var(--color-text-inverse);
  font-size: 24px;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.work-card--cta:hover .work-card__arrow { transform: translateX(4px); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-card--large { grid-column: span 2; }
}

@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card--large { grid-column: span 1; }
  .work-card--large .work-card__image { height: 220px; }
  .work-card--large .work-card__title {
    font: var(--text-heading-card-sm);
    letter-spacing: var(--tracking-heading-sm);
  }
}