/* ============================================================
   Vilemar Studio theme layer
   Dark base (#222828) · mint (#4de885) + purple (#602968) accents.
   Loaded AFTER the FormuNova design-system tokens so it remaps them
   for every page and every DS component. Font: Space Grotesk + Hanken Grotesk.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* fonts: characterful modern sans */
  --font-display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* scale remaps */
  --blue-50:  rgba(77,232,133,0.14);
  --blue-100: rgba(242,244,243,0.72);
  --blue-500: #4de885;
  --blue-700: #f2f4f3;
  --blue-900: #f2f4f3;
  --white:    #2c3434;
  --gray-50:  #262d2d;
  --gray-100: #303838;
  --gray-200: rgba(242,244,243,0.12);
  --gray-300: rgba(242,244,243,0.22);
  --gray-500: #8fa09d;
  --gray-700: #c5cfcd;
  --gray-900: #f2f4f3;
  --mist:     #2b3232;

  /* semantic overrides */
  --surface-page:   #222828;
  --surface-subtle: #262d2d;
  --surface-card:   #2c3434;
  --surface-mist:   #2b3232;
  --surface-tint:   #262d2d;
  --surface-brand:  #602968;
  --surface-ink:    #1b2020;
  --text-strong:    #f2f4f3;
  --text-body:      #c5cfcd;
  --text-muted:     #90a09e;
  --text-on-blue:   #222828;
  --text-on-blue-muted: rgba(242,244,243,0.7);
  --text-brand:     #4de885;
  --text-link:      #4de885;
  --action-primary: #4de885;
  --action-primary-hover: #37cf6f;
  --action-primary-active: #2fb862;
  --action-accent:  #602968;
  --action-accent-hover: #4f2156;
  --action-accent-active: #431c49;
  --border-subtle:  rgba(242,244,243,0.12);
  --border-default: rgba(242,244,243,0.22);
  --border-strong:  rgba(242,244,243,0.34);
  --border-brand:   #4de885;
  --border-on-blue: rgba(242,244,243,0.28);
  --focus-ring:     #4de885;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: #222828; }
img { display: block; max-width: 100%; }
input::placeholder, textarea::placeholder { color: rgba(242,244,243,0.42); }

.vilemar-logo {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("assets/vilemar-logo.svg") left center / contain no-repeat;
  mask: url("assets/vilemar-logo.svg") left center / contain no-repeat;
}

.vilemar-logo-full {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("assets/vilemar-logo-full.svg") left center / contain no-repeat;
  mask: url("assets/vilemar-logo-full.svg") left center / contain no-repeat;
}

.fn-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
@media (max-width: 860px) { .fn-detail-grid { grid-template-columns: 1fr; } }